前言#Shortcodes 翻译为: 短代码或者简码
虽然 Markdown 的内容格式简单，但有时会达不到创作者的要求。通常，内容作者被迫将原始 HTML 添加到 Markdown 内容中。Hugo 认为这与 Markdown 语法的简单性相矛盾。
Hugo 创造了短代码（shortcodes）来规避这些限制。
短代码是内容文件中的简单片段，Hugo 将使用预定义的模板呈现该片段。
请注意，短代码在模板文件中不起作用。如果需要短代码提供的插入功能类型，但在模板中，那很可能需要一个部分模板。除了更简洁的Markdown之外，短代码可以随时更新以反映新的类、技术或标准。在网站生成时，Hugo短代码将轻松合并更改。避免可能复杂的搜索和替换操作。
为防止 shortcodes 语法被博客产生短代码, 可在添加/*和*/来转义，要紧贴尖括号。
显示原始短代码：{{< shortcode >}}
语法#参考阅读链接内置shortcode自定义shortcode搜集的Shortcode代码分享#Admonition 折叠框#Shortcode：Admonition折叠框日期: 2025-02-19
标签：
#Shortcode 基于Shortcode移植Admonition折叠框......文章内链#Shortcode：文章内链日期: 2025-02-19
标签：
#Shortcode 基于Shortcode实现文章内链......MindMap#Shortcode：MindMap日期: 2025-03-05
标签：
#markmap
#mindmap
#Shortcode 基于markmap实现MindMap支持。......Github 源卡片#只需要把 repo 的 id 放入即可，会自动去组装卡片。使用语法：
1
{{< github title="hiyouga/LLaMA-Factory" >}}
预览效果：
具体添加步骤新建 layouts/shortcodes/github.html，输入以下内容：
1
2
3
4
5
6
7
8
9
{{ $title := .Get "title" }}
Collapse 可折叠文本#主题自带，使用语法：
1
2
3
4
5
6
{{< collapse summary="标题" >}}
1. xx
2. xxx
{{< /collapse >}}
预览效果：
标题xxxxx
Bilibili 视频#填入 https://www.bilibili.com/video/BV1mE411y78w 后的 ID -> BV1mE411y78w ,使用语法：
1
{{< bilibili "BV1mE411y78w" >}}
预览效果：
具体添加步骤新建 layouts/shortcodes/bilibili.html，输入以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
src="https://player.bilibili.com/player.html?bvid={{.Get 0 }}&page={{ if .Get 1 }}{{.Get 1}}{{ else }}1&high_quality=1&danmaku=0&as_wide=0{{end}}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
Figure 显示#主题自带，使用方法：
1
2
# 支持的参数有 `src`、`title`、`caption`、`link`、`target`、`rel`、`width`、`height` 等
{{< figure src="https://69A69.github.io/picx-images-hosting/20250313/hly.7egxg4pqnu.webp" title="绘梨衣" caption="Sakura & 绘梨衣 の Rilakkuma" >}}
预览效果：
绘梨衣Sakura & 绘梨衣 の Rilakkuma
Figure属性说明属性描述值src指定图片的路径或 URLtitle设置图片的标题caption设置图片的说明文字link图片成为超链接，点击后跳转到指定地址target控制点击图片后的跳转方式_blank：在新标签页打开链接rel定义 a 标签的 rel 属性，影响 SEO 和链接行为nofollow：告诉搜索引擎不要跟踪该链接；noopener：防止新窗口的 tabnabbing 攻击（推荐 _blank 时使用）；noreferrer：阻止 HTTP 头 Referer 信息的发送width设置图片的宽度单位可以是 px、%、emheight设置图片的高度align设置图片的对齐方式left / center / rightrtl or ltr 右左方向文本#主题自带，使用语法：
1
2
{{< ltr >}}从左到右的内容{{< /ltr >}}
{{< rtl >}}从右到左的内容{{< /rtl >}}
预览效果：
从左到右的内容从右到左的内容
Timeline#只需要把 repo 的 id 放入即可，会自动去组装卡片。使用语法：
1
{{< github title="hiyouga/LLaMA-Factory" >}}
预览效果：
2022.05.06标签标题事件描述内容时间线
多图展示
具体添加步骤新建 layouts/shortcodes/timeline.html，输入以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{{- $date := .Get "date" -}} {{- $title := .Get "title" -}} {{- $description := .Get "description" -}} {{- $tags := .Get "tags" -}}{{- $url := .Get "url" -}}
任务列表#使用语法：
1
2
3
4
5
6
{{< tasklist status="uncompleted" description="未完成" >}}
{{< tasklist status="completed" description="已完成" >}}
{{< tasklist status="underWay" description="进行中" >}}
{{< tasklist status="cancelled" description="已取消" >}}
{{< tasklist status="havePlaned" description="已计划" >}}
{{< tasklist status="haveBeenReplanned" description="已重新计划" >}}
预览效果：
🔲未完成✔️已完成🟩进行中❌已取消⌛已计划〰️已重新计划
具体添加步骤新建 layouts/shortcodes/tasklist.html，添加如下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
- 参数缺失，请确保传递正确的 status 和 description。
{{ $status := .Get "status" }}
{{ $description := .Get "description" }}
{{ if or (not $status) (not $description) }}
{{ else }}
{{ end }}
Shortcodes参考链接hugo_shortcodesHugo 多图排版hugo-shortcodespapermod-themt-shortcode