目录

1. 基础 Markdown 能力
2. 列表、任务与脚注
3. 表格与代码高亮
4. GitHub 风格提示块
5. KaTeX 公式
6. Mermaid 图示
7. Duckquill Shortcodes
8. HTML 扩展能力
9. 按钮与快捷跳转
10. 页面级 Front Matter 功能演示
11. Backlinks 反向链接演示

这篇文章现在是本站的演示博客，用来集中展示我当前博客支持的富文本与扩展格式。

基础 Markdown 能力

文本样式：加粗、斜体、删除线、行内代码、以及组合样式 都可以叠加。

• 内部链接： 首页
• 外部链接： Zola 文档
• Emoji：😭😂🥺🤣❤️✨🙏😍🥰😊

这是一段引用。

下面是一段嵌套引用：

Duckquill 很适合做结构清晰的技术博客。

列表、任务与脚注

• 普通列表项 A
• 普通列表项 B
  • 子项 B.1
  • 子项 B.2
• 普通列表项 C

1. 先写内容
2. 再本地预览
3. 最后发布

• 任务 1：开启常用 Markdown 扩展
• 任务 2：支持 Mermaid
• 任务 3：改造为演示博客
• 任务 4：继续补充更多实战案例

脚注示例¹ 和链接脚注²。

定义列表（Definition List）示例：

Mermaid

用文本描述图结构，再自动渲染成 SVG。

KaTeX

用于高性能渲染 LaTeX 数学公式。

Duckquill Shortcodes

主题级能力扩展，例如 alert、image、video、youtube。

表格与代码高亮

fn main() {
    println!("Duckquill demo blog");
}

1[extra]
2show_copy_button = true
3show_reading_time = true
4show_share_button = true

GitHub 风格提示块

这是一条 NOTE：用于补充背景信息。

这是一条 TIP：用于提供实用建议。

这是一条 IMPORTANT：用于强调关键步骤。

这是一条 WARNING：用于提醒潜在问题。

这是一条 CAUTION：用于说明风险行为。

KaTeX 公式

行内公式：$E = mc^2$。

块级公式：

$$ f(x) = \int_{-\infty}^{\infty}\hat{f}(\xi)e^{2\pi i\xi x},d\xi $$

Mermaid 图示

下面这段 mermaid 代码块会被自动渲染为流程图：

flowchart LR
    A[写作] --> B[Git 提交]
    B --> C[Zola 构建]
    C --> D[静态部署]
    D --> E[访问页面]

再来一个时序图示例：

sequenceDiagram
    participant U as User
    participant G as Git Repo
    participant Z as Zola
    U->>G: push content
    G-->>Z: trigger build
    Z-->>U: generated public site

Duckquill Shortcodes

短代码 alert（与 GitHub alerts 不同，这是主题 shortcode）：

这是 note 类型的 shortcode 提示。

这是 tip 类型的 shortcode 提示。

这是 important 类型的 shortcode 提示。

这是 warning 类型的 shortcode 提示。

这是 caution 类型的 shortcode 提示。

图片 shortcode（基础用法）：

图片 shortcode（更多变量）：

这段文本用于演示 start 浮动图片效果，图片会贴在段落起始侧。

这一段用于演示 end 浮动图片效果，图片会贴在段落末尾侧。

视频 shortcode（基础与自动播放示例）：

YouTube / Vimeo / Mastodon shortcode：

• YouTube 示例链接
• Vimeo 示例链接
• Mastodon 示例链接

（注：为避免第三方播放器脚本造成控制台噪音，这里改为链接演示。）

CRT shortcode：

user@duckquill-demo:~$ zola check
Checking site...
-> Site content: OK

HTML 扩展能力

常见行内标签也可直接使用：

• ASCII
• Ctrl + K
• 重点高亮文本
• 这是一段 spoiler 文本
• 这是一段 solid spoiler 文本
• 旧方案 新方案
• 这是一段行内引用
• demo-output.log: all checks passed
• 这一段文本使用了下划线标注

这是一个 <small> 侧注文本示例。

表单与交互控件示例：

•  Enable Mermaid
•  Enable KaTeX
•  Enable Backlinks
•  Dark
•  Light

Accent color:

Content density:

图文组合（figure + figcaption）：

进度条示例（由页面脚本联动 range 输入）：

按钮与快捷跳转

页面级 Front Matter 功能演示

本页除了 featured = true，还演示了这些页面级能力：

• banner = "banner-feature.png"：文章头图与列表缩略图。
• accent_color / accent_color_dark：页面级强调色覆盖。
• styles = ["css/feature-demo-blog.css"] 与 scripts = ["js/feature-demo-blog.js"]：页面级样式和脚本。
• emoji_favicon = "🧪"：标签页图标使用 emoji。

这里集中展示页面级配置能力，便于对照检查渲染行为。

Backlinks 反向链接演示

我已经在 about 页面加入了指向本文的链接。

如果当前页面右侧按钮里出现 Backlinks 项，说明站内反向链接索引正常生效。

如果你能看到上面的所有模块都正常渲染，说明当前博客的富文本能力已经可以覆盖常见写作场景。