# 主题文档 - 内置 Shortcodes


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

<!--more-->

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

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

为了避免这种限制, Hugo 创建了 [shortcodes](https://gohugo.io/content-management/shortcodes/).
shortcode 是一个简单代码段, 可以生成合理的 HTML 代码, 并且符合 Markdown 的设计哲学.

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

## 1 figure {#figure}

[`figure` 的文档](https://gohugo.io/shortcodes/figure/)

一个 `figure` 示例:

```markdown
{{</* figure
    src="/images/zion-national-park.jpg"
    alt="A photograph of Zion National Park"
    link="https://www.nps.gov/zion/index.htm"
    caption="Zion National Park"
    class="ma0 w-75"
*/>}}
```

呈现的输出效果如下:

{{< figure
    src="/images/zion-national-park.jpg"
    alt="A photograph of Zion National Park"
    link="https://www.nps.gov/zion/index.htm"
    caption="Zion National Park"
    class="ma0 w-75"
>}}

输出的 HTML 看起来像这样:

```html
<figure class="ma0 w-75">
    <a href="https://www.nps.gov/zion/index.htm">
        <img src="/images/zion-national-park.jpg" alt="A photograph of Zion National Park">
    </a>
    <figcaption>
        <p>Zion National Park</p>
    </figcaption>
</figure>
```

## 2 gist

[`gist` 的文档](https://gohugo.io/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>
```

## 3 highlight

[`highlight` 的文档](https://gohugo.io/shortcodes/highlight/)

一个 `highlight` 示例:

```markdown
{{</* highlight go */>}}
package main

import "fmt"

func main() {
    fmt.Println("Hello, 世界")
}
{{</* /highlight */>}}
```

呈现的输出效果如下:

{{< highlight go >}}
package main

import "fmt"

func main() {
    fmt.Println("Hello, 世界")
}
{{< /highlight >}}

## 4 instagram

[`instagram` 的文档](https://gohugo.io/shortcodes/instagram/)

一个 `instagram` 示例:

```markdown
{{</* instagram CxOWiQNP2MO */>}}
```

呈现的输出效果如下:

{{< instagram CxOWiQNP2MO >}}

## 5 param

[`param` 的文档](https://gohugo.io/shortcodes/param/)

一个 `param` 示例:

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

呈现的输出效果如下:

{{< param description >}}

## 6 x

[`x` 的文档](https://gohugo.io/shortcodes/x/)

一个 `x` 示例:

```markdown
{{</* x user=GoHugoIO id=917359331535966209 */>}}
```

呈现的输出效果如下:

{{< x user=GoHugoIO id=917359331535966209 >}}

## 7 vimeo

[`vimeo` 的文档](https://gohugo.io/shortcodes/vimeo/)

一个 `vimeo` 示例:

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

呈现的输出效果如下:

{{< vimeo 146022717 >}}

## 8 youtube

[`youtube` 的文档](https://gohugo.io/shortcodes/youtube/)

一个 `youtube` 示例:

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

呈现的输出效果如下:

{{< youtube w7Ft2ymGmfc >}}

## 9 ref

[`ref` 的文档](https://gohugo.io/shortcodes/ref/)

## 10 relref

[`relref` 的文档](https://gohugo.io/shortcodes/relref/)