Shortcode：汇总使用指南

前言

Shortcodes 翻译为: 短代码或者简码

虽然 Markdown 的内容格式简单，但有时会达不到创作者的要求。通常，内容作者被迫将原始 HTML 添加到 Markdown 内容中。Hugo 认为这与 Markdown 语法的简单性相矛盾。 Hugo 创造了短代码（shortcodes）来规避这些限制。

短代码是内容文件中的简单片段，Hugo 将使用预定义的模板呈现该片段。

请注意，短代码在模板文件中不起作用。如果需要短代码提供的插入功能类型，但在模板中，那很可能需要一个部分模板。除了更简洁的Markdown之外，短代码可以随时更新以反映新的类、技术或标准。在网站生成时，Hugo短代码将轻松合并更改。避免可能复杂的搜索和替换操作。

为防止 shortcodes 语法被博客产生短代码, 可在添加/*和*/来转义，要紧贴尖括号。
显示原始短代码：{{< 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" }}

<article class="shortcode-card">
    <a href="https://github.com/{{ $title }}" target="_blank" rel="noopener">
        <header>
            <img alt="{{ $title }}" src="https://opengraph.githubassets.com/1/{{ $title }}" width="50%" height="50%" />
        </header>
    </a>
</article>

Collapse 可折叠文本

主题自带，使用语法：

1
2
3
4
5
6
{{< collapse summary="标题" >}}

1. xx
2. xxx

{{< /collapse >}}

预览效果：

标题

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
<!DOCTYPE HTML>
<html lang="en">

<head>
    <style type="text/css">
        .bilibili_shortcodes {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 66%;
            margin: auto;
            overflow: hidden;
            text-align: center;
        }

        .bilibili_shortcodes iframe {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
    </style>
    <title></title>
</head>

<body>
    <div class="bilibili_shortcodes">
        <iframe
            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">
        </iframe>
    </div>
</body>

</html>

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" >}}

预览效果：

Figure属性说明

属性	描述	值
src	指定图片的路径或 URL
title	设置图片的标题
caption	设置图片的说明文字
link	图片成为超链接，点击后跳转到指定地址
target	控制点击图片后的跳转方式	_blank：在新标签页打开链接
rel	定义 a 标签的 rel 属性，影响 SEO 和链接行为	nofollow：告诉搜索引擎不要跟踪该链接；noopener：防止新窗口的 tabnabbing 攻击（推荐 _blank 时使用）；noreferrer：阻止 HTTP 头 Referer 信息的发送
width	设置图片的宽度	单位可以是 px、%、em
height	设置图片的高度
align	设置图片的对齐方式	left / center / right

rtl 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" -}}
<div class="timeline__row">
    <div class="timeline__time">
        <div class="timeline__time">{{ $date }}</div>
        <div class="timeline__split-line"></div>
    </div>
    <div class="timeline__content">
        <div class="timeline__tags">
            {{- with split $tags ", " -}} {{- range . }}{{- if eq . "样式" }}
            <span class="timeline__tag timeline__tag-style">{{ . }}</span> {{- else if eq . "文章" }}
            <span class="timeline__tag timeline__tag-article">{{ . }}</span> {{- else if eq . "页面" }}
            <span class="timeline__tag timeline__tag-page">{{ . }}</span> {{- else }}
            <span class="timeline__tag">{{ . }}</span> {{- end }} {{- end }} {{- end }}
        </div>
        <a href="{{ $url }}">
            <div class="timeline__title">{{ $title }}</div>
        </a>
        <!-- title 可点击，默认就是跳转时间轴所在页 -->
        <div class="timeline__description">
            {{ $description }}
        </div>
    </div>
</div>

任务列表

使用语法：

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
<div class="task-list">
    <ul>
        {{ $status := .Get "status" }}
        {{ $description := .Get "description" }}

        {{ if or (not $status) (not $description) }}
        <li>参数缺失，请确保传递正确的 status 和 description。</li>
        {{ else }}
        <li class="task-{{ $status }}">
            <ul class="task-icon">
                {{ if eq $status "uncompleted" }}<li>🔲</li>
                {{ else if eq $status "completed" }}<li>✔️</li>
                {{ else if eq $status "underWay" }}<li>🟩</li>
                {{ else if eq $status "cancelled" }}<li>❌</li>
                {{ else if eq $status "havePlaned" }}<li>⌛</li>
                {{ else if eq $status "haveBeenReplanned" }}<li>〰️</li>
                {{ end }}
            </ul>
            <label class="{{ if or (eq $status " completed") (eq $status "cancelled" ) }}completed-or-cancelled{{ end
                }}">{{ $description }}</label>
        </li>
        {{ end }}
    </ul>
</div>

<style>
    .task-list ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .task-list li {
        margin: 2px 0;
        font-size: 1rem;
    }

    .task-icon {
        list-style: none;
        padding: 0;
        margin: 0;
        display: inline-block;
    }

    .task-icon li {
        display: inline-block;
        margin-right: 5px;
    }

    .task-uncompleted {
        color: black;
    }

    .task-completed {
        color: blue;
    }

    .task-underWay {
        color: green;
    }

    .task-cancelled {
        color: gray;
    }

    .task-havePlaned {
        color: orange;
    }

    .task-haveBeenReplanned {
        color: purple;
    }

    label {
        font-weight: normal;
        margin-left: 8px;
    }

    /* 为已完成和已取消状态添加删除线 */
    .completed-or-cancelled {
        text-decoration: line-through;
        color: gray;
        /* 删除线任务文字颜色可以是灰色 */
    }
</style>

Shortcodes参考链接

前言#

语法#

搜集的Shortcode代码分享#

Admonition 折叠框#

文章内链#

MindMap#

Github 源卡片#

Collapse 可折叠文本#

Bilibili 视频#

Figure 显示#

rtl or ltr 右左方向文本#

Timeline#

任务列表#

前言

语法

搜集的Shortcode代码分享

Admonition 折叠框

文章内链

MindMap

Github 源卡片

Collapse 可折叠文本

Bilibili 视频

Figure 显示

rtl or ltr 右左方向文本

Timeline

任务列表