文章编辑

1. 访问编辑器

管理后台左侧菜单进入「文章管理」，点击「新增文章」创建新文章，或点击列表中的「编辑」按钮进入已有文章的编辑页面。

2. 界面布局

编辑器页面采用顶部导航栏 + 主编辑区 + 右侧设置抽屉的三段式布局。

2.1 顶部导航栏

顶部导航栏包含以下元素：

2.2 主编辑区

主编辑区基于 CodeMirror 6 构建，顶部为编辑器工具栏，底部显示统计信息字数和阅读时长，中间的编辑器支持不同视图。

2.3 右侧设置抽屉

点击「文章设置」按钮展开右侧抽屉，包含分类、标签、摘要、封面、发布属性等配置项。

3. 编辑器工具栏

编辑器顶部工具栏提供完整的格式化功能按钮，分为以下几组：

3.1 文本格式

3.2 标题级别

提供 H1 至 H6 六个标题级别按钮，用于构建文章层级结构：

• H1：文章主标题
• H2：文章大章节标题
• H3-H6：细分章节标题

3.3 特殊格式

3.4 代码与插入

图片上传说明：

• 支持拖拽上传：直接将图片拖入编辑区
• 支持剪贴板粘贴：截图后按 Ctrl+V 直接粘贴
• 支持格式：JPG、PNG、GIF、WebP 等常见图片格式

表格模板：

| 列1 | 列2 | 列3 |
|:---:|:---:|:---:|
| 内容 | 内容 | 内容 |

3.5 自定义语法

编辑器支持多种增强型 Markdown 语法：

提示框

用于展示提示、警告、成功、错误等信息：

:::note info 提示标题
这是提示框的内容
支持四种类型：info、warning、success、error
:::endnote

提示框类型：

标签页

用于展示并列的多个内容模块，读者可切换查看：

:::tabs
:::tab 第一步
第一步的内容
:::endtab
:::tab 第二步
第二步的内容
:::endtab
:::endtabs

折叠面板

用于收纳较长内容，读者可自由展开或收起：

:::fold 点击查看更多
这里是折叠的内容
:::endfold

添加 open 参数可设置默认展开状态：

:::fold 点击展开 open
默认展开的内容
:::endfold

链接卡片

用于展示外部链接，呈现更美观的链接样式：

:::link 标题 https://example.com 描述信息 :::

渲染效果：链接卡片会显示链接类型（站外链接/站内链接）、标题、描述和跳转箭头。

照片墙

用于展示多张图片，支持多行布局：

:::photo
图片1
图片2
图片3
:::n
图片4
图片5
:::endphoto

使用 :::n 分隔不同行的图片。

在线视频

用于添加视频播放，在文章中即可播放哔哩哔哩、YouTube 等在线视频：

:::video bilibili 视频ID :::
:::video youtube 视频ID :::
:::video 视频URL :::

视频 ID 在视频播放页面 URL 中获得，如：

• 哔哩哔哩：https://www.bilibili.com/video/BV176M3zPEZu/
• YouTube：https://www.youtube.com/watch?v=KMhk1J_VBqQ

3.6 视图控制

4. 编辑器

4.1 快捷键

4.2 搜索功能

按 Ctrl+F 打开搜索面板，做了一些适配，支持：

• 查找文本
• 高亮显示所有匹配项
• 上一处/下一处导航
• 匹配计数显示

4.3 代码块

编辑器使用 highlight.js 实现代码语法高亮，支持的语言包括但不限于：

• 前端：JavaScript、TypeScript、HTML、CSS、SCSS、Vue
• 后端：Python、Java、Go、Rust、PHP、Ruby
• 脚本：Shell、Bash、PowerShell
• 数据库：SQL
• 其他：JSON、YAML、XML、Markdown

代码块功能：

• 右上角显示语言标签
• 一键复制按钮
• 可折叠/展开（长代码时非常有用）

4.4 Mermaid 图表

编辑器支持直接渲染 Mermaid 图表语法：

graph TD
    A[开始] --> B[过程]
    B --> C[结束]

支持的图表类型：流程图、时序图、类图、状态图、ER 图等。

4.5 目录导航

点击工具栏「目录」按钮打开右侧目录面板：

• 自动提取文章中所有 H1-H6 标题
• 按层级缩进显示
• 点击标题可快速跳转到对应位置
• 实时更新，编辑内容后自动刷新

4.6 响应式设计

编辑器针对不同设备进行了适配：

• 桌面端：默认分屏模式，完整工具栏
• 平板端：工具栏自适应，目录面板宽度调整
• 移动端：可切换为纯编辑和纯预览两种模式

5. 文章设置

点击「文章设置」按钮打开右侧设置抽屉。

5.1 分类与标签

批量管理：在文章列表页面可点击「分类管理」和「标签管理」按钮进入专门的管理窗口进行增删改操作。

5.2 摘要设置

5.3 文章封面

文章封面显示在列表页和文章详情页顶部，支持三种配置方式：

方式一：直接上传

点击图片上传区域，从本地选择图片文件。

方式二：在线图片

在输入框中粘贴在线图片的 URL 地址。

方式三：封面制作器

点击「制作封面」按钮打开封面制作器界面。

封面制作器功能：

图片来源：

图片搜索：在搜索框输入关键词，实时从选定图源搜索相关图片。

自定义文字元素：

所有文字元素都支持拖拽调整位置，拖拽时显示对齐辅助线。

样式调整：遮罩层浓度：0-100% 调节，影响图片上文字的清晰度

导出选项：

技术规格：

• 输出尺寸：1920 x 1080 像素（16:9 比例）
• 输出格式：PNG
• 图片质量：95%
• 使用字体：SlidefontKBK

5.4 发布属性

5.5 发布时间

注意：发布时间和更新时间仅在编辑已有文章时显示，新建文章无需填写。

5.6 保存

自动保存机制

编辑器具有智能自动保存功能：

发布状态

发布状态仅有草稿和已发布，保存时根据「是否发布」开关的状态决定文章的发布属性。