Zp的网站
所有文章 标签 分类 文档 关于 简体中文
Zp的网站

主题文档 - 内置 Shortcodes

Dillon  收录于 文档
   约 662 字   预计阅读 2 分钟   19 次阅读  
/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 内容简洁.

figure 的文档

一个 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 示例:

1

{{< gist spf13 7896402 >}}

呈现的输出效果如下:

<!-- image -->
<figure {{ if isset .Params "class" }}class="{{ index .Params "class" }}"{{ end }}>
{{ if isset .Params "link"}}<a href="{{ index .Params "link"}}">{{ end }}
<img src="{{ index .Params "src" }}" {{ if or (isset .Params "alt") (isset .Params "caption") }}alt="{{ if isset .Params "alt"}}{{ index .Params "alt"}}{{else}}{{ index .Params "caption" }}{{ end }}"{{ end }} />
{{ if isset .Params "link"}}</a>{{ end }}
{{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
<figcaption>{{ if isset .Params "title" }}
<h4>{{ index .Params "title" }}</h4>{{ end }}
{{ if or (isset .Params "caption") (isset .Params "attr")}}<p>
{{ index .Params "caption" }}
{{ if isset .Params "attrlink"}}<a href="{{ index .Params "attrlink"}}"> {{ end }}
{{ index .Params "attr" }}
{{ if isset .Params "attrlink"}}</a> {{ end }}
</p> {{ end }}
</figcaption>
{{ end }}
</figure>
<!-- image -->
view raw img.html hosted with ❤ by GitHub

输出的 HTML 看起来像这样:

1

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

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>

instagram 的文档

Instagram’s API was deprecated since October 24th, 2020
The instagram-shortcode refers an endpoint of Instagram’s API, that’s deprecated since October 24th, 2020. Thus, no images can be fetched from this API endpoint, resulting in an error when the instagram-shortcode is used. For more information please have a look at GitHub issue #7879 .

param 的文档

一个 param 示例:

1

{{< param description >}}

呈现的输出效果如下:

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

ref 和 relref 的文档

tweet 的文档

一个 tweet 示例:

1

{{< tweet user="TwitterUser" id="1234567890" >}}

呈现的输出效果如下:

vimeo 的文档

一个 vimeo 示例:

1

{{< vimeo 146022717 >}}

呈现的输出效果如下:

youtube 的文档

一个 youtube 示例:

1

{{< youtube w7Ft2ymGmfc >}}

呈现的输出效果如下:

更新于 2025-01-30
阅读原始文档
 Shortcodes
返回 | 主页
来发评论吧~
Powered By Valine
v1.4.18