Shortcode

2020-12-02 约 4929 字预计阅读 10 分钟次阅读

内置Shortcodes

figure

figure 的文档

figure shortcode 有以下命名参数：

src [必需] (第一个位置参数)
图片的 URL。
alt [可选]
图片无法显示时的替代文本，默认值是 src 参数的值。
支持 Markdown 或者 HTML 格式。
caption [可选]
图片说明。
支持 Markdown 或者 HTML 格式。
title [可选]
图片标题。
class [可选]
HTML figure 标签的 class 属性。
height [可选]
图片的 height 属性。
width [可选]
图片的 width 属性。

1
{{< figure src="/images/pexels.jpg" title="lake" >}}

输出效果为：

注意

更详细的插入图片用法请见此处。

gist

可以引用GitHub里的代码。

gist 的文档

假设网址中存在gist：

1
https://gist.github.com/spf13/7896402

可以通过URL获得的用户名和gist ID嵌入到内容中：

1
{{< gist spf13 7896402 >}}

输出效果为：

highlight

highlight 的文档，效果跟围栏代码块很像。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{{< highlight html >}}
<section id="main">
    <div>
        <h1 id="title">{{ .Title }}</h1>
        {{ range .Pages }}
            {{ .Render "summary"}}
        {{ end }}
    </div>
</section>
{{< /highlight >}}

输出效果为：

1
2
3
4
5
6
7
8
<section id="main">
    <div>
        <h1 id="title">{{ .Title }}</h1>
        {{ range .Pages }}
            {{ .Render "summary"}}
        {{ end }}
    </div>
</section>

ref和relref

用于交叉引用文档。

ref 和 relref 的文档

1
2
3
4
5
6
{{< ref "document.md" >}}
{{< ref "document.md#anchor" >}}
{{< ref "/blog/my-post.md" >}}
{{< relref "document.md" >}}
{{< relref "/blog/my-post.md" >}}
[markdown语法]({{< ref "markdownGrammer.md#link-test" >}} "测试")

以第六行为例效果为：

markdown语法

这将会跳转到名为markdown语法的文章link-test锚点处，即链接标题。

主题Shortcodes

style

支持 SASS 中的嵌套语法。

1
2
3
{{< style "text-align:right; strong{color:#00b1ff;}" >}}
This is a **right-aligned** paragraph.
{{< /style >}}

输出效果为：

This is a right-aligned paragraph.

link

link shortcode 有以下命名参数：

href [必需] (第一个位置参数)
链接的目标。
content [可选] (第二个位置参数)
链接的内容，默认值是 href 参数的值。
支持 Markdown 或者 HTML 格式。
title [可选] (第三个位置参数)
HTML a 标签的 title 属性，当悬停在链接上会显示的提示。
rel [可选]
HTML a 标签的 rel 补充属性。
class [可选]
HTML a 标签的 class 属性。

1
2
3
{{< link "https://fmx789.github.io" 我的博客 >}}
或者
{{< link href="https://fmx789.github.io" content=我的博客 title="KevinFan的博客" >}}

输出效果为：

我的博客

admonition

admonition有三个参数：

type [必需] 默认值是note
title [可选] 默认值是 type 参数的值
open [可选] 横幅内容是否默认展开, 默认值是 true

1
2
3
{{< admonition tip "This is a tip" false >}}
一个 **技巧** 横幅
{{< /admonition >}}

注意

1
2
3
{{< admonition >}}
一个 **注意** 横幅
{{< /admonition >}}

注意

一个注意横幅

摘要

1
2
3
{{< admonition abstract >}}
一个 **摘要** 横幅
{{< /admonition >}}

摘要

一个摘要横幅

信息

1
2
3
{{< admonition info >}}
一个 **信息** 横幅
{{< /admonition >}}

信息

一个信息横幅

技巧

1
2
3
{{< admonition tip >}}
一个 **技巧** 横幅
{{< /admonition >}}

技巧

一个技巧横幅

成功

1
2
3
{{< admonition success >}}
一个 **成功** 横幅
{{< /admonition >}}

成功

一个成功横幅

问题

1
2
3
{{< admonition question >}}
一个 **问题** 横幅
{{< /admonition >}}

问题

一个问题横幅

警告

1
2
3
{{< admonition warning >}}
一个 **警告** 横幅
{{< /admonition >}}

警告

一个警告横幅

失败

1
2
3
{{< admonition failure >}}
一个 **失败** 横幅
{{< /admonition >}}

失败

一个失败横幅

危险

1
2
3
{{< admonition danger >}}
一个 **危险** 横幅
{{< /admonition >}}

危险

一个危险横幅

Bug

1
2
3
{{< admonition bug >}}
一个 **Bug** 横幅
{{< /admonition >}}

Bug

一个 Bug 横幅

示例

1
2
3
{{< admonition example >}}
一个 **示例** 横幅
{{< /admonition >}}

示例

一个示例横幅

引用

1
2
3
{{< admonition quote >}}
一个 **引用** 横幅
{{< /admonition >}}

引用

一个引用横幅

image

image shortcode 有以下命名参数：

src [必需] (第一个位置参数)
图片的 URL。
alt [可选] (第二个位置参数)
图片无法显示时的替代文本，默认值是 src 参数的值。
支持 Markdown 或者 HTML 格式。
caption [可选] (第三个位置参数)
图片标题。
支持 Markdown 或者 HTML 格式。
title [可选]
当悬停在图片上会显示的提示。
class [可选]
HTML figure 标签的 class 属性。
src_s [可选]
图片缩略图的 URL，用在画廊模式中，默认值是 src 参数的值。
src_l [可选]
高清图片的 URL，用在画廊模式中, 默认值是 src 参数的值。
height [可选]
图片的 height 属性。
width [可选]
图片的 width 属性。
linked [可选]
图片是否需要被链接，默认值是 true。
rel [可选]
HTML a 标签的 rel 补充属性，仅在 linked 属性设置成 true 时有效。

1
{{< image src="/images/pexels.jpg" caption="Lighthouse (`image`)" src_s="/images/pexels-small.jpg" src_l="/images/pexels-large.jpg" >}}

mermaid

mermaid 是一个可以帮助你在文章中生成图表和流程图的库，类似 Markdown 的语法。

流程图

1
2
3
4
5
6
7
{{< mermaid >}}
graph LR;
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
{{< /mermaid >}}

时序图

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{{< 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 >}}

甘特图

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{{< mermaid >}}
gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid
    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2               :         des4, after des3, 5d
    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
{{< /mermaid >}}

状态图

1
2
3
4
5
6
7
8
9
{{< mermaid >}}
stateDiagram
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
{{< /mermaid >}}

Git图

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{{< mermaid >}}
gitGraph:
options
{
    "nodeSpacing": 100,
    "nodeRadius": 10
}
end
    commit
    branch newbranch
    checkout newbranch
    commit
    commit
    checkout master
    commit
    commit
    merge newbranch
{{< /mermaid >}}

饼图

1
2
3
4
5
6
{{< mermaid >}}
pie
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
{{< /mermaid >}}

echarts

ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图， treemap，旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

echarts shortcode 还有以下命名参数:

width [可选] (第一个位置参数)
数据可视化的宽度，默认值是 100%。
height [可选] (第二个位置参数)
数据可视化的高度，默认值是 30rem。

一个 JSON 格式的 echarts 示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
{{< echarts >}}
{
  "title": {
    "text": "折线统计图",
    "top": "2%",
    "left": "center"
  },
  "tooltip": {
    "trigger": "axis"
  },
  "legend": {
    "data": ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
    "top": "10%"
  },
  "grid": {
    "left": "5%",
    "right": "5%",
    "bottom": "5%",
    "top": "20%",
    "containLabel": true
  },
  "toolbox": {
    "feature": {
      "saveAsImage": {
        "title": "保存为图片"
      }
    }
  },
  "xAxis": {
    "type": "category",
    "boundaryGap": false,
    "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
  },
  "yAxis": {
    "type": "value"
  },
  "series": [
    {
      "name": "邮件营销",
      "type": "line",
      "stack": "总量",
      "data": [120, 132, 101, 134, 90, 230, 210]
    },
    {
      "name": "联盟广告",
      "type": "line",
      "stack": "总量",
      "data": [220, 182, 191, 234, 290, 330, 310]
    },
    {
      "name": "视频广告",
      "type": "line",
      "stack": "总量",
      "data": [150, 232, 201, 154, 190, 330, 410]
    },
    {
      "name": "直接访问",
      "type": "line",
      "stack": "总量",
      "data": [320, 332, 301, 334, 390, 330, 320]
    },
    {
      "name": "搜索引擎",
      "type": "line",
      "stack": "总量",
      "data": [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
}
{{< /echarts >}}

一个 YAML 格式的 echarts 示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
{{< echarts >}}
title:
    text: 折线统计图
    top: 2%
    left: center
tooltip:
    trigger: axis
legend:
    data:
        - 邮件营销
        - 联盟广告
        - 视频广告
        - 直接访问
        - 搜索引擎
    top: 10%
grid:
    left: 5%
    right: 5%
    bottom: 5%
    top: 20%
    containLabel: true
toolbox:
    feature:
        saveAsImage:
            title: 保存为图片
xAxis:
    type: category
    boundaryGap: false
    data:
        - 周一
        - 周二
        - 周三
        - 周四
        - 周五
        - 周六
        - 周日
yAxis:
    type: value
series:
    - name: 邮件营销
      type: line
      stack: 总量
      data:
          - 120
          - 132
          - 101
          - 134
          - 90
          - 230
          - 210
    - name: 联盟广告
      type: line
      stack: 总量
      data:
          - 220
          - 182
          - 191
          - 234
          - 290
          - 330
          - 310
    - name: 视频广告
      type: line
      stack: 总量
      data:
          - 150
          - 232
          - 201
          - 154
          - 190
          - 330
          - 410
    - name: 直接访问
      type: line
      stack: 总量
      data:
          - 320
          - 332
          - 301
          - 334
          - 390
          - 330
          - 320
    - name: 搜索引擎
      type: line
      stack: 总量
      data:
          - 820
          - 932
          - 901
          - 934
          - 1290
          - 1330
          - 1320
{{< /echarts >}}

一个 TOML 格式的 echarts 示例：

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
{{< echarts >}}
[title]
text = "折线统计图"
top = "2%"
left = "center"

[tooltip]
trigger = "axis"

[legend]
data = [
  "邮件营销",
  "联盟广告",
  "视频广告",
  "直接访问",
  "搜索引擎"
]
top = "10%"

[grid]
left = "5%"
right = "5%"
bottom = "5%"
top = "20%"
containLabel = true

[toolbox]
[toolbox.feature]
[toolbox.feature.saveAsImage]
title = "保存为图片"

[xAxis]
type = "category"
boundaryGap = false
data = [
  "周一",
  "周二",
  "周三",
  "周四",
  "周五",
  "周六",
  "周日"
]

[yAxis]
type = "value"

[[series]]
name = "邮件营销"
type = "line"
stack = "总量"
data = [
  120.0,
  132.0,
  101.0,
  134.0,
  90.0,
  230.0,
  210.0
]

[[series]]
name = "联盟广告"
type = "line"
stack = "总量"
data = [
  220.0,
  182.0,
  191.0,
  234.0,
  290.0,
  330.0,
  310.0
]

[[series]]
name = "视频广告"
type = "line"
stack = "总量"
data = [
  150.0,
  232.0,
  201.0,
  154.0,
  190.0,
  330.0,
  410.0
]

[[series]]
name = "直接访问"
type = "line"
stack = "总量"
data = [
  320.0,
  332.0,
  301.0,
  334.0,
  390.0,
  330.0,
  320.0
]

[[series]]
name = "搜索引擎"
type = "line"
stack = "总量"
data = [
  820.0,
  932.0,
  901.0,
  934.0,
  1290.0,
  1330.0,
  1320.0
]
{{< /echarts >}}

mapbox

mapbox shortcode 有以下命名参数来使用 Mapbox GL JS：

lng [必需] (第一个位置参数)
地图初始中心点的经度，以度为单位。
lat [必需] (第二个位置参数)
地图初始中心点的纬度，以度为单位。
zoom [可选] (第三个位置参数)
地图的初始缩放级别，默认值是 10。
marked [可选] (第四个位置参数)
是否在地图的初始中心点添加图钉，默认值是 true。
light-style [可选] (第五个位置参数)
浅色主题的地图样式。
dark-style [可选] (第六个位置参数)
深色主题的地图样式。
navigation [可选]
是否添加 NavigationControl。
geolocate [可选]
是否添加 GeolocateControl。
scale [可选]
是否添加 ScaleControl。
fullscreen [可选]
是否添加 FullscreenControl。
width [可选]
地图的宽度，默认值是 100%。
height [可选]
地图的高度，默认值是 20rem。

1
2
3
{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1" >}}
或者
{{< mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/streets-zh-v1" >}}

music

自定义音乐URL

music shortcode 有以下命名参数来使用自定义音乐 URL：

server [必需]
音乐的链接。
type [可选]
音乐的名称。
artist [可选]
音乐的创作者。
cover [可选]
音乐的封面链接。

1
{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}

音乐平台URL

auto [必需]] (第一个位置参数)
用来自动识别的音乐平台 URL, 支持 netease, tencent 和 xiami 平台。歌单播放形式。

1
2
3
{{< music auto="https://music.163.com/#/playlist?id=2829816518" >}}
或者
{{< music "https://music.163.com/#/playlist?id=2829816518" >}}

自定义音乐平台，类型和ID

server [必需] (第一个位置参数)
[netease, tencent, kugou, xiami, baidu]
音乐平台。
type [必需] (第二个位置参数)
[song, playlist, album, search, artist]
音乐类型。
id [必需] (第三个位置参数)
歌曲 ID，或者播放列表 ID，或者专辑 ID，或者搜索关键词，或者创作者 ID。

1
2
3
{{< music server="netease" type="song" id="1446764662" >}}
或者
{{< music netease song 1446764662 >}}

可选参数

theme [可选]
音乐播放器的主题色，默认值是 #448aff。
fixed [可选]
是否开启固定模式，默认值是 false。
mini [可选]
是否开启迷你模式，默认值是 false。
autoplay [可选]
是否自动播放音乐，默认值是 false。
volume [可选]
第一次打开播放器时的默认音量，会被保存在浏览器缓存中，默认值是 0.7。
mutex [可选]
是否自动暂停其它播放器，默认值是 true。

此外，针对歌单形式的音乐，还有以下可选参数：

loop [可选]
[all, one, none]
音乐列表的循环模式，默认值是 none。
order [可选]
[list, random]
音乐列表的播放顺序，默认值是 list。
list-folded [可选]
初次打开的时候音乐列表是否折叠，默认值是 false。
list-max-height [可选]
音乐列表的最大高度，默认值是 340px。

bilibili

只有1P的视频

1
2
3
{{< bilibili BV1f4411M7QC >}}
或者
{{< bilibili id=BV1f4411M7QC >}}

有多P的视频，则需要制定集数P

1
2
3
{{< bilibili BV1TJ411C7An 3 >}}
或者
{{< bilibili id=BV1TJ411C7An p=3 >}}

typeit

提供打字动画。

普通内容

1
2
3
{{< typeit >}}
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
{{< /typeit >}}

代码内容

通过使用参数 code 指定语言类型实现语法高亮。

1
2
3
4
5
6
7
{{< typeit code=java >}}
public class HelloWorld {
    public static void main(String []args) {
        System.out.println("Hello World");
    }
}
{{< /typeit >}}

分组内容

1
2
3
4
5
6
7
{{< typeit group=paragraph >}}
**首先**, 这个段落开始
{{< /typeit >}}

{{< typeit group=paragraph >}}
**然后**, 这个段落开始
{{< /typeit >}}

目录

Shortcode

内置Shortcodes

figure

lake

gist

highlight

ref和relref

主题Shortcodes

style

link

admonition

image

mermaid

echarts

mapbox

music

bilibili

typeit

参考链接