blob: 45821719d8b9b28a0bfceb777635deda7d4d3f47 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
---
weight: 3
title: "主题文档 - 内置 Shortcodes"
date: 2020-03-04T16:29:59+08:00
lastmod: 2020-03-04T16:29:59+08:00
draft: false
author: "Dillon"
authorLink: "https://dillonzq.com"
description: "Hugo 提供了多个内置的 Shortcodes, 以方便作者保持 Markdown 内容的整洁."
tags: ["shortcodes"]
categories: ["documentation"]
featuredImage: "/images/theme-documentation-built-in-shortcodes/featured-image.png"
lightgallery: true
---
**Hugo** 提供了多个内置的 Shortcodes, 以方便作者保持 Markdown 内容的整洁.
<!--more-->
Hugo 使用 Markdown 为其简单的内容格式. 但是, Markdown 在很多方面都无法很好地支持. 你可以使用纯 HTML 来扩展可能性.
但这恰好是一个坏主意. 大家使用 Markdown, 正是因为它即使不经过渲染也可以轻松阅读. 应该尽可能避免使用 HTML 以保持内容简洁.
为了避免这种限制, Hugo 创建了 [shortcodes](https://gohugo.io/extras/shortcodes/).
shortcode 是一个简单代码段, 可以生成合理的 HTML 代码, 并且符合 Markdown 的设计哲学.
Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见的用法.
提供这些 shortcodes 是为了方便保持你的 Markdown 内容简洁.
## figure {#figure}
[`figure` 的文档](https://gohugo.io/content-management/shortcodes/#figure)
一个 `figure` 示例:
```markdown
{{</* 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 看起来像这样:
```html
<figure>
<img src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg"/>
<figcaption>
<h4>Lighthouse (figure)</h4>
</figcaption>
</figure>
```
## gist
[`gist` 的文档](https://gohugo.io/content-management/shortcodes/#gist)
一个 `gist` 示例:
```markdown
{{</* gist spf13 7896402 */>}}
```
呈现的输出效果如下:
{{< gist spf13 7896402 >}}
输出的 HTML 看起来像这样:
```html
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
```
## highlight
[`highlight` 的文档](https://gohugo.io/content-management/shortcodes/#instagram)
一个 `highlight` 示例:
```markdown
{{</* highlight html */>}}
<section id="main">
<div>
<h1 id="title">{{ .Title }}</h1>
{{ range .Pages }}
{{ .Render "summary"}}
{{ end }}
</div>
</section>
{{</* /highlight */>}}
```
呈现的输出效果如下:
{{< highlight html >}}
<section id="main">
<div>
<h1 id="title">{{ .Title }}</h1>
{{ range .Pages }}
{{ .Render "summary"}}
{{ end }}
</div>
</section>
{{< /highlight >}}
## instagram
[`instagram` 的文档](https://gohugo.io/content-management/shortcodes/#instagram)
一个 `instagram` 示例:
```markdown
{{</* instagram BWNjjyYFxVx hidecaption */>}}
```
呈现的输出效果如下:
{{< instagram BWNjjyYFxVx hidecaption >}}
## param
[`param` 的文档](https://gohugo.io/content-management/shortcodes/#param)
一个 `param` 示例:
```markdown
{{</* param description */>}}
```
呈现的输出效果如下:
{{< param description >}}
## ref 和 relref {#ref-and-relref}
[`ref` 和 `relref` 的文档](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
## tweet
[`tweet` 的文档](https://gohugo.io/content-management/shortcodes/#tweet)
一个 `tweet` 示例:
```markdown
{{</* tweet 877500564405444608 */>}}
```
呈现的输出效果如下:
{{< tweet 877500564405444608 >}}
## vimeo
[`vimeo` 的文档](https://gohugo.io/content-management/shortcodes/#vimeo)
一个 `vimeo` 示例:
```markdown
{{</* vimeo 146022717 */>}}
```
呈现的输出效果如下:
{{< vimeo 146022717 >}}
## youtube
[`youtube` 的文档](https://gohugo.io/content-management/shortcodes/#youtube)
一个 `youtube` 示例:
```markdown
{{</* youtube w7Ft2ymGmfc */>}}
```
呈现的输出效果如下:
{{< youtube w7Ft2ymGmfc >}}
|
