一、先说结论:工作量评估
| 项目 | 说明 |
|---|---|
| 文章正文 | 需要替换标签语法(见第二、三节),每篇约 5~15 分钟 |
| front matter | 需要调整字段(见第五节),可脚本批量处理 |
| 图片 | 从 source/img/ 移到 static/images/,路径前缀从 /img/ 改为 /images/ |
| 特有功能 | 即刻短文、音乐播放器、首页轮播、AI 摘要、置顶卡片 PaperMod 都没有,需要自行实现或放弃 |
| 评论系统 | 需要重新接入(PaperMod 预留了 layouts/_partials/comments.html) |
建议:先迁移 3~5 篇代表性文章,跑通流程后再批量处理。
二、新博客不能用的语法(AnZhiYu / Hexo 专有)
以下标签在 Hugo + PaperMod 中不存在,写上去会原样显示成文本(或报错),必须替换:
2.1 Hexo tag 插件(AnZhiYu 全部标签)
| AnZhiYu 标签 | 能否使用 | 替代方案 |
|---|---|---|
{% note info %} {% endnote %} | ❌ | {{< note info >}}…{{< /note >}}(短代码,内容支持 Markdown) |
{% label 文字 red %} | ❌ | <mark class="hl red">文字</mark>(本项目已内置样式) |
{% mermaid %} {% endmermaid %} | ❌ | ```mermaid 代码块(本项目已配置好) |
{% katex %} / {% mathjax %} | ❌ | $$公式$$(单行)或 {{< math >}}…{{< /math >}}(多行) |
{% tabs %} / {% endtabs %} | ❌ | <div class="columns">…</div>(静态两栏,本项目已内置)或删除 |
{% checkbox %} | ❌ | Markdown 任务列表 - [x] 已完成 |
{% timeline %} | ❌ | 有序列表,或自建样式 |
{% folding %} | ❌ | {{< collapse "标题" >}}内容{{< /collapse >}} |
{% links %} | ❌ | Markdown 列表 + 链接 |
{% btn %} / {% btns %} / {% cell %} | ❌ | Markdown 链接或 <a class="..."> |
{% tip %} | ❌ | <div class="note primary">…</div> |
{% span %} / {% u %} / {% emp %} / {% wavy %} / {% del %} / {% kbd %} / {% psw %} | ❌ | 原生 HTML:<u> <em> <del> <kbd> |
{% gallery %} | ❌ | 多张 {{< figure >}} 或用 Markdown 图片 |
{% hide %} | ❌ | {{< collapse >}} |
{% image %} / {% inlineImg %} | ❌ | {{< figure >}} / Markdown ![]() |
{% bilibili %} / {% media %} / {% dogeplayer %} | ❌ | {{< rawhtml >}}<iframe>…{{< /rawhtml >}} |
{% site %} / {% flink %} / {% iconfont %} / {% Introduction-card %} | ❌ | 手写 HTML 或用 rawhtml |
2.2 其它 Hexo / AnZhiYu 专有写法
| 写法 | 说明 |
|---|---|
<div class="video-container">…</div> + 配套 <style> | AnZhiYu 的视频自适应写法 → 改用 {{< youtube ID >}} 或 {{< video src="…" >}} |
<!-- more --> | Hugo 用 ` |
(无空格),或在 front matter 写 summary:| |{% raw %}/{% endraw %}| Hugo 用{{< … >}}转义 shortcode | | Hexo 的_drafts/目录 | Hugo 用draft: true标记 | | 即刻短文(essay)系统 | ❌ 无对应,需自行实现(可考虑 Hugo 的独立 section) | | 音乐播放器 / APlayer | ❌ 需自行接入第三方 JS | | 首页轮播图 / 置顶卡片组 | ❌ 无对应,可用 PaperMod 的profileMode 或自建布局 | | AI 摘要(ai:字段) | ❌ 无对应,可改写到description` |
| 站点统计(不蒜子等) | ❌ 需自行接入 |
2.3 不能用的 front matter 字段
swiper_index、top_group_index、cover_fit、cover_day、cover_night、ai、abbrlink、background、aside、highlight_shrink、copyright / copyright_author / copyright_url / copyright_info、aplayer、mathjax、katex、toc_number、toc_style_simple、sticky、top_img
这些字段写在 Hugo 里不会报错(被忽略),但也没有任何效果,建议清理。
三、新博客支持的语法(怎么写)
3.1 基础 Markdown(完全通用)
# 一级标题
## 二级标题
**加粗**、*斜体*、~~删除线~~、`行内代码`、[链接](https://example.com)
- 无序列表
- 第二项
- 嵌套
1. 有序列表
- [x] 已完成任务
- [ ] 未完成任务
| 表头 | 表头 |
|---|---|
| 单元格 | 单元格 |
> 引用块
---
3.2 PaperMod 自带 shortcode
| 语法 | 作用 |
|---|---|
{{< figure src="/images/a.png" title="标题" caption="说明" align="center" >}} | 图片(带图注,比 Markdown 图片更精细) |
{{< inTextImg url="/images/a.png" alt="说明" >}} | 行内小图标 |
{{< collapse "点击展开" >}}内容{{< /collapse >}} | 折叠面板 |
{{< rawhtml >}}<div>任意 HTML</div>{{< /rawhtml >}} | 嵌入原始 HTML |
{{< video src="/media/a.mp4" >}} | 本地视频 |
{{< audio src="/media/a.mp3" >}} | 本地音频 |
{{< ltr >}} / {{< rtl >}} | 强制文字方向 |
3.3 Hugo 内置 shortcode
| 语法 | 作用 |
|---|---|
{{< youtube VIDEO_ID >}} | 嵌入 YouTube(替代 AnZhiYu 的 video-container) |
{{< vimeo VIDEO_ID >}} | 嵌入 Vimeo |
{{< gist 用户名 哈希 >}} | 嵌入 GitHub Gist |
{{< details "标题" >}}内容{{< /details >}} | 折叠(Hugo 原生) |
{{< highlight python "linenos=table" >}}代码{{< /highlight >}} | 带行号的代码块 |
{{< ref "posts/某篇文章.md" >}} | 站内链接(自动处理路径) |
{{< param 参数名 >}} | 读取配置参数 |
3.4 本项目已额外配置好的语法(实测可用)
提示框(对标 AnZhiYu 的 {% note %},用短代码,内容支持 Markdown):
{{< note info >}}
信息提示,支持 **加粗**、`代码`、[链接](url)
{{< /note >}}
{{< note success >}}成功提示{{< /note >}}
{{< note warning >}}警告提示{{< /note >}}
{{< note danger >}}危险提示{{< /note >}}
{{< note primary >}}重点提示{{< /note >}}
{{< note info "自定义标题" >}}
带标题的提示框(第二个参数是标题)
{{< /note >}}
⚠️ 不建议用
<div class="note info">的 HTML 写法:块级 HTML 内部的 Markdown 不会被解析(CommonMark 规范行为),加粗会原样显示成星号。
行内高亮(对标 {% label %}):
<mark class="hl red">红色重点</mark>
<mark class="hl green">绿色</mark>
<mark class="hl blue">蓝色</mark>
<mark class="hl yellow">黄色</mark>
<mark class="hl purple">紫色</mark>
两栏对比(对标 {% tabs %} 的静态替代):
<div class="columns">
<div>
<h4>方案 A</h4>
<p>内容…</p>
</div>
<div>
<h4>方案 B</h4>
<p>内容…</p>
</div>
</div>
数学公式(KaTeX):
行内:$E = mc^2$
单行独立公式(推荐日常使用):
$$E = mc^2$$
多行 / 复杂公式(矩阵、多行推导必须用这个):
{{< math >}}
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
{{< /math >}}
⚠️ 重要:多行公式不要直接写多行
$$——Markdown 解析器会把\end{pmatrix}这类行误判成标题,导致公式破损。多行公式一律用{{< math >}}包裹。
Mermaid 流程图(直接用代码块,无需记短代码):
```mermaid
flowchart TD
A[开始] --> B{判断}
B -->|是| C[结束]
```
时序图、甘特图、类图等所有 Mermaid 图表类型都支持。
3.5 开启数学公式的两种方式
文章 front matter 里任意一种写法都会自动加载 KaTeX:
math: true # 显式开启
或者正文里出现 $$ 也会自动检测开启。
四、推荐的创作语法组合
日常写作最有价值的四件套:
| 场景 | 推荐语法 |
|---|---|
| 强调重要结论 | <div class="note danger">结论</div> |
| 补充说明、可选细节 | {{< collapse "展开查看" >}}…{{< /collapse >}} |
| 流程 / 结构 / 时序 | ```mermaid 代码块 |
| 公式推导 | $$单行$$ 或 {{< math >}}多行{{< /math >}} |
| 图片带说明 | {{< figure src="…" caption="…" >}} |
| 代码 | 普通代码块(自带高亮 + 复制按钮) |
| 对比两种方案 | <div class="columns"> |
五、front matter 迁移对照表
| Hexo (AnZhiYu) | Hugo (PaperMod) | 说明 |
|---|---|---|
title: "标题" | title: "标题" | 相同 |
date: 2026-04-24 19:40:46 | date: 2026-04-24T19:40:46+08:00 | Hugo 两种格式都能解析,但推荐 ISO 8601 |
updated: 2026-08-08 20:40:00 | lastmod: 2026-08-08T20:40:00+08:00 | 字段名不同 |
tags: [a, b] | tags: ["a", "b"] | 相同 |
categories: [[生活, 意识形态]] | categories: ["生活"] | Hugo 不支持多级分类,二级建议改成 tag |
cover: /img/webp/94.webp | cover:image: "/images/webp/94.webp" | 结构不同(对象) |
description: "…" | description: "…" | 相同 |
keywords: [a, b] | keywords: ["a", "b"] | 相同 |
abbrlink: xxx | slug: xxx | 自定义 URL |
top: true | weight: 1(越小越前) | 置顶需自行实现 |
toc: true | ShowToc: true | 字段名不同 |
toc_number: true | UseHugoToc: true | 近似 |
comments: false | comments: false | 相同 |
hide: true | hideSummary: true | 近似 |
mathjax: true / katex: true | math: true | 统一为 math |
swiper_index / top_group_index / ai / background / aside / cover_fit / cover_day / cover_night / copyright_* | ❌ | 无对应,删除即可 |
六、迁移操作步骤
1. 复制文章
# 在 Hexo 项目里(blog-demo/source/_posts/)
cp 某篇文章.md Z:/ugoblog/content/posts/
2. 调整 front matter
updated→lastmodcover: /img/x.webp→cover.image: "/images/x.webp"- 多级 categories 拆成一维
- 删除无对应字段
3. 替换正文标签
| 查找 | 替换为 |
|---|---|
{% note xxx %} … {% endnote %} | {{< note xxx >}} … {{< /note >}} |
{% label 文字 颜色 %} | <mark class="hl 颜色">文字</mark> |
{% mermaid %} … {% endmermaid %} | ```mermaid … ``` |
{% tabs %} … {% endtabs %} | 删除或改 <div class="columns"> |
{% folding 标题 %} … {% endfolding %} | {{< collapse "标题" >}} … {{< /collapse >}} |
<div class="video-container"> 整块 | {{< youtube 视频ID >}} |
4. 迁移图片
# Hexo: blog-demo/source/img/ → Hugo: Z:/ugoblog/static/images/
cp -r blog-demo/source/img/* Z:/ugoblog/static/images/
正文里的 /img/xxx.webp 改成 /images/xxx.webp。
5. 本地预览
cd Z:/ugoblog
hugo server -D # 含草稿预览,浏览器打开 http://localhost:1313
6. 构建发布
hugo --gc --minify # 产物在 public/ 目录
七、常用命令速查
hugo new content posts/我的新文章.md # 新建文章(用 archetypes/default.md 模板)
hugo server -D # 本地预览(含草稿)
hugo server --bind 127.0.0.1 -p 1313 # 指定端口
hugo --gc --minify # 构建(清理缓存 + 压缩)
hugo --gc --minify --buildFuture # 构建含未来日期的文章
hugo list all # 列出所有文章及 URL
hugo config # 查看当前生效的完整配置
⚠️ 注意:front matter 里
date若是未来时间,默认不会构建(buildFuture: false), 表现为「文章明明写了却不出现在页面上」。要么改成过去时间,要么加--buildFuture。
八、关键文件说明
| 文件 / 目录 | 作用 |
|---|---|
hugo.yaml | 站点总配置(已汉化,所有配置项都有中文说明) |
archetypes/default.md | 新建文章的模板(已汉化) |
content/posts/ | 文章目录 |
content/search.md | 搜索页(必须存在,否则搜索功能失效) |
content/archives.md | 归档页 |
assets/css/extended/custom.css | 自定义样式(提示框、高亮、两栏等) |
layouts/_partials/extend_head.html | 注入 KaTeX / Mermaid(PaperMod 官方扩展点) |
layouts/_markup/render-codeblock-mermaid.html | 让 ```mermaid 输出为图表容器 |
layouts/_markup/render-passthrough.html | 数学公式原样输出(避免被转义) |
layouts/_shortcodes/math.html | 多行公式 shortcode |
static/images/ | 图片目录(引用路径为 /images/xxx) |
themes/PaperMod/ | 主题本体(升级:cd themes/PaperMod && git pull) |
九、迁移后的功能对照
| 原 AnZhiYu 功能 | PaperMod 状态 |
|---|---|
| 文章 + 标签 + 分类 | ✅ 原生支持 |
| 归档页 | ✅ 原生(content/archives.md) |
| 站内搜索 | ✅ 原生(Fuse.js,已配置) |
| 暗色模式 | ✅ 原生(跟随系统 + 手动切换) |
| 目录 TOC | ✅ 原生 |
| 代码高亮 + 复制 | ✅ 原生 |
| 阅读时间 / 字数 | ✅ 原生 |
| 分享按钮 | ✅ 原生 |
| 数学公式 | ✅ 已配置(KaTeX) |
| Mermaid 流程图 | ✅ 已配置 |
| 提示框 / 高亮 / 两栏 | ✅ 已用自定义 CSS 补齐 |
| 评论 | ⚠️ 需自行接入(Twikoo / Giscus / Waline) |
| 即刻短文 | ❌ 无对应 |
| 音乐播放器 | ❌ 无对应 |
| 首页轮播 / 置顶卡片 | ❌ 无对应 |
| AI 摘要 | ❌ 无对应 |
| 封面图 | ✅ 支持(cover.image),但无「跟随主题色」等效果 |