Hugo Shortcodes 语法手册

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

1、最简用法
{{< admonition >}}普通说明{{< /admonition >}}

2、自定义标题与展开状态
{{< admonition type=tip title="[AriaNote](https://arianote.top)" open=false >}}文本{{< /admonition >}}

3、常用类型
{{< admonition type=note >}}普通说明{{< /admonition >}}
{{< admonition type=tip >}}技巧窍门{{< /admonition >}}
{{< admonition type=warning >}}风险提醒{{< /admonition >}}

4、不常用类型
{{< admonition type=abstract >}}摘要总结{{< /admonition >}}
{{< admonition type=info >}}客观信息提示{{< /admonition >}}
{{< admonition type=todo >}}待办事项{{< /admonition >}}
{{< admonition type=success >}}成功提示{{< /admonition >}}
{{< admonition type=question >}}提问思考{{< /admonition >}}
{{< admonition type=failure >}}失败结果{{< /admonition >}}
{{< admonition type=danger >}}严重错误{{< /admonition >}}
{{< admonition type=bug >}}已知问题{{< /admonition >}}
{{< admonition type=example >}}示例说明{{< /admonition >}}
{{< admonition type=quote >}}引用内容{{< /admonition >}}

 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

1、最简示例：
{{< book id="4882120" />}}
{{< book isbn="9787544248174" />}}

2、ID + 参数覆盖（部分自定义）
{{< book id="4882120" title="自定义标题" author="自定义作者" />}}

3、ID + 自定义内容简介：
{{< book id="4882120" >}}
这是自定义的内容简介，会覆盖 JSON 中的内容。
支持多行和 Markdown 格式。
{{< /book >}}

4、ID + 参数 + 自定义内容简介：
{{< book id="4882120" title="自定义标题" author="自定义作者" >}}
这是完全自定义的内容简介。
{{< /book >}}

5、完全手动输入（无 ID）：
{{< book cover="/books/4882120.jpg" title="金字塔原理"  author="芭芭拉·明托"  publisher="南海出版公司" pubdate="2010年08月"  rating="8.0"  isbn="9787544248174"  link="https://book.douban.com/subject/4882120/" >}}
金字塔的基本结构是：中心思想明确，结论先行，以上统下，归类分组，逻辑递进。先重要后次要，先全局后细节，先结论后原因，先结果后过程。
{{< /book >}}

6、部分手动 + 自定义内容简介：
{{< book title="金字塔原理" author="芭芭拉·明托" rating="8.0" >}}
无 ID 时，没有本地图片路径，就无法显示封面图。
{{< /book >}}

1

{{< center-quote >}}文本{{< /center-quote >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

1、最简折叠说明
{{< details >}}文本{{< /details >}}

2、自定义折叠标题
{{< details summary="展开查看" >}}文本{{< /details >}}

3、默认展开内容
{{< details summary="展开查看" open=true >}}文本{{< /details >}}

4、带样式的补充说明
{{< details summary="更多说明" open=false class="note" >}}文本{{< /details >}}

5、带属性的说明区块 - 命名参数
{{< details summary="更多信息" open=false class="note" name="extra" title="点击展开" >}}文本{{< /details >}}

 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

1、下划线样式 - 标签页位于下方
{{< tabs type="underline" placement="bottom" >}}
{{% tab title="1" %}}文本1{{% /tab %}}
{{% tab title="2" %}}文本2{{% /tab %}}
{{% tab title="3" %}}文本3{{% /tab %}}
{{< /tabs >}}

2、胶囊样式 - 标签页位于右方
{{< tabs type="pill" placement="right" >}}
{{% tab title="1" %}}文本1{{% /tab %}}
{{% tab title="2" %}}文本2{{% /tab %}}
{{% tab title="3" %}}文本3{{% /tab %}}
{{< /tabs >}}

3、卡片样式 - 标签页位于左方
{{< tabs type="card" placement="left" >}}
{{% tab title="1" %}}文本1{{% /tab %}}
{{% tab title="2" %}}文本2{{% /tab %}}
{{% tab title="3" %}}文本3{{% /tab %}}
{{< /tabs >}}

4、分段样式 - 标签页默认位于上方 + 默认选中第二个标签页
{{< tabs type="segment" defaultTab=1 >}}
{{% tab title="1" %}}文本1{{% /tab %}}
{{% tab title="2" %}}文本2{{% /tab %}}
{{% tab title="3" %}}文本3{{% /tab %}}
{{< /tabs >}}

 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

1、最简单时间线 - 正序
{{< timeline >}}
events:

- timestamp: 2024-07-11
  content: 创建成功
- timestamp: 2024-07-13
  content: 通过审核
- timestamp: 2024-07-15
  content: 活动按期开始
  {{< /timeline >}}

2、倒序时间线
{{< timeline reverse=true >}}
events:

- timestamp: 2024-07-11
  content: 创建成功
- timestamp: 2024-07-13
  content: 通过审核
- timestamp: 2024-07-15
  content: 活动按期开始
  {{< /timeline >}}

3、开启动画效果
{{< timeline animation=true >}}
events:

- timestamp: 2024-07-11
  content: 创建成功
- timestamp: 2024-07-13
  content: 通过审核
- timestamp: 2024-07-15
  content: 活动按期开始
  {{< /timeline >}}

4、自定义节点样式
{{< timeline >}}
events:

- timestamp: 2024-07-19 20:30
  content: 支持自定义风格
  type: primary
  node: dot
- timestamp: 2024-07-19 20:30
  content: 支持自定义颜色
  color: "#0CBD87"
- timestamp: 2024-07-19 20:30
  content: 支持自定义尺寸
  size: large
- timestamp: 2024-07-20 20:30
  content: 默认样式的节点
  {{< /timeline >}}

5、使用 data 参数加载数据
{{< timeline data="example" >}}

6、使用 file 参数加载数据
{{< timeline file="data/example.yml" >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

1、最简用法
{{< typeit >}}文本{{< /typeit >}}

2、自定义 HTML 标签
{{< typeit tag=h4 >}}`h4` 标签{{< /typeit >}}

3、代码效果
{{< typeit code=java >}}
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
{{< /typeit >}}

4、分组效果
{{< typeit group=paragraph >}}**第一组**文本{{< /typeit >}}
{{< typeit group=paragraph >}}**第二组**文本{{< /typeit >}}

5、循环效果
{{< typeit loop=true >}}循环段落……{{< /typeit >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

1、最简图片展示
{{< figure src="/favicon-96x96.png" alt="示例" >}}

2、带说明文字
{{< figure src="/favicon-96x96.png" alt="示例" caption="说明" >}}

3、带标题与说明
{{< figure src="/favicon-96x96.png" alt="示例" title="标题" caption="说明" >}}

4、可点击图片
{{< figure src="/favicon-96x96.png" alt="示例" link="https://arianote.top" >}}

5、完整示例
{{< figure src="/favicon-96x96.png" alt="示例" title="图片"  caption="说明" attr="来源" attrlink="https://arianote.top"  class="w-75"  loading="lazy" >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

1、最简图片使用
{{< image src="/favicon-96x96.png" >}}

2、带替代文本
{{< image src="/favicon-96x96.png" alt="示例" >}}

3、带说明文字
{{< image src="/favicon-96x96.png" caption="示例" >}}

4、悬停提示 + 自定义样式
{{< image src="/favicon-96x96.png" alt="示例" caption="带提示的图片" title="提示文本" class="shadow-lg" >}}

5、禁用点击大图
{{< image src="/favicon-96x96.png" caption="不可点击的图片" linked=false >}}

6、完整示例
{{< image src="/favicon-96x96.png" alt="示例" caption="图片说明" title="完整示例" class="w-75" loading="lazy" optimise=true cacheRemote=true >}}

 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

1、最简链接
{{< link "https://arianote.top" >}}

2、邮箱链接
{{< link "mailto:example@qq.com" >}}

3、自定义链接文本
{{< link href="https://arianote.top" content="AriaNote" >}}

4、带提示标题
{{< link href="https://arianote.top" content="AriaNote" title="温故而知新" >}}

5、卡片式链接
{{< link href="https://arianote.top" content="AriaNote" title="我的博客" card=true >}}

6、卡片链接 - 自定义图片图标
{{< link href="https://arianote.top" content="AriaNote" title="我的博客" card=true card-icon="/avatar.webp" >}}

7、卡片链接 - Font Awesome 图标
{{< link href="https://arianote.top" content="AriaNote" title="我的博客" card=true card-icon="fa-solid fa-blog" >}}

8、可下载链接
{{< link href="/avatar.webp" content="avatar.webp" title="下载头像" download="avatar.webp" >}}

9、卡片式下载链接
{{< link href="/avatar.webp" content="头像.webp" title="下载头像" download="avatar.webp" card=true >}}

1
2
3
4
5
6
7
8

1、指向英文页面的绝对永久链接
[Link A]({{< ref path="/example" >}})

2、指向德语页面
[Link C]({{< ref path="/example" lang="de" >}})

3、指向德语页面的 JSON 输出格式
[Link D]({{< ref path="/example" lang="de" outputFormat="json" >}})

1
2
3
4
5
6
7
8

1、指向相对路径的页面链接
[Link B]({{< relref path="/example" >}})

2、相对路径的德语页面
[Link C]({{< relref path="/example" lang="de" >}})

3、相对路径的 JSON 输出格式
[Link D]({{< relref path="/example" lang="de" outputFormat="json" >}})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{{< echarts >}}
{
"xAxis": {
"type": "category",
"data": ["Mon", "Tue", "Wed", "Thu", "Fri"]
},
"yAxis": {
"type": "value"
},
"series": [
{
"type": "line",
"data": [120, 200, 150, 80, 70]
}
]
}
{{< /echarts >}}

1
2
3
4
5
6
7

{{< mermaid >}}
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{< /mermaid >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

1、最简单示例
{{< mapbox lng=113.953277 lat=22.559102 >}}

2、指定缩放级别
{{< mapbox lng=113.953277 lat=22.559102 zoom=11 >}}

3、关闭中心点图钉
{{< mapbox lng=113.953277 lat=22.559102 zoom=11 marked=false >}}

4、自定义地图样式
{{< mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/streets-zh-v1" >}}

5、多标记示例
{{< mapbox lng=113.953277 lat=22.559102 zoom=11 markers="[ {"lng":113.81841,"lat":22.637524,"description":"宝安国际机场"},
{"lng":113.953386,"lat":22.559052,"description":"市中心"},{"lng":114.035746,"lat":22.615667,"description":"深圳北站"} ]" >}}

6、自定义尺寸
{{< mapbox lng=113.953277 lat=22.559102 width=\"100%\" height=\"30rem\" >}}

 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

1、最简单的音频播放器
{{< aplayer autoplay=false >}}
{{< audio name="Demo" artist="示例" url="/music/demo.mp3" cover="/avatar.webp" />}}
{{< /aplayer >}}

2、包含多首音乐的播放列表
{{< aplayer theme="#b7daff" order="list" >}}
{{< audio name="Demo" artist="示例" url="/music/demo.mp3" cover="/avatar.webp" />}}
{{< audio name="Demo" artist="示例" url="/music/demo.mp3" cover="/avatar.webp" />}}
{{< /aplayer >}}

3、内嵌歌词
{{< aplayer lrcType=1 >}}
{{< audio name="Demo" artist="示例" url="/music/demo.mp3" cover="/avatar.webp" />}}
{{< audio name="Demo" artist="示例" url="/music/demo.mp3" cover="/avatar.webp" >}}
[00:00.00]Hello
[00:05.00]FixIt
{{< /audio >}}
{{< /aplayer >}}

4、完整参数
{{< aplayer fixed=false mini=false autoplay=false theme="#b7daff" loop="all" order="list" preload="auto" volume=0.7 mutex=true lrcType=1 listFolded=false listMaxHeight="" storageName="aplayer-setting" >}}
{{< audio name="Demo" artist="示例" url="/music/demo.mp3" cover="/avatar.webp" cover="/avatar.webp" />}}
{{< audio name="Demo" artist="示例" url="/music/demo.mp3" cover="/avatar.webp"  cover="/avatar.webp" >}}
[00:00.00]APlayer audio2
[00:04.01]is
[00:08.02]amazing
{{< /audio >}}
{{< /aplayer >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

1、单 P 视频
{{< bilibili id=BV19S411c7Wu >}}

2、多 P 视频
{{< bilibili id=BV1kt411k7Rq p=3 >}}

3、自动播放并关闭弹幕
{{< bilibili BV19S411c7Wu autoplay=true danmaku=false >}}

4、指定起始时间并静音
{{< bilibili BV19S411c7Wu t=60 muted=true >}}

1

{{< douyin id=7388149561765760266 >}}

1
2
3
4
5
6
7
8

1、本地音乐
{{< music url="/music/demo.mp3" name="Demo" artist="示例" cover="/avatar.webp" >}}

2、音乐平台自动识别
{{< music auto="https://music.163.com/#/playlist?id=60198" >}}

3、自定义音乐平台
{{< music server="netease" type="song" id="1868553" >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

1、艺术家
{{< spotify type=artist id=74ASZWbe4lXaubB36ztrGX >}}

2、专辑
{{< spotify type=album id=1ATL5GLyefJaxhQzSPVrLX >}}

3、曲目
{{< spotify type=track id=6rqhFgbbKwnb9MLmUQDhG6 >}}

4、播放列表
{{< spotify type=playlist id=37i9dQZF1DXcBWIGoYBM5M >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

1、最简用法
{{< vimeo id=55073825 >}}

3、关闭全屏并启用懒加载
{{< vimeo id=55073825 allowFullScreen=false loading=lazy >}}

4、添加自定义样式类
{{< vimeo id=55073825 class="video-frame" >}}

5、设置 iframe 标题
{{< vimeo id=55073825 title="Vimeo 示例视频" >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

1、最简用法
{{< youtube id=0RKpf3rK57I >}}

3、指定起止时间
{{< youtube id=0RKpf3rK57I start=30 end=60 >}}

4、自动播放 - 强制静音
{{< youtube id=0RKpf3rK57I autoplay=true >}}

5、关闭控件并循环播放
{{< youtube id=0RKpf3rK57I controls=false loop=true >}}

6、懒加载并设置标题
{{< youtube id=0RKpf3rK57I loading=lazy title="YouTube 示例视频" >}}

1

{{< bluesky link="https://bsky.app/profile/bsky.app/post/3latotljnec2h" >}}

1

{{< instagram id=CxOWiQNP2MO >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

1、使用自闭合语法
{{< qr text="https://arianote.top" />}}

2、使用标签内容作为文本
{{< qr >}}文本{{< /qr >}}

3、电话号码二维码
{{< qr text="tel:+12065550101" />}}

4、生成 vCard 二维码
{{< qr level="low" scale=2 alt="QR code of vCard for John Smith" >}}
BEGIN:VCARD
VERSION:2.1
N;CHARSET=UTF-8:Smith;John;R.;Dr.;PhD
FN;CHARSET=UTF-8:Dr. John R. Smith, PhD.
ORG;CHARSET=UTF-8:ABC Widgets
TITLE;CHARSET=UTF-8:Vice President Engineering
TEL;TYPE=WORK:+12065550101
EMAIL;TYPE=WORK:jsmith@example.org
END:VCARD
{{< /qr >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

1、基础用法（微信 + 支付宝）
{{< reward wechatpay="/images/wechatpay.gif" alipay="/images/alipay.gif" >}}

2、添加提示文案
{{< reward wechatpay="/images/wechatpay.gif" alipay="/images/alipay.gif"
    comment="给作者买杯卡布奇诺～" >}}

3、指定作者名称
{{< reward wechatpay="/images/wechatpay.gif" author="FixIt 作者" >}}

4、使用固定展示模式
{{< reward wechatpay="/images/wechatpay.gif" alipay="/images/alipay.gif"
    mode="fixed" >}}

1

{{< x user="SanDiegoZoo" id="1453110110599868418" >}}

1
2
3
4
5

仅在生产环境渲染内容
{{< env "production" >}}
This content is only rendered in the production environment.
里面的内容只会在生产环境中渲染。
{{< /env >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

1、部分加密
{{< fixit-encryptor password="1212" message="密码是 1212" >}}这是被加密的部分内容。{{< /fixit-encryptor >}}

2、嵌套加密
{{< fixit-encryptor "1212" >}}
第一层加密内容
{{< fixit-encryptor "1212" >}}
第二层加密内容
{{< /fixit-encryptor >}}
{{< /fixit-encryptor >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

1、使用实际文件系统
{{< file-tree />}}

2、指定路径并展开两层
{{< file-tree path="documentation" level=2 folderSlash=true />}}

3、使用内联数据
{{< file-tree >}}

- name: src
  type: dir
  children:
  - name: index.ts
    type: file
  - name: app.ts
    type: file
- name: package.json
  type: file
  {{< /file-tree >}}

4、从文件加载结构
{{< file-tree file="data/tree.yml" />}}

1
2
3
4
5

{{< highlight python "linenos=table,hl_lines=2 3" >}}
def hello():
print("Hello Hugo!")
print("Bye!")
{{< /highlight >}}

1
2
3
4
5

1、显示整个 gist
{{< gist Lruihao fb8b2d0353465c4d40bf74818db80710 >}}

2、显示 gist 中的某个文件
{{< gist Lruihao fb8b2d0353465c4d40bf74818db80710 example.py >}}

1
2

原始的带有 Markdown 和 HTML 语法的内容：
{{< raw "span" >}}**Hello** <strong>World</strong>{{< /raw >}}

1
2
3

{{< script >}}
console.log('Hello World!');
{{< /script >}}

1
2
3

{{< style "text-align:right; strong{color:#00b1ff;}" >}}
This is a **right-aligned** paragraph.
{{< /style >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

1、新增功能
{{< version 0.3.15 >}}

2、功能更改
{{< version 0.3.15 changed >}}

3、功能删除
{{< version 0.3.15 deleted >}}

4、功能废弃
{{< version 0.3.15 deprecated >}}