介绍
Hugo 提供了多个内置的 Shortcodes, 以方便作者保持 Markdown 内容的整洁.
Hugo 使用 Markdown 为其简单的内容格式. 但是, Markdown 在很多方面都无法很好地支持. 你可以使用纯 HTML 来扩展可能性.
但这恰好是一个坏主意. 大家使用 Markdown, 正是因为它即使不经过渲染也可以轻松阅读. 应该尽可能避免使用 HTML 以保持内容简洁.
为了避免这种限制, Hugo 创建了 shortcodes. shortcode 是一个简单代码段, 可以生成合理的 HTML 代码, 并且符合 Markdown 的设计哲学.
Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见的用法. 提供这些 shortcodes 是为了方便保持你的 Markdown 内容简洁.
使用短代码
这里有两个配对的短代码示例：
示例1：使用百分号
{{% mdshortcode %}}在*中间*处`处理`的内容。{{% /mdshortcode %}}
示例2：使用尖括号
{{< highlight go >}} 这里有一堆代码 {{< /highlight >}}
上面的示例使用了两种不同的界定符，第一个示例中使用了%字符，第二个示例中使用了<>字符。
使用百分号作为最外层分隔符的短代码将在发送到内容渲染器时完全渲染。这意味着短代码的渲染输出可以成为页面的目录、脚注等的一部分。
使用尖括号表示短代码的内部内容不需要进一步渲染。通常，不使用Markdown的短代码包括内部HTML：
{{< myshortcode >}}<p>你好 <strong>世界！</strong></p>{{< /myshortcode >}}
使用原始字符串参数的短代码
你可以使用原始字符串字面量将多行作为参数传递给短代码：
{{< myshortcode `这是一些 <b>HTML</b>，
以及一个带有"引用字符串"的新行。` >}}
嵌套短代码
你可以在其他短代码中调用短代码，方法是创建自己的模板，利用.Parent变量。.Parent允许你检查调用短代码的上下文。参见[短代码模板][sctemps]。
Hugo内置的短代码
Hugo附带了一组预定义的短代码，代表常见用法。这些短代码提供给作者使用，以保持你的Markdown内容的清洁。
详细文档参看官方shortcodes
figure 图像扩展
一个figure示例，代码如下
{{< figure align="center" src="binary-tree-cameras.jpg" title="监控二叉树" >}}
显示效果如下
来到themes\PaperMod\layouts\shortcodes\figure.html文件,我们就可以看到shortcodes的实现代码
{{ if or (.Get "class") (eq (.Get "align") "center") }} class="
{{- if eq (.Get "align") "center" }}align-center {{ end }}
{{- with .Get "class" }}{{ . }}{{- end }}"
{{- end -}}
学习golang Template内置函数后，我们得知这段代码的意思，如果设置了 class 或 align 属性为 center，则添加 align-center 类名。
输出代码如下
<figure class="align-center "><a href="https://www.fpga.vip/">
<img loading="lazy" src="binary-tree-cameras.jpg#center" alt="监控二叉树图像 无法显示"> </a>
<figcaption>监控二叉树 (figure)</figcaption>
</figure>
gist 代码片段分享
在GitHub上，你可以分享代码片段，Hugo会自动将其转换为HTML。
此时的浏览器URL为
https://gist.github.com/user/50a7482715eac222e230d1e64dd9a89b
将以下内容包含在你的markdown中：
{{< gist user 50a7482715eac222e230d1e64dd9a89b >}}
效果如下
highlight
要显示一个带有突出显示的代码示例：
{{< highlight go-html-template >}}
{{ range .Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{< /highlight >}}
呈现的输出效果如下:
{{ range .Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}instagram 社交
要显示带有此URL的Instagram帖子：
https://www.instagram.com/p/CxOWiQNP2MO/
在你的Markdown中包含以下内容：
{{< instagram CxOWiQNP2MO >}}
param 输出你的参数
从当前页面的参数集合中获取一个值，如果在前置元数据或站点参数值中找不到具有给定键的参数，则记录一个ERROR。
代码
{{< param title >}}
显示效果如下
使用 Hugo ShortCode短代码ref 和 relref
这些短代码将通过相对路径（例如，blog/post.md）或逻辑名称（post.md）查找页面，并返回找到页面的永久链接（ref）或相对链接（relref）。
ref和relref还使您能够创建适用于Hugo生成的页眉链接的片段链接。
ref 输入示例
[Post 1]({{% ref "/posts/post-1" %}})
[Post 1]({{% ref "/posts/post-1.md" %}})
[Post 1]({{% ref "/posts/post-1#foo" %}})
[Post 1]({{% ref "/posts/post-1.md#foo" %}})
ref 输出示例
<a href="http://example.org/posts/post-1/">Post 1</a>
<a href="http://example.org/posts/post-1/">Post 1</a>
<a href="http://example.org/posts/post-1/#foo">Post 1</a>
<a href="http://example.org/posts/post-1/#foo">Post 1</a>
relref 输入示例
[Post 1]({{% relref "/posts/post-1" %}})
[Post 1]({{% relref "/posts/post-1.md" %}})
[Post 1]({{% relref "/posts/post-1#foo" %}})
[Post 1]({{% relref "/posts/post-1.md#foo" %}})
relref 输出示例
<a href="/posts/post-1/">Post 1</a>
<a href="/posts/post-1/">Post 1</a>
<a href="/posts/post-1/#foo">Post 1</a>
<a href="/posts/post-1/#foo">Post 1</a>
要显示具有此URL的推特帖子，请执行以下操作：
https://x.com/SanDiegoZoo/status/1453110110599868418
在你的Markdown中包含以下内容：
{{< twitter user="SanDiegoZoo" id="1453110110599868418" >}}
vimeo
要使用此URL显示Vimeo视频：
https://vimeo.com/channels/staffpicks/55073825
在你的Markdown中包含以下内容：
{{< vimeo 55073825 >}}
youtube
要使用此URL显示YouTube视频，请执行以下操作：
https://www.youtube.com/watch?v=0RKpf3rK57I
在你的Markdown中包含以下内容：
{{< youtube 0RKpf3rK57I >}}