LoveIt/exampleSite/content/posts/theme-documentation-built-in-shortcodes.zh-cn.md

weight	title	date	lastmod	draft	author	authorLink	description	tags	categories	featuredImage	lightgallery
3	主题文档 - 内置 Shortcodes	2020-03-04T16:29:59+08:00	2020-03-04T16:29:59+08:00	false	Dillon	https://dillonzq.com	Hugo 提供了多个内置的 Shortcodes, 以方便作者保持 Markdown 内容的整洁.	shortcodes	documentation	/images/theme-documentation-built-in-shortcodes/featured-image.png	true

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

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

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

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

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

1 figure

figure 的文档

一个 figure 示例:

{{</* figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}

呈现的输出效果如下:

{{< figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}

输出的 HTML 看起来像这样:

<figure>
    <img src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg"/>
    <figcaption>
        <h4>Lighthouse (figure)</h4>
    </figcaption>
</figure>

2 gist

gist 的文档

一个 gist 示例:

{{</* gist spf13 7896402 */>}}

呈现的输出效果如下:

{{< gist spf13 7896402 >}}

输出的 HTML 看起来像这样:

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

3 highlight

highlight 的文档

一个 highlight 示例:

{{</* highlight html */>}}
<section id="main">
    <div>
        <h1 id="title">{{ .Title }}</h1>
        {{ range .Pages }}
            {{ .Render "summary"}}
        {{ end }}
    </div>
</section>
{{</* /highlight */>}}

呈现的输出效果如下:

{{< highlight html >}}

{{ .Title }}

{{ range .Pages }} {{ .Render "summary"}} {{ end }}

{{< /highlight >}}

4 instagram

instagram 的文档

一个 instagram 示例:

{{</* instagram BWNjjyYFxVx hidecaption */>}}

呈现的输出效果如下:

{{< instagram BWNjjyYFxVx hidecaption >}}

5 param

param 的文档

一个 param 示例:

{{</* param description */>}}

呈现的输出效果如下:

{{< param description >}}

6 ref 和 relref

ref 和 relref 的文档

7 tweet

tweet 的文档

一个 tweet 示例:

{{</* tweet 877500564405444608 */>}}

呈现的输出效果如下:

{{< tweet 877500564405444608 >}}

8 vimeo

vimeo 的文档

一个 vimeo 示例:

{{</* vimeo 146022717 */>}}

呈现的输出效果如下:

{{< vimeo 146022717 >}}

9 youtube

youtube 的文档

一个 youtube 示例:

{{</* youtube w7Ft2ymGmfc */>}}

呈现的输出效果如下:

{{< youtube w7Ft2ymGmfc >}}