Shortcodes简介

大多数的静态博客会使用 Markdown 进行写作，因为它格式简单、所见即所得，但是 Markdown 也有它的不足之处。当我们想要将图片或者视频等插入到文章内容中时，Markdown 本身并不能提供很好的支持，因此不得不将一些 HTML 片段加入到 Markdown 内容中。尽管在一些简单的场景中这样做能够解决问题，但是却破坏了 Markdown 文件的简洁性质。另外如果想对一些内容进行装饰也变得非常麻烦，而且不能起到复用的效果。为此，Hugo 引入了 shortcodes，允许我们在 Markdown 文件中以一种简洁的形式书写 HTML。

这种方式可以理解为“模版的模版”，Hugo 框架的模版会解析我们自定义的 shortcodes 模版，生成对应的 HTML 代码。本人博客的 shortcodes 使用方式参考该博文的第7节：

PaperMod主题Markdown示例
日期: 2023-05-08   标签: #教程  #markdown  #Hugo  #PaperMod 
主要展示 PaperMod 主题中 Markdown 语法的页面效果 ......

在线PPT/PDF

新建themes/PaperMod/layouts/shortcodes/ppt.html，输入以下内容：

1
2
3
4
5

{{ $src := .Get "src" }}
<iframe src="{{ $src }}" marginwidth="0" marginheight="0" scrolling="no"
    style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen="" webkitallowfullscreen=""
    mozallowfullscreen="" width="100%" height="600" frameborder="0">
</iframe>

在线Bilibili视频

新建themes/PaperMod/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>

博客文章内链

新建themes/PaperMod/layouts/shortcodes/innerlink.html，输入以下内容：

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

<div style="height: 150px;margin: 1em auto;position: relative;
        box-shadow: 0 2px 4px rgb(0 0 0 / 25%), 0 0 2px rgb(0 0 0 / 25%);
        border-radius: 15px;padding: 23px;max-width: 780px;background: var(--entry);">
    {{ $url := .Get "src" }}
    {{ with .Site.GetPage $url }}
    <div style="font-size: 22px; font-weight: 600">
        <a target="_blank" href="{{ .Permalink }}" style="box-shadow: none">{{ .Title }}</a>
    </div>
    <span style="font-size: 14px; color: #999">
        日期: {{ .Date.Format ( default "2006-01-02") }}
        {{ if .Params.tags }}&nbsp;
        标签:
        {{ range .Params.tags }}
        #{{ . }}&nbsp;
        {{ end }}
    </span>
    <div style="font-size: 14px; line-height: 1.825;max-height: 75px; overflow: hidden;margin-top: 5px;">
        {{ .Summary | plainify}} ......
    </div>
    {{ end }}
    {{ end }}
</div>

代码折叠

新建themes/PaperMod/layouts/shortcodes/code.html，输入以下内容：

1
2
3
4
5
6
7
8
9

{{ $_hugo_config := `{ "version": 1 }` }}
<details>
    <summary>
        <!-- <span style="background-color:rgb(255, 255, 255);"><b> 代码 🔍</b></span> -->
        <b> 代码 </b>
    </summary>

    {{.Inner}}
</details>

Github卡片

新建themes/PaperMod/layouts/shortcodes/github.html，输入以下内容：

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

{{ $title := .Get "title" }}
<!-- {{ $detail := .Get "detail" }} -->

<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>
        <!-- <div class="shortcode-card-content">
            <h2>{{ .Get "title" }}</h2>
            {{ with $detail }}
            <p>{{ . }}</p>
            {{ end }}
            <span>github.com</span>
        </div> -->
    </a>
</article>

不同颜色的信息框

新建themes/PaperMod/layouts/shortcodes/green.html，输入以下内容：

1
2
3
4
5

{{ $message := .Get "message" }}
<p
    style="color:#47566b; font-size: 18px; background: #ddefe4; padding: 4px 6px; border-radius: 1px; border-left: 5px solid #5cb879">
    {{ $message }}
</p>

实现原理就是用一个<p></p>标签包裹信息，样式可以自由调整。

更多内容参考：Hugo Shortcodes 示例、Shortcodes、Hugo博客自定义shortcodes