switch back to LoveIt, other theme is deprectated
This commit is contained in:
parent
260b6803e7
commit
51fb029ca2
4260 changed files with 49552 additions and 87082 deletions
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
|
@ -0,0 +1,179 @@
|
|||
---
|
||||
weight: 3
|
||||
title: "Theme Documentation - Built-in Shortcodes"
|
||||
date: 2020-03-04T16:29:41+08:00
|
||||
lastmod: 2020-03-04T16:29:41+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Hugo provides multiple built-in shortcodes for author convenience and to keep your markdown content clean."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
lightgallery: true
|
||||
---
|
||||
|
||||
**Hugo** provides multiple built-in shortcodes for author convenience and to keep your markdown content clean.
|
||||
|
||||
<!--more-->
|
||||
|
||||
Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
|
||||
|
||||
But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
|
||||
|
||||
To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/).
|
||||
A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy.
|
||||
|
||||
Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
|
||||
|
||||
## 1 figure {#figure}
|
||||
|
||||
[Documentation of `figure`](https://gohugo.io/content-management/shortcodes#figure)
|
||||
|
||||
Example `figure` input:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="/images/lighthouse.jpg"/>
|
||||
<figcaption>
|
||||
<h4>Lighthouse (figure)</h4>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
## 2 gist
|
||||
|
||||
[Documentation of `gist`](https://gohugo.io/content-management/shortcodes#gist)
|
||||
|
||||
Example `gist` input:
|
||||
|
||||
```markdown
|
||||
{{</* gist spf13 7896402 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< gist spf13 7896402 >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
## 3 highlight
|
||||
|
||||
[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes#instagram)
|
||||
|
||||
Example `highlight` input:
|
||||
|
||||
```markdown
|
||||
{{</* highlight html */>}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< highlight html >}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
## 4 instagram
|
||||
|
||||
[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes#instagram)
|
||||
|
||||
{{< admonition question "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](https://github.com/gohugoio/hugo/issues/7879).
|
||||
{{< /admonition >}}
|
||||
|
||||
## 5 param
|
||||
|
||||
[Documentation of `param`](https://gohugo.io/content-management/shortcodes#param)
|
||||
|
||||
Example `param` input:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< param description >}}
|
||||
|
||||
## 6 ref and relref {#ref-and-relref}
|
||||
|
||||
[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes#ref-and-relref)
|
||||
|
||||
## 7 tweet
|
||||
|
||||
[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes#tweet)
|
||||
|
||||
Example `tweet` input:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 917359331535966209 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< tweet 917359331535966209 >}}
|
||||
|
||||
## 8 vimeo
|
||||
|
||||
[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes#vimeo)
|
||||
|
||||
Example `vimeo` input:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
## 9 youtube
|
||||
|
||||
[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes#youtube)
|
||||
|
||||
Example `youtube` input:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< youtube w7Ft2ymGmfc >}}
|
|
@ -0,0 +1,180 @@
|
|||
---
|
||||
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 内容的整洁."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
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 内容简洁.
|
||||
|
||||
## 1 figure {#figure}
|
||||
|
||||
[`figure` 的文档](https://gohugo.io/content-management/shortcodes#figure)
|
||||
|
||||
一个 `figure` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" >}}
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="/images/lighthouse.jpg"/>
|
||||
<figcaption>
|
||||
<h4>Lighthouse (figure)</h4>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
## 2 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>
|
||||
```
|
||||
|
||||
## 3 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 >}}
|
||||
|
||||
## 4 instagram
|
||||
|
||||
[`instagram` 的文档](https://gohugo.io/content-management/shortcodes#instagram)
|
||||
|
||||
{{< admonition question "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](https://github.com/gohugoio/hugo/issues/7879).
|
||||
{{< /admonition >}}
|
||||
|
||||
## 5 param
|
||||
|
||||
[`param` 的文档](https://gohugo.io/content-management/shortcodes#param)
|
||||
|
||||
一个 `param` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< param description >}}
|
||||
|
||||
## 6 ref 和 relref {#ref-and-relref}
|
||||
|
||||
[`ref` 和 `relref` 的文档](https://gohugo.io/content-management/shortcodes#ref-and-relref)
|
||||
|
||||
## 7 tweet
|
||||
|
||||
[`tweet` 的文档](https://gohugo.io/content-management/shortcodes#tweet)
|
||||
|
||||
一个 `tweet` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 917359331535966209 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< tweet 917359331535966209 >}}
|
||||
|
||||
## 8 vimeo
|
||||
|
||||
[`vimeo` 的文档](https://gohugo.io/content-management/shortcodes#vimeo)
|
||||
|
||||
一个 `vimeo` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
## 9 youtube
|
||||
|
||||
[`youtube` 的文档](https://gohugo.io/content-management/shortcodes#youtube)
|
||||
|
||||
一个 `youtube` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< youtube w7Ft2ymGmfc >}}
|
Loading…
Add table
Add a link
Reference in a new issue