你好，世界！

猫猫 included in 文档

2024-07-11 2026-07-12 About 2000 words 4 minutes

Contents

博客从 Docusaurus 迁移到 Hugo。

这篇文章会整理将博客所有特性，作为一个画廊。

博客最开始使用 Hexo，但由于主题逐渐年久失修，准备换一个博客框架，最好能方便自定义。由于想统一技术栈和眼馋 MDX 的导入导出，首先换了 Docusaurus。

刚迁移好，就发现构建页面居然要跑 60+ 秒，还有那巨大的 node_modules 越看越不顺眼，干脆放弃使用 node 了。于是选择了 Hugo，经过编译的程序确实快，自定义也方便，除了模板语法看着有点丑陋。

Markdown 扩展

标题锚点

可在标题后增加花括号指定标题 id。

脚注

脚注使你可以添加注释和参考¹

代码块

可使用以下属性：

title: 标题
hl_lines: 高亮行
linenostart: 开始行号
.no-header: 无头样式
.data-open: 强制展开或折叠代码块

test.ts
 99
100
101
102
103
104
function sort1(a: number, b: number):boolean {
  return a < b
}
function sort2(a: number, b: number):boolean {
  return a > b
}

JsonViewer

FileTree

src
- index.ts
- app.ts
package.json

Mermaid

Diagram Code

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool labelclassDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool labelclassDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

GoAT

ECharts

时间线

支持自定义风格
2024-07-19 20:30
支持自定义颜色
2024-07-19 20:30
支持自定义尺寸
2024-07-19 20:30
默认样式的节点
2024-07-20 20:30

警示

Note

突出显示用户应考虑的信息，与 GitHub、Obsidian 和 Typora 兼容。

Tip

类型可选：

NOTE: 笔记
TIP: 提示
IMPORTANT: 重要
WARNING: 警告
CAUTION: 错误

Important

用户成功所需的关键信息。

Warning

由于存在潜在风险，需要用户立即关注的关键内容。

Caution

操作的潜在负面后果。

扩展

笔记

增加标题形成 Admonition 警示块。

可以折叠

可在 [] 后方增加 + \ - 控制警示块折叠。

多种样式

关键字	样式
NOTE	笔记
TIP	提示
EXAMPLE	样例
ABSTRACT	摘要
TODO	待办
SUCCESS	成功
IMPORTANT	重要
QUESTION	问题
WARNING	警告
BUG	BUG
ERROR	错误
FAILURE	失败
QUOTE	引用

摘要

待办

成功

重要

问题

警告

BUG

错误

失败

引用

待办

未完成
已完成
进行中
已取消
已计划
已重新计划
重要
问题

文字样式

下划线
标记
Primary
Secondary
Success
Info
Warning
Danger
下标：H₂O
上标：2¹⁰ = 1024
emoji： 😺 官方文档

LaTeX

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

块公式：

e^{i\theta} = \cos(\theta) + i\sin(\theta)

注音

佐天泪子掀裙狂魔

分数

^亮色/_暗色

⁹⁰/₁₀₀

FontIcon

图标在此处搜索：fontawesome

Shortcode

图表

图1.1 作者头像

画廊

作者头像

二维码

音乐

打字机

官方文档 ↩︎