Shortcodes

发布时间: 更新时间: 总字数:651 阅读时间:2m 作者: IP上海 分享 网址

hugo-bootstrap-x Shortcodes 使用与示例。

Buttons

{{< button relref="/" [class="..."] >}}Get Home{{< /button >}}
{{< button href="https://github.com/xiexianbin/hugo-bootstrap-docs-x" >}}Contribute{{< /button >}}
Get Home Contribute

栅格使用

2个栅格

Hugo

Hugo 是一个用Go编写的静态网站生成器,2013由 Steve Francia 原创,自 v0.14Bjørn Erik Pedersen 主力开发,并由全球各地的开发者和用户提交贡献。HugoApache License 2.0 授权的开放源代码项目。 The world’s fastest framework for building websites

框架说明

hugo-bootstrap-docs-x谢先斌基于Hugo开发。框架源码托管在Github,详见:hugo-bootstrap-docs-x

3个栅格

{{< columns >}} <!-- begin columns block -->
# Left Content
Left Content...

<---> <!-- magic sparator, between columns -->

# Mid Content
Mid Content...

<---> <!-- magic sparator, between columns -->

# Right Content
Right Content...
{{< /columns >}}

Left Content

Left Content

Mid Content

Mid Content

Right Content

Right Content

Dir shortcode

{{< dir "_/hugo-bootstrap-x" >}}
  1. ToC 使用介绍
  2. 父目录

Expand shortcode

Default

{{< expand >}}
## Markdown content
markdow content...
{{< /expand >}}
Expand

Markdown content

markdow content…

With Custom Label

{{< expand "Custom Label" "..." >}}
## Markdown content
Markdown content...
{{< /expand >}}
Custom Label ...

Markdown content

Markdown content…

figure

figure

readfile

{{< readfile file="/static/images/logo/logo-white.svg" >}}
{{< readfile file="/static/images/logo/logo-white.svg" markdown="true" >}}
{{< readfile file="/static/code/k8s/flannel/net-conf.json" highlight="json" >}}
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="图层_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#3069A7;}
	.st1{fill:#FFFFFF;}
</style>
<path class="st0" d="M126.88,0H23.12C10.35,0,0,10.35,0,23.12v103.77C0,139.65,10.35,150,23.12,150h103.77
	c12.77,0,23.12-10.35,23.12-23.12V23.12C150,10.35,139.65,0,126.88,0z"/>
<polygon class="st1" points="101.18,114.5 75.87,79.53 50.57,113.5 38.1,113.5 69.72,71.04 41.1,31.5 53.57,31.5 76.05,62.55
	99.18,31.5 111.65,31.5 82.19,71.04 113.65,114.5 "/>
</svg>

Gist

{{< gist "xiexianbin" "b4d29101d9f363c05e710b3ac17b4393" >}}

highlight

{{< highlight "python" >}}
# -*- coding: UTF-8 -*-

if __name__ == '__main__':
    print 'Hello, world!'
{{< /highlight >}}
# -*- coding: UTF-8 -*-

if __name__ == '__main__':
    print 'Hello, world!'

img

{{< img src="/images/logo/logo-white.svg" alt="xiexianbin logo" style="height: 300px" >}}
xiexianbin logo

instagram_simple

instagram_simple

instagram

instagram

Mermaid Chart

{{< mermaid >}}
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
{{< /mermaid >}}
sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

思维导图 mind

{{< mind China 80 >}}
- 中国
  - 华北
  - 华南
  - 华西
  - 华东
{{< /mind >}}

param

{{< param "categories" >}}
[hugo-bootstrap-x]

ref

{{< ref "shortcodes.md" >}}
https://www.xiexianbin.cn/_/hugo-bootstrap-x/shortcodes/

relref

{{< relref "shortcodes.md" >}}
/_/hugo-bootstrap-x/shortcodes/

Tab & Tabs

{{< tabs "uniqueid" >}}
{{< tab "MacOS" >}} # MacOS Content {{< /tab >}}
{{< tab "Linux" >}} # Linux Content {{< /tab >}}
{{< tab "Windows" >}} # Windows Content {{< /tab >}}
{{< /tabs >}}

MacOS

This is tab MacOS content.

Linux

This is tab Linux content.

Windows

This is tab Windows content.

twitter

{{< tweet "1132540858702548992" >}}

youtube

{{< youtube qtIqKaDlqXo >}}

参考

  1. https://gohugo.io/content-management/shortcodes/

Translations

Home Archives Categories Tags Statistics
本文总阅读量 次 本站总访问量 次 本站总访客数