主题文档 - 内置 Shortcodes

Lruihao 收录于文档

2020-03-04 约 620 字预计阅读 2 分钟 - 次阅读

/zh-cn/theme-documentation-built-in-shortcodes/featured-image.png

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 param

param 的文档

一个 param 示例：

1

{{< param description >}}

呈现的输出效果如下：

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

5 ref 和 relref

ref 和 relref 的文档

6 tweet

tweet 的文档

一个 tweet 示例：

1

{{< tweet user="SanDiegoZoo" id="1453110110599868418" >}}

呈现的输出效果如下：

Owl bet you'll lose this staring contest 🦉 pic.twitter.com/eJh4f2zncC
— San Diego Zoo Wildlife Alliance (@sandiegozoo) October 26, 2021

7 vimeo

vimeo 的文档

一个 vimeo 示例：

1

{{< vimeo 146022717 >}}

呈现的输出效果如下：

8 youtube

youtube 的文档

一个 youtube 示例：

1

{{< youtube w7Ft2ymGmfc >}}

呈现的输出效果如下：