<!--markdown-->
> 这是一篇“活”的演示文章：Dusk 后台编辑器的每个按钮，都在下面实际用了一次。每个小节先标注对应的工具栏按钮，紧接着就是插入后的真实渲染结果。你可以直接在页面上看到标题、列表、代码、表格、图片、视频、音乐和表情的最终效果。

## 演示索引

| 分组 | 按钮 | 本文位置 |
| :-- | :-- | :-- |
| 基础格式 | 标题 H1–H6 | 第 01 节 |
| 基础格式 | 粗体 / 斜体 / 删除线 | 第 02 节 |
| 基础格式 | 行内代码 | 第 03 节 |
| 段落结构 | 引用 | 第 04 节 |
| 段落结构 | 无序列表 / 有序列表 | 第 05 节 |
| 段落结构 | 缩进 | 第 06 节 |
| 段落结构 | 分割线 | 第 07 节 |
| 插入内容 | 链接 | 第 08 节 |
| 插入内容 | 图片 | 第 09 节 |
| 插入内容 | 视频 | 第 10 节 |
| 插入内容 | 音乐 | 第 11 节 |
| 插入内容 | 表格 | 第 12 节 |
| 插入内容 | 代码块 | 第 13 节 |
| 插入内容 | 表情 | 第 14 节 |
| 编辑操作 | 撤销 / 重做 | 第 15 节 |
| 编辑操作 | 全屏写作 | 第 16 节 |
| 编辑操作 | 下载 Markdown | 第 17 节 |
| 编辑操作 | 实时预览 | 第 18 节 |

## 01 标题（H1–H6）

**工具栏按钮：** 标题。选择级别后插入对应 Markdown 标记。下面六级标题全部是实际渲染结果：

# H1 一级标题

## H2 二级标题

### H3 三级标题

#### H4 四级标题

##### H5 五级标题

###### H6 六级标题

长文建议用 H2 分章、H3 分节；H1 留给文章标题本身，正文里偶尔用来强调大段落即可。

## 02 粗体、斜体、删除线

**工具栏按钮：** 粗体、斜体、删除线。三种格式可以单独使用，也可以叠加：

- **粗体：** 用来强调结论和关键词。
- *斜体：* 用来标记书名、英文术语或语气停顿。
- ~~删除线：~~ 用来保留修改痕迹，读者仍能看到原文。
- ***粗体加斜体：*** 适合需要最强强调的短句。

## 03 行内代码

**工具栏按钮：** 行内代码。适合命令、文件名、常量和短表达式。下面这些都在正文中直接渲染为代码样式：

运行 `php tests/unit.php` 可以执行单元测试；主题版本常量是 `DUSK_VERSION`；样式文件位于 `assets/css/editorial.css`。

## 04 引用

**工具栏按钮：** 引用。插入后会得到带左侧竖线的引用块：

> 好的排版不会抢走注意力，它只是让阅读更顺畅。
>
> 引用块适合放摘要、他人观点，或一段需要单独强调的话。

## 05 无序列表与有序列表

**工具栏按钮：** 无序列表、有序列表。两种列表都在下面实际插入：

- 无序列表第一项：并列的信息
- 无序列表第二项：每项长度尽量接近
- 无序列表第三项：可以包含 **行内格式** 和 `代码`

1. 有序列表第一步：打开后台「撰写文章」
2. 有序列表第二步：在工具栏选择需要的格式
3. 有序列表第三步：点击「发布」查看文章效果

## 06 缩进

**工具栏按钮：** 缩进。每次缩进两个空格，列表每嵌套一层需要按两次。下面三级嵌套是实际渲染结果：

- 一级列表
    - 二级列表（缩进两次）
        - 三级列表（缩进四次）

## 07 分割线

**工具栏按钮：** 分割线。用于长文分节。下面这条线就是插入后的效果：

---

分割线之后，文章进入新的段落。

## 08 链接

**工具栏按钮：** 链接。填写显示文字和地址后插入。下面链接可以点击：

[暮秋 Dusk 主题首页](https://senls.cn/) 和 [开源仓库](https://gitea.com/xkd/Dusk) 都使用同一个链接按钮插入。

## 09 图片

**工具栏按钮：** 图片。上传或填写图片地址后插入。主题会自动生成缩略图、懒加载，并支持点击放大：

![暮秋 Dusk 首页截图](/usr/uploads/2026/11/dusk-theme-home.jpg)

## 10 视频

**工具栏按钮：** 视频。选择本地视频或填写地址，面板里可以设置循环、封面和显示尺寸。下面是实际插入的播放器：

[video src="/usr/uploads/2026/11/dusk-editor-demo-video.mp4" loop="default" poster="" height="" width=""]

## 11 音乐

**工具栏按钮：** 音乐。支持本地音频和音源地址，显示名称留空时自动使用文件名。下面播放器可以点击播放：

[audio src="/usr/uploads/2026/11/dusk-editor-demo-audio.mp3" loop="default" name="Dusk 编辑器演示音频"]

## 12 表格

**工具栏按钮：** 表格。选择行列数后生成 Markdown 表格，发布后渲染为下面的样式：

| 功能 | 插入方式 | 适用场景 |
| :-- | :--: | --: |
| 表格 | 指定行数与列数 | 参数对比、清单 |
| 代码块 | 选择语言后填写代码 | 教程与示例 |
| 分割线 | 单键插入 | 长文分节 |

## 13 代码块

**工具栏按钮：** 代码块。选择语言后粘贴代码。代码块里的短代码会保持原文，不会被解析成播放器：

```javascript
// 代码块中的短代码保持原样
const shortcode = '[video src="/usr/uploads/2026/11/dusk-editor-demo-video.mp4"]';
const version = '0.15.23';
console.log(version, shortcode);
```

## 14 表情

**工具栏按钮：** 表情。Dusk 内置「泡泡」与「阿鲁」两组共 131 个表情，下面三个是实际插入结果：

::(哈哈) ::(太开心) 这里还有一个 :@(高兴)

如果表情没有显示，请确认后台「启用表情」保持开启。

## 15 撤销与重做

**工具栏按钮：** 撤销、重做。编辑器会记录输入历史，快捷键分别是 Ctrl/⌘+Z 与 Ctrl/⌘+Shift+Z。下面的表格展示一次撤销和重做的结果：

| 操作 | 编辑区内容 |
| :-- | :-- |
| 初始输入 | Dusk 让写作更专注 |
| 撤销一次 | Dusk 让写作更 |
| 重做一次 | Dusk 让写作更专注 |

## 16 全屏写作

**工具栏按钮：** 全屏。点击后收起后台侧栏，把编辑区铺满窗口；再次点击退出。下面是一个可点击的全屏演示，用来展示同样的浏览器全屏效果：

<div class="editor-demo-box" style="border:1px solid #ccd3da;border-radius:10px;padding:18px;background:#f7f9fb;color:#1b2a36">
<p style="margin:0 0 12px"><strong>全屏演示区</strong>：点击按钮让这个区域进入浏览器全屏，按 Esc 退出。</p>
<button type="button" onclick="var el=this.closest('.editor-demo-box'); if (document.fullscreenElement) { document.exitFullscreen(); } else if (el.requestFullscreen) { el.requestFullscreen(); }" style="min-height:40px;padding:0 16px;border:0;border-radius:8px;background:#287b9b;color:#fff;font:inherit;cursor:pointer">进入全屏 / 退出全屏</button>
</div>

## 17 下载 Markdown

**工具栏按钮：** 下载 Markdown。点击后会把当前编辑内容导出为与文章标题同名的 `.md` 文件。下面链接就是本文的 Markdown 源文件，点击即可下载：

[下载本文 Markdown 源文件](/usr/uploads/2026/11/dusk-editor-tour.md)

下载后可以直接用其他 Markdown 编辑器打开，也可以导入到新的 Dusk 站点。

## 18 实时预览

**工具栏按钮：** 实时预览。编辑时右侧预览面板会随输入更新，也可以拖动中缝调整宽度。下面用左右对照展示「源文本」与「发布后的效果」：

| Markdown 源文本 | 发布后效果 |
| :-- | :-- |
| `**加粗文字**` | **加粗文字** |
| `*斜体文字*` | *斜体文字* |
| `` `inline code` `` | `inline code` |
| `[链接](https://senls.cn/)` | [链接](https://senls.cn/) |
| `> 引用内容` | > 引用内容 |

## 21 项功能对照

| 分组 | 工具栏按钮 | 本文演示 |
| :-- | :-- | :-- |
| 基础 | 标题 | 第 01 节 H1–H6 |
| 基础 | 粗体 | 第 02 节 |
| 基础 | 斜体 | 第 02 节 |
| 基础 | 删除线 | 第 02 节 |
| 基础 | 行内代码 | 第 03 节 |
| 基础 | 代码块 | 第 13 节 |
| 结构 | 引用 | 第 04 节 |
| 结构 | 有序列表 | 第 05 节 |
| 结构 | 无序列表 | 第 05 节 |
| 结构 | 缩进 | 第 06 节 |
| 结构 | 分割线 | 第 07 节 |
| 插入 | 链接 | 第 08 节 |
| 插入 | 图片 | 第 09 节 |
| 插入 | 表格 | 第 12 节 |
| 插入 | 表情 | 第 14 节 |
| 插入 | 音乐 | 第 11 节 |
| 插入 | 视频 | 第 10 节 |
| 操作 | 撤销 | 第 15 节 |
| 操作 | 重做 | 第 15 节 |
| 操作 | 下载 | 第 17 节 |
| 操作 | 全屏 | 第 16 节 |

以上内容由 Dusk 编辑器撰写并发布，演示环境版本 0.15.23。工具栏图标和位置可能随版本微调，以你后台实际显示为准。