Hugo Shortcodes 语法手册

1
2
3

{{< admonition [type] "[title]" [open] >}}
...
{{< /admonition >}}

1
2
3

{{< admonition tip "[AriaNote](https://arianote.top)" true >}}
自定义标题与展开状态
{{< /admonition >}}

1
2
3
4
5
6
7
8

// id 和 isbn 二选一
{{< book id="" />}}
{{< book isbn="" />}}

// 覆盖内容简介
{{< book cover="" title="" author="" publisher="" pubdate="" rating="" isbn="" link="" >}}
...
{{< /book >}}

1
2
3
4
5

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

1
2
3

{{< center-quote >}}
...
{{< /center-quote >}}

1
2
3

{{< center-quote >}}
这是一个 **居中对齐** 的段落。
{{< /center-quote >}}

1
2
3

{{< details [summary] [open] [class] >}}
...
{{< /details >}}

1
2
3

{{< details "展开查看" false >}}
这是一个示例。
{{< /details >}}

1
2
3

{{< raw "[tag]" >}}
...
{{< /raw >}}

1

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

1
2
3
4
5

{{< tabs type="" placement="" defaultTab="" >}}
{{% tab title="" %}}...{{% /tab %}}
{{% tab title="" %}}...{{% /tab %}}
{{% tab title="" %}}...{{% /tab %}}
{{< /tabs >}}

1
2
3
4
5

{{< tabs type="card" placement="left" >}}
{{% tab title="1" %}}文本 1{{% /tab %}}
{{% tab title="2" %}}文本 2{{% /tab %}}
{{% tab title="3" %}}文本 3{{% /tab %}}
{{< /tabs >}}

1
2
3
4
5

{{< timeline reverse= placement= animation= size= node= >}}
events:
  - timestamp:
    content:
{{< /timeline >}}

1
2
3
4
5
6
7
8
9

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

1
2
3

