diff options
Diffstat (limited to 'themes/LoveIt/exampleSite/content/posts/theme-documentation-built-in-shortcodes')
3 files changed, 359 insertions, 0 deletions
diff --git a/themes/LoveIt/exampleSite/content/posts/theme-documentation-built-in-shortcodes/featured-image.png b/themes/LoveIt/exampleSite/content/posts/theme-documentation-built-in-shortcodes/featured-image.png Binary files differnew file mode 100644 index 0000000..2824a7f --- /dev/null +++ b/themes/LoveIt/exampleSite/content/posts/theme-documentation-built-in-shortcodes/featured-image.png diff --git a/themes/LoveIt/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.en.md b/themes/LoveIt/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.en.md new file mode 100644 index 0000000..a94d81e --- /dev/null +++ b/themes/LoveIt/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.en.md @@ -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 >}} diff --git a/themes/LoveIt/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.zh-cn.md b/themes/LoveIt/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.zh-cn.md new file mode 100644 index 0000000..b0d2146 --- /dev/null +++ b/themes/LoveIt/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.zh-cn.md @@ -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 >}} |