主题文档 - 内置 Shortcodes

Hugo 提供了多个内置的 Shortcodes, 以方便作者保持 Markdown 内容的整洁.

Hugo 使用 Markdown 为其简单的内容格式. 但是, Markdown 在很多方面都无法很好地支持. 你可以使用纯 HTML 来扩展可能性.

但这恰好是一个坏主意. 大家使用 Markdown, 正是因为它即使不经过渲染也可以轻松阅读. 应该尽可能避免使用 HTML 以保持内容简洁.

为了避免这种限制, Hugo 创建了 shortcodes . shortcode 是一个简单代码段, 可以生成合理的 HTML 代码, 并且符合 Markdown 的设计哲学.

Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见的用法. 提供这些 shortcodes 是为了方便保持你的 Markdown 内容简洁.

1 figure

figure 的文档

一个 figure 示例:

1

{{< figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" >}}

输出的 HTML 看起来像这样:

1
2
3
4
5
6


<figure>
    <img src="/images/lighthouse.jpg"/>
    <figcaption>
        <h4>Lighthouse (figure)</h4>
    </figcaption>
</figure>

2 gist

gist 的文档

一个 gist 示例:

1

{{< gist spf13 7896402 >}}

呈现的输出效果如下:

输出的 HTML 看起来像这样:

1

<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>

3 highlight

highlight 的文档

一个 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>

4 instagram

instagram 的文档

一个 instagram 示例:

1

{{< instagram BWNjjyYFxVx hidecaption >}}

呈现的输出效果如下:

5 param

param 的文档

一个 param 示例:

1

{{< param description >}}

呈现的输出效果如下:

Hugo 提供了多个内置的 Shortcodes, 以方便作者保持 Markdown 内容的整洁.

6 ref 和 relref

ref 和 relref 的文档

7 tweet

tweet 的文档

一个 tweet 示例:

1

{{< tweet 877500564405444608 >}}

8 vimeo

vimeo 的文档

一个 vimeo 示例:

1

{{< vimeo 146022717 >}}

呈现的输出效果如下:

9 youtube

youtube 的文档

一个 youtube 示例:

1

{{< youtube w7Ft2ymGmfc >}}

呈现的输出效果如下: