diff options
author | Christoph Cullmann <cullmann@kde.org> | 2021-02-18 22:21:36 +0100 |
---|---|---|
committer | Christoph Cullmann <cullmann@kde.org> | 2021-02-18 22:21:36 +0100 |
commit | 0c7cb4486a89ec6fe9680e6569ef41d4b82d557d (patch) | |
tree | 081941052bcab0caf69487b6bf5ab2df5deb3b7b /themes/CodeIT/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.zh-cn.md | |
parent | 640572ecab69291d2c266de2011b795a861e7c21 (diff) |
use maintained theme
Diffstat (limited to 'themes/CodeIT/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.zh-cn.md')
-rw-r--r-- | themes/CodeIT/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.zh-cn.md | 188 |
1 files changed, 188 insertions, 0 deletions
diff --git a/themes/CodeIT/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.zh-cn.md b/themes/CodeIT/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.zh-cn.md new file mode 100644 index 0000000..1c32165 --- /dev/null +++ b/themes/CodeIT/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.zh-cn.md @@ -0,0 +1,188 @@ +--- +weight: 3 +title: "主题文档 - 内置 Shortcodes" +date: 2020-03-04T16:29:59+08:00 +lastmod: 2020-03-04T16:29:59+08:00 +draft: false +author: "Sunt Programator!" +authorLink: "https://suntprogramator.dev/" +description: "Hugo 提供了多个内置的 Shortcodes, 以方便作者保持 Markdown 内容的整洁." +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) + +一个 `instagram` 示例: + +```markdown +{{</* instagram BWNjjyYFxVx hidecaption */>}} +``` + +呈现的输出效果如下: + +{{< instagram BWNjjyYFxVx hidecaption >}} + +## 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 877500564405444608 */>}} +``` + +呈现的输出效果如下: + +{{< tweet 877500564405444608 >}} + +## 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 >}} |