summaryrefslogtreecommitdiff
path: root/themes/CodeIT/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.zh-cn.md
diff options
context:
space:
mode:
authorChristoph Cullmann <cullmann@kde.org>2021-02-18 22:21:36 +0100
committerChristoph Cullmann <cullmann@kde.org>2021-02-18 22:21:36 +0100
commit0c7cb4486a89ec6fe9680e6569ef41d4b82d557d (patch)
tree081941052bcab0caf69487b6bf5ab2df5deb3b7b /themes/CodeIT/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.zh-cn.md
parent640572ecab69291d2c266de2011b795a861e7c21 (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.md188
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 >}}