{{< typeit >}}
文本
{{< /typeit >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{{< typeit code=java group=paragraph >}}
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
{{< /typeit >}}
{{< typeit group=paragraph */>}
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*……
{{</* /typeit >}}

1

{{< figure src="" alt="" width="" height="" loading="" class="" link="" target="" rel="" title="" caption="" attr="" attrlink="" >}}

1

{{< figure src="/favicon-96x96.png" alt="示例" link="https://arianote.top" class="w-75" >}}

1

{{< image src="" alt="" caption="" >}}

1

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

1

{{< qr text="" level="" scale= targetDir="" alt="" class="" id="" loading="" title="" >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{{< 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

{{< link href="" content="" title="" card="" card-icon="" >}}

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

// 普通链接
{{< link "https://arianote.top" >}}
{{< link "mailto:example@qq.com" >}}
{{< link "https://arianote.top" AriaNote >}}
{{< link "https://arianote.top" AriaNote "温故而知新" >}}

// 卡片式链接
{{< link "https://arianote.top" "AriaNote" "我的博客" true >}}
{{< link "https://arianote.top" "AriaNote" "我的博客" true "/avatar.webp" >}}
{{< link "https://arianote.top" "AriaNote" "我的博客" true "fa-solid fa-blog" >}}

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

1

{{% ref path="" lang="" outputFormat="" %}}

1
2
3
4

[Link A]({{% ref "/books/book-1" %}})
[Link B]({{% ref path="/books/book-1" %}})
[Link C]({{% ref path="/books/book-1" lang="de" %}})
[Link D]({{% ref path="/books/book-1" lang="de" outputFormat="json" %}})

1

{{% relref path="" lang="" outputFormat="" %}}

1
2
3
4

[Link A]({{% relref "/books/book-1" %}})
[Link B]({{% relref path="/books/book-1" %}})
[Link C]({{% relref path="/books/book-1" lang="de" %}})
[Link D]({{% relref path="/books/book-1" lang="de" outputFormat="json" %}})

1

{{< bluesky link="" >}}

1

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

1

{{< instagram [id] >}}

1

{{< instagram CxOWiQNP2MO >}}

1

{{< reward wechatpay="" alipay="" paypal="" bitcoin="" author="" comment="" mode="" >}}

1

{{< reward wechatpay="/images/wechatpay.gif" alipay="/images/alipay.gif" comment="给作者买杯卡布奇诺～" >}}

1

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

1

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

1
2
3

{{< echarts >}}
...
{{< /echarts >}}

 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

{{< mermaid >}}
...
{{< /mermaid >}}

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

{{< mapbox lng="" lat="" zoom="" marked="" light-style="" dark-style="" markers="" >}}

1

{{< mapbox lng=113.953277 lat=22.559102 markers="[{\"lng\": 113.81841, \"lat\": 22.637524, \"description\": \"宝安国际机场\"},{\"lng\": 113.953386, \"lat\": 22.559052, \"description\": \"标记 2\"},{\"lng\": 114.035746,\"lat\": 22.615667, \"description\": \"深圳北站\"}]" >}}

1
2
3
4

{{< aplayer fixit= mini= autoplay= theme="" loop="" order="" preload="" volume= mutex= lrcType= listfolder= listMaxHeight="" storageName="" >}}
  {{< audio name="" artist="" url="" cover=" lrc="" theme="" type="" >}}
  {{< /audio >}}
{{< /aplayer >}}

1
2
3
4
5
6
7
8

{{< 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="Wavelength-1" artist="oldmanyoung" url="/music/Wavelength.mp3" cover="/images/Wavelength.webp" />}}
  {{< audio name="Wavelength-2" artist="oldmanyoung" url="/music/Wavelength.mp3" cover="/images/Wavelength.webp" >}}
    [00:00.00]APlayer audio2
    [00:04.01]is
    [00:08.02]amazing
  {{< /audio >}}
{{< /aplayer >}}

1

{{< bilibili [id] [p] [autoplay] [poster] [muted] [danmaku] [t] >}}

1

{{< bilibili BV1kt411k7Rq 3 >}}

1

{{< douyin [id] >}}

1

{{< douyin 7388149561765760266 >}}

1
2
3
4
5
6
7
8

// 自定义本地音乐
{{< music url="" name= artist= cover="" >}}

// 音乐平台自动识别
{{< music [auto] >}}

// 自定义音乐平台
{{< music [server] [type] [id] >}}

1
2
3
4
5
6
7
8

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

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

// 自定义音乐平台
{{< music netease song 1868553 >}}

1

{{< spotify [type] [id] [width] [height] >}}

1

{{< spotify artist 74ASZWbe4lXaubB36ztrGX >}}

1

{{< vimeo id= allowFullScreen= class= loading= title= >}}

1

{{< vimeo id=19899678 allowFullScreen=false loading=lazy >}}

1

{{< youtube id= allowFullScreen= autoplay= class= controls= end= loading= loop= mute= start= title >}}

1

{{< youtube id=0RKpf3rK57I start=30 end=60 loading=lazy >}}

1
2
3

{{< env "[hugo_env]" >}}
...
{{< /env >}}

1
2
3
4

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

1
2
3

{{% fixit-encryptor "[password]" "[message]" %}}
...
{{% /fixit-encryptor %}}

1
2
3
4
5
6
7
8
9

{{< fixit-encryptor "1212" "密码是 1212" >}}
第一层加密内容。
{{< fixit-encryptor "1212" "密码是 1212" >}}
第二层加密内容。
{{< fixit-encryptor "1212" "密码是 1212" >}}
第三层加密内容。
{{< /fixit-encryptor >}}
{{< /fixit-encryptor >}}
{{< /fixit-encryptor >}}

1
2
3

{{< file-tree path="" level= folder_slash= file="" data="" ignore_list="" highlight_list="" name="" >}}
...
{{< /file-tree >}}

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

// 内嵌 YAML 格式内容
{{< file-tree >}}
- name: src
  type: dir
  children:
  - name: index.ts
    type: file
  - name: app.ts
    type: file
- name: package.json
  type: file
{{< /file-tree >}}

// 读取数据文件
{{< file-tree file="data/tree.yml" />}}
{{< file-tree data="example" />}}

// 文件系统扫描
{{< file-tree />}}
{{< file-tree level=0 ignore_list=".autocorrectignore,.autocorrectrc,.frontmatter,.vscode" name="{path}" />}}

1
2
3

{{< highlight [lang] "anchorlinenos= codefences= guesssyntax= hl_lines= hl_inline= lineanchors= linenostart= linenos= linenumbersintable= noclasses= style= tabwidth= wrapperclass=" >}}
...
{{< /highlight >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{{< highlight go "linenos=inline, hl_lines=3 6-8, style=emacs" >}}
package main

import "fmt"

func main() {
    for i := 0; i < 3; i++ {
        fmt.Println("Value of i:", i)
    }
}
{{< /highlight >}}

1

{{< gist [username] [gist_id] [file] >}}

1

{{< gist Lruihao fb8b2d0353465c4d40bf74818db80710 >}}

1

{{% param "[param_name]" %}}

1
2
3
4
5
6
7
8
9

---
title: Example
date: 2025-01-15T23:29:46-08:00
params:
  color: red
  size: medium
---

We found a {{% param "color" %}} shirt.

1
2
3

{{< script >}}
...
{{< /script >}}

1
2
3

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

1
2
3

{{< style "[custom_style]" "[tag]" >}}
...
{{< /style >}}

1
2
3

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

1

{{< version [version] [type] [prefix] [project] >}}

1
2
3
4

{{< version 0.3.15 >}}
{{< version 0.3.15 changed >}}
{{< version 0.3.15 deleted >}}
{{< version 0.3.15 deprecated >}}