Shortcodes 是在内容文件中调用内置或自定义模板的简单片段。
什么是 Shortcode
Hugo 喜欢 Markdown，因为它的内容格式简单，但有时 Markdown 会有局限性。通常，内容作者被迫向 Markdown 内容中添加原始 HTML（例如，视频 <iframe>）。我们认为这与 Markdown 语法的美丽简洁相矛盾。
Hugo 为了避免这些限制创建了 shortcodes。
shortcode 是一个简单的片段，位于内容文件中，Hugo 将使用预定义的模板进行渲染。请注意，shortcode 在模板文件中不起作用。如果你需要模板中 shortcodes 提供的插入功能，你很可能需要一个 partial template。
除了更干净的 Markdown，shortcodes 可以随时更新以反映新的类、技术或标准。在站点生成时，Hugo shortcodes 将轻松合并你的更改。你避免了可能复杂的搜索和替换操作。
使用 Shortcodes
- 带有原始字体串格式的 Shortcodes ` `
- 带有 Markdown 的 Shortcodes
% % - 不带有 Markdown 的 Shortcodes
< >
在 Use Shortcodes 部分查看更多细节。
内置 Shortcodes
根据需要使用这些 Hugo 内置 Shortcodes。
技巧
要覆盖 Hugo 内置 Shortcodes，请将
源代码 复制到
layouts/shortcodes 目录中同名的文件中。
figure shortcode 的文档。
一个 figure 示例：
1
| {{< figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" >}}
|
呈现的输出效果如下：
Lighthouse (figure)
输出的 HTML 看起来像这样：
1
2
3
4
5
6
| <figure>
<img src="/images/lighthouse.jpg" />
<figcaption>
<h4>Lighthouse (figure)</h4>
</figcaption>
</figure>
|
Gist
gist shortcode 的文档。
一个 gist 示例：
1
| {{< gist spf13 7896402 >}}
|
呈现的输出效果如下：
输出的 HTML 看起来像这样：
1
| <script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
Highlight
highlight shortcode 的文档。
一个 highlight 示例：
1
2
3
4
5
6
7
8
9
10
| {{< highlight html >}}
<section id="main">
<div>
<h1 id="title">{{ .Title }}</h1>
{{ range .Pages }}
{{ .Render "summary"}}
{{ end }}
</div>
</section>
{{< /highlight >}}
|
呈现的输出效果如下：
1
2
3
4
5
6
7
8
| <section id="main">
<div>
<h1 id="title">{{ .Title }}</h1>
{{ range .Pages }}
{{ .Render "summary"}}
{{ end }}
</div>
</section>
|
Instagram
instagram shortcode 的文档。
一个 instagram 示例：
1
| {{< instagram CxOWiQNP2MO >}}
|
呈现的输出效果如下：
Param
param shortcode 的文档。
一个 param 示例：
1
| {{< param description >}}
|
呈现的输出效果如下：
Shortcodes 是在内容文件中调用内置或自定义模板的简单片段。
Ref
ref shortcode 的文档。
调用此 shortcode 时始终使用 {{% %}} 符号。
一个 ref 示例：
1
2
| - [内置 Shortcodes]({{% ref "/documentation/content-management/shortcodes/built-in" %}})
- [扩展 Shortcodes]({{% ref "/documentation/content-management/shortcodes/extended" %}})
|
呈现的输出效果如下：
输出的 HTML 看起来像这样：
1
2
3
4
| <ul>
<li><a href="http://example.org/documentation/content-management/shortcodes/built-in">内置 Shortcodes</a></li>
<li><a href="http://example.org/documentation/content-management/shortcodes/extended">扩展 Shortcodes</a></li>
</ul>
|
Relref
relref shortcode 的文档。
调用此 shortcode 时始终使用 {{% %}} 符号。
一个 relref 示例：
1
2
| - [内置 Shortcodes]({{% relref "/documentation/content-management/shortcodes/built-in" %}})
- [扩展 Shortcodes]({{% relref "/documentation/content-management/shortcodes/extended" %}})
|
呈现的输出效果如下：
输出的 HTML 看起来像这样：
1
2
3
4
| <ul>
<li><a href="/documentation/content-management/shortcodes/built-in">内置 Shortcodes</a></li>
<li><a href="/documentation/content-management/shortcodes/extended">扩展 Shortcodes</a></li>
</ul>
|
twitter shortcode 的文档。
一个 twitter 示例：
1
| {{< twitter user="SanDiegoZoo" id="1453110110599868418" >}}
|
呈现的输出效果如下：
Vimeo
vimeo shortcode 的文档。
一个 vimeo 示例：
1
| {{< vimeo 146022717 >}}
|
呈现的输出效果如下：
Youtube
youtube shortcode 的文档。
一个 youtube 示例：
1
| {{< youtube 0RKpf3rK57I >}}
|
呈现的输出效果如下：
隐私配置
要了解如何配置你的 Hugo 网站以满足新的欧盟隐私法规，请参阅 隐私保护。
Lruihao 收录于 主题文档 和 Shortcodes