这是一篇语法速查示例,演示 Hugo + PaperMod 支持的全部写作语法。 迁移旧文章时,可以对照本文把 AnZhiYu 的标签替换成这里的写法。

一、基础 Markdown

普通段落、加粗、斜体、删除线、行内代码、链接。

  • 无序列表
  • 第二项
    • 嵌套项
  1. 有序列表
  2. 第二项
  • 已完成的任务
  • 未完成的任务

这是引用块,适合放金句或重要观点。

支持多段引用。

二、表格

功能AnZhiYu 写法PaperMod 写法
提示框{% note info %}<div class="note info">
折叠{% folding %}{{< collapse >}}
流程图{% mermaid %}```mermaid 代码块
数学公式{% katex %}$公式$ 或 $$公式$$

三、代码块

def greet(name: str) -> str:
    """代码块会自动高亮,并带复制按钮"""
    return f"Hello, {name}!"
hugo new content posts/我的新文章.md   # 新建文章
hugo server -D                        # 本地预览(含草稿)
hugo                                  # 构建静态文件到 public/

四、提示框(用 note 短代码,内容支持 Markdown)

这是信息提示框(info)。内部支持 加粗、行内代码、链接、列表等全部 Markdown 语法。
这是成功提示框(success)
这是警告提示框(warning)
这是危险提示框(danger)
带标题的提示框:第二个参数就是标题。Markdown 依然生效。
为什么不用 HTML 写法?(点击了解)

直接写 <div class="note info">…</div> 时,块级 HTML 内部的 Markdown 不会被解析 (这是 CommonMark 规范的行为),**加粗** 会原样显示成星号。

所以本站提供 note 短代码:内容会先经过 Markdown 渲染再填入提示框。 如需用 HTML 写法,标签与内容之间必须留空行:

<div class="note info">

**加粗**会被解析

</div>

五、高亮与两栏对比

行内高亮:重点内容、正确做法、补充信息

两栏对比(并排显示,适合替代 AnZhiYu 的 tabs):

方案 A:Hexo + AnZhiYu

标签丰富、生态成熟、上手快。适合喜欢现成组件、愿意维护插件依赖的场景。

方案 B:Hugo + PaperMod

构建极快(毫秒级)、零依赖、配置简单。适合专注内容创作、追求长期可维护性。

六、折叠内容

点击展开 / 收起

这里是被折叠的内容,适合放补充说明、长代码、参考资料。

  • 列表也可以
  • 支持任意 Markdown

七、数学公式(KaTeX)

行内公式:质能方程 E = mc^2,欧拉恒等式 e^{i\pi} + 1 = 0。

独立公式:

\int_{-\infty}^{+\infty} e^{-x^2} \, dx = \sqrt{\pi}

矩阵(多行公式 —— 用 math 短代码包裹,避免 Markdown 误判):

\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}

矩阵(单行公式 —— 直接写 $$...$$ 即可,内容写在同一行):

\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}

八、Mermaid 流程图

直接写 ```mermaid 代码块即可(本模板已自动转换,不需要记短代码):

flowchart TD
    A[Hexo + AnZhiYu] --> B{是否长期创作?}
    B -->|是| C[迁移到 Hugo + PaperMod]
    B -->|否| D[保持现状]
    C --> E[转换 front matter]
    E --> F[替换标签语法]
    F --> G[完成迁移]

时序图也支持:

sequenceDiagram
    participant 作者
    participant Hugo
    participant 浏览器
    作者->>Hugo: 写 Markdown
    Hugo->>Hugo: 构建(毫秒级)
    Hugo->>浏览器: 输出静态 HTML
    浏览器-->>作者: 极快的访问体验

九、图片

普通 Markdown 写法(PaperMod 会自动生成图注):

示例图片说明

更精细的控制用 figure 短代码:

图片说明文字,会显示在图下方
图片标题

图片说明文字,会显示在图下方

十、视频与音频

{{< youtube VIDEO_ID >}}                 YouTube 视频
{{< vimeo VIDEO_ID >}}                   Vimeo 视频
{{< video src="/media/demo.mp4" >}}      本地视频
{{< audio src="/media/demo.mp3" >}}      本地音频

十一、原始 HTML

需要写复杂 HTML(如 iframe 嵌入)时用 rawhtml 短代码:

{{< rawhtml >}}
<div class="my-widget">任意 HTML</div>
{{< /rawhtml >}}

以上就是全部可用语法。日常写作里最常用的组合是:提示框 + 代码块 + 数学公式 + Mermaid。