技术 on Lumoes Blog https://blog.646474.xyz/categories/%E6%8A%80%E6%9C%AF/ Recent content in 技术 on Lumoes Blog Lumoes Blog https://blog.646474.xyz/images/og-cover.png https://blog.646474.xyz/images/og-cover.png Hugo zh-cn Tue, 06 Oct 2026 20:00:00 +0800 PaperMod 语法速查（示例文章） https://blog.646474.xyz/posts/syntax-demo/ Tue, 06 Oct 2026 20:00:00 +0800 https://blog.646474.xyz/posts/syntax-demo/ 这篇示例演示 Hugo + PaperMod 支持的全部写作语法，可作为迁移时的对照参考。 这是一篇语法速查示例，演示 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="https://blog.646474.xyz/media/demo.mp4" >}}      本地视频
{{< audio src="https://blog.646474.xyz/media/demo.mp3" >}}      本地音频

十一、原始 HTML

需要写复杂 HTML（如 iframe 嵌入）时用 rawhtml 短代码：

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

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

]]>