diff --git a/config.toml b/config.toml
index 0c6b712..7f09c72 100644
--- a/config.toml
+++ b/config.toml
@@ -314,7 +314,7 @@
copy = true
# the maximum number of lines of displayed code by default
# 默认展开显示的代码行数
- maxShownLines = 10
+ maxShownLines = 50
# KaTeX mathematical formulas config (KaTeX https://katex.org/)
# KaTeX 数学公式配置 (KaTeX https://katex.org/)
[params.page.math]
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 9197345..98e47dc 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -391,7 +391,7 @@ enableEmoji = true
copy = true
# the maximum number of lines of displayed code by default
# 默认展开显示的代码行数
- maxShownLines = 10
+ maxShownLines = 50
# KaTeX mathematical formulas config (KaTeX https://katex.org/)
# KaTeX 数学公式配置 (KaTeX https://katex.org/)
[params.page.math]
diff --git a/exampleSite/content/posts/emoji-support/index.en.md b/exampleSite/content/posts/emoji-support/index.en.md
index 0699e98..e39e0ad 100644
--- a/exampleSite/content/posts/emoji-support/index.en.md
+++ b/exampleSite/content/posts/emoji-support/index.en.md
@@ -7,7 +7,7 @@ draft: false
author: "Dillon"
authorLink: "https://dillonzq.com"
description: "Guide to emoji usage in Hugo and LoveIt."
-images: ["featured-image.png"]
+images: ["featured-image.jpg"]
resources:
- name: "featured-image"
src: "featured-image.jpg"
diff --git a/exampleSite/content/posts/emoji-support/index.zh-cn.md b/exampleSite/content/posts/emoji-support/index.zh-cn.md
index 31c0310..8aebd09 100644
--- a/exampleSite/content/posts/emoji-support/index.zh-cn.md
+++ b/exampleSite/content/posts/emoji-support/index.zh-cn.md
@@ -7,7 +7,7 @@ draft: false
author: "Dillon"
authorLink: "https://dillonzq.com"
description: "Hugo 和 LoveIt 中的 Emoji 的用法指南."
-images: ["featured-image.png"]
+images: ["featured-image.jpg"]
resources:
- name: "featured-image"
src: "featured-image.jpg"
diff --git a/exampleSite/content/posts/theme-documentation-basics/index.en.md b/exampleSite/content/posts/theme-documentation-basics/index.en.md
index 721241b..3d830fb 100644
--- a/exampleSite/content/posts/theme-documentation-basics/index.en.md
+++ b/exampleSite/content/posts/theme-documentation-basics/index.en.md
@@ -7,7 +7,7 @@ draft: false
author: "Dillon"
authorLink: "https://dillonzq.com"
description: "Discover what the Hugo - LoveIt theme is all about and the core-concepts behind it."
-images: ["featured-image.png"]
+images: ["featured-image.jpg"]
resources:
- name: "featured-image"
src: "featured-image.jpg"
@@ -442,7 +442,7 @@ Please open the code block below to view the complete sample configuration :(far
# whether to show the copy button of the code block
copy = true
# the maximum number of lines of displayed code by default
- maxShownLines = 10
+ maxShownLines = 50
# {{< version 0.2.0 >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config
[params.page.mapbox]
# access token of Mapbox GL JS
@@ -465,10 +465,10 @@ Please open the code block below to view the complete sample configuration :(far
Twitter = true
Facebook = true
Linkedin = false
- Whatsapp = true
+ Whatsapp = false
Pinterest = false
Tumblr = false
- HackerNews = false
+ HackerNews = true
Reddit = false
VK = false
Buffer = false
@@ -476,16 +476,12 @@ Please open the code block below to view the complete sample configuration :(far
Line = true
Instapaper = false
Pocket = false
- Digg = false
- Stumbleupon = false
Flipboard = false
Weibo = true
- Renren = false
- Myspace = true
- Blogger = true
+ Blogger = false
Baidu = false
Odnoklassniki = false
- Evernote = true
+ Evernote = false
Skype = false
Trello = false
Mix = false
diff --git a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
index 67e8911..a071d8d 100644
--- a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
+++ b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
@@ -7,7 +7,7 @@ draft: false
author: "Dillon"
authorLink: "https://dillonzq.com"
description: "探索 Hugo - LoveIt 主题的全部内容和背后的核心概念."
-images: ["featured-image.png"]
+images: ["featured-image.jpg"]
resources:
- name: "featured-image"
src: "featured-image.jpg"
@@ -436,7 +436,7 @@ hugo
# 是否显示代码块的复制按钮
copy = true
# 默认展开显示的代码行数
- maxShownLines = 10
+ maxShownLines = 50
# {{< version 0.2.0 changed >}} {{< link "https://katex.org/" KaTeX >}} 数学公式
[params.page.math]
enable = true
@@ -472,10 +472,10 @@ hugo
Twitter = true
Facebook = true
Linkedin = false
- Whatsapp = true
+ Whatsapp = false
Pinterest = false
Tumblr = false
- HackerNews = false
+ HackerNews = true
Reddit = false
VK = false
Buffer = false
@@ -483,16 +483,12 @@ hugo
Line = true
Instapaper = false
Pocket = false
- Digg = false
- Stumbleupon = false
Flipboard = false
Weibo = true
- Renren = false
- Myspace = true
- Blogger = true
+ Blogger = false
Baidu = false
Odnoklassniki = false
- Evernote = true
+ Evernote = false
Skype = false
Trello = false
Mix = false
diff --git a/exampleSite/content/posts/theme-documentation-bilibili-shortcode/featured-image.jpg b/exampleSite/content/posts/theme-documentation-bilibili-shortcode/featured-image.jpg
new file mode 100644
index 0000000..90dbcb0
Binary files /dev/null and b/exampleSite/content/posts/theme-documentation-bilibili-shortcode/featured-image.jpg differ
diff --git a/exampleSite/content/posts/theme-documentation-bilibili-shortcode/index.en.md b/exampleSite/content/posts/theme-documentation-bilibili-shortcode/index.en.md
new file mode 100644
index 0000000..c82d804
--- /dev/null
+++ b/exampleSite/content/posts/theme-documentation-bilibili-shortcode/index.en.md
@@ -0,0 +1,65 @@
+---
+weight: 9
+title: "Theme Documentation - bilibili Shortcode"
+date: 2020-03-03T11:29:41+08:00
+lastmod: 2020-03-03T12:29:41+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "The bilibili shortcode embeds a responsive video player for bilibili videos."
+images: ["featured-image.jpg"]
+resources:
+- name: "featured-image"
+ src: "featured-image.jpg"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+
+toc:
+ enable: false
+---
+
+{{< version 0.2.0 changed >}}
+
+The `bilibili` shortcode embeds a responsive video player for bilibili videos.
+
+
+
+When the video only has one part, only the BV `id` of the video is required, e.g.:
+
+```code
+https://www.bilibili.com/video/BV1Sx411T7QQ
+```
+
+Example `bilibili` input:
+
+```markdown
+{{}}
+Or
+{{}}
+```
+
+The rendered output looks like this:
+
+{{< bilibili id=BV1Sx411T7QQ >}}
+
+When the video has multiple parts, in addition to the BV `id` of the video,
+`p` is also required, whose default value is `1`, e.g.:
+
+```code
+https://www.bilibili.com/video/BV1TJ411C7An?p=3
+```
+
+Example `bilibili` input with `p`:
+
+```markdown
+{{}}
+Or
+{{}}
+```
+
+The rendered output looks like this:
+
+{{< bilibili id=BV1TJ411C7An p=3 >}}
diff --git a/exampleSite/content/posts/theme-documentation-bilibili-shortcode/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-bilibili-shortcode/index.zh-cn.md
new file mode 100644
index 0000000..d01611b
--- /dev/null
+++ b/exampleSite/content/posts/theme-documentation-bilibili-shortcode/index.zh-cn.md
@@ -0,0 +1,64 @@
+---
+weight: 9
+title: "主题文档 - bilibili Shortcode"
+date: 2020-03-03T11:29:41+08:00
+lastmod: 2020-03-03T12:29:41+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "bilibili shortcode 提供了一个内嵌的用来播放 bilibili 视频的响应式播放器."
+images: ["featured-image.jpg"]
+resources:
+- name: "featured-image"
+ src: "featured-image.jpg"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+
+toc:
+ enable: false
+---
+
+{{< version 0.2.0 changed >}}
+
+`bilibili` shortcode 提供了一个内嵌的用来播放 bilibili 视频的响应式播放器.
+
+
+
+如果视频只有一个部分, 则仅需要视频的 BV `id`, 例如:
+
+```code
+https://www.bilibili.com/video/BV1Sx411T7QQ
+```
+
+一个 `bilibili` 示例:
+
+```markdown
+{{}}
+或者
+{{}}
+```
+
+呈现的输出效果如下:
+
+{{< bilibili id=BV1Sx411T7QQ >}}
+
+如果视频包含多个部分, 则除了视频的 BV `id` 之外, 还需要 `p`, 默认值为 `1`, 例如:
+
+```code
+https://www.bilibili.com/video/BV1TJ411C7An?p=3
+```
+
+一个带有 `p` 参数的 `bilibili` 示例:
+
+```markdown
+{{}}
+或者
+{{}}
+```
+
+呈现的输出效果如下:
+
+{{< bilibili id=BV1TJ411C7An p=3 >}}
diff --git a/exampleSite/content/posts/theme-documentation-content/index.en.md b/exampleSite/content/posts/theme-documentation-content/index.en.md
index 5dcf0ca..d37d1aa 100644
--- a/exampleSite/content/posts/theme-documentation-content/index.en.md
+++ b/exampleSite/content/posts/theme-documentation-content/index.en.md
@@ -7,7 +7,7 @@ draft: false
author: "Dillon"
authorLink: "https://dillonzq.com"
description: "Find out how to create and organize your content quickly and intuitively in LoveIt theme."
-images: ["featured-image.png"]
+images: ["featured-image.jpg"]
resources:
- name: "featured-image"
src: "featured-image.jpg"
@@ -269,7 +269,7 @@ therefore, additional escape character expressions are required for these places
* `\]` -> `\\]`
* `\\` -> `\\\\`
-**LoveIt** theme supports `raw` shortcode to avoid these escape characters,
+**LoveIt** theme supports [`raw` shortcode](../theme-documentation-extended-shortcodes#12-raw) to avoid these escape characters,
which helps you write raw mathematical formula content.
Example `raw` input:
diff --git a/exampleSite/content/posts/theme-documentation-content/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-content/index.zh-cn.md
index 3067dd6..84b97ad 100644
--- a/exampleSite/content/posts/theme-documentation-content/index.zh-cn.md
+++ b/exampleSite/content/posts/theme-documentation-content/index.zh-cn.md
@@ -7,7 +7,7 @@ draft: false
author: "Dillon"
authorLink: "https://dillonzq.com"
description: "了解如何在 LoveIt 主题中快速, 直观地创建和组织内容."
-images: ["featured-image.png"]
+images: ["featured-image.jpg"]
resources:
- name: "featured-image"
src: "featured-image.jpg"
@@ -267,7 +267,7 @@ resources:
* `\]` -> `\\]`
* `\\` -> `\\\\`
-**LoveIt** 主题支持 `raw` shortcode 以避免这些转义字符,
+**LoveIt** 主题支持 [`raw` shortcode](../theme-documentation-extended-shortcodes#12-raw) 以避免这些转义字符,
它可以帮助您编写原始数学公式内容.
一个 `raw` 示例:
diff --git a/exampleSite/content/posts/theme-documentation-echarts-shortcode/featured-image.jpg b/exampleSite/content/posts/theme-documentation-echarts-shortcode/featured-image.jpg
new file mode 100644
index 0000000..5554bc1
Binary files /dev/null and b/exampleSite/content/posts/theme-documentation-echarts-shortcode/featured-image.jpg differ
diff --git a/exampleSite/content/posts/theme-documentation-echarts-shortcode/index.en.md b/exampleSite/content/posts/theme-documentation-echarts-shortcode/index.en.md
new file mode 100644
index 0000000..bc9888f
--- /dev/null
+++ b/exampleSite/content/posts/theme-documentation-echarts-shortcode/index.en.md
@@ -0,0 +1,414 @@
+---
+weight: 6
+title: "Theme Documentation - echarts Shortcode"
+date: 2020-03-03T14:29:41+08:00
+lastmod: 2020-03-03T14:29:41+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "The echarts shortcode supports data visualization in Hugo with ECharts library."
+images: ["featured-image.jpg"]
+resources:
+- name: "featured-image"
+ src: "featured-image.jpg"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+
+toc:
+ enable: false
+code:
+ maxShownLines: 70
+---
+
+The `echarts` shortcode supports data visualization in Hugo with [ECharts](https://echarts.apache.org/) library.
+
+
+
+**ECharts** is a library helping you to generate interactive data visualization.
+
+The basic chart types ECharts supports include [line series](https://echarts.apache.org/en/option.html#series-line), [bar series](https://echarts.apache.org/en/option.html#series-line), [scatter series](https://echarts.apache.org/en/option.html#series-scatter), [pie charts](https://echarts.apache.org/en/option.html#series-pie), [candle-stick series](https://echarts.apache.org/en/option.html#series-candlestick), [boxplot series](https://echarts.apache.org/en/option.html#series-boxplot) for statistics, [map series](https://echarts.apache.org/en/option.html#series-map), [heatmap series](https://echarts.apache.org/en/option.html#series-heatmap), [lines series](https://echarts.apache.org/en/option.html#series-lines) for directional information, [graph series](https://echarts.apache.org/en/option.html#series-graph) for relationships, [treemap series](https://echarts.apache.org/en/option.html#series-treemap), [sunburst series](https://echarts.apache.org/en/option.html#series-sunburst), [parallel series](https://echarts.apache.org/en/option.html#series-parallel) for multi-dimensional data, [funnel series](https://echarts.apache.org/en/option.html#series-funnel), [gauge series](https://echarts.apache.org/en/option.html#series-gauge). And it's extremely easy to create a combinition of them with ECharts.
+
+Just insert your ECharts option in `JSON`/`YAML`/`TOML` format in the `echarts` shortcode and that’s it.
+
+Example `echarts` input in `JSON` format:
+
+```json
+{{}}
+{
+ "title": {
+ "text": "Summary Line Chart",
+ "top": "2%",
+ "left": "center"
+ },
+ "tooltip": {
+ "trigger": "axis"
+ },
+ "legend": {
+ "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"],
+ "top": "10%"
+ },
+ "grid": {
+ "left": "5%",
+ "right": "5%",
+ "bottom": "5%",
+ "top": "20%",
+ "containLabel": true
+ },
+ "toolbox": {
+ "feature": {
+ "saveAsImage": {
+ "title": "Save as Image"
+ }
+ }
+ },
+ "xAxis": {
+ "type": "category",
+ "boundaryGap": false,
+ "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
+ },
+ "yAxis": {
+ "type": "value"
+ },
+ "series": [
+ {
+ "name": "Email Marketing",
+ "type": "line",
+ "stack": "Total",
+ "data": [120, 132, 101, 134, 90, 230, 210]
+ },
+ {
+ "name": "Affiliate Advertising",
+ "type": "line",
+ "stack": "Total",
+ "data": [220, 182, 191, 234, 290, 330, 310]
+ },
+ {
+ "name": "Video Advertising",
+ "type": "line",
+ "stack": "Total",
+ "data": [150, 232, 201, 154, 190, 330, 410]
+ },
+ {
+ "name": "Direct View",
+ "type": "line",
+ "stack": "Total",
+ "data": [320, 332, 301, 334, 390, 330, 320]
+ },
+ {
+ "name": "Search Engine",
+ "type": "line",
+ "stack": "Total",
+ "data": [820, 932, 901, 934, 1290, 1330, 1320]
+ }
+ ]
+}
+{{}}
+```
+
+The same in `YAML` format:
+
+```yaml
+{{}}
+title:
+ text: Summary Line Chart
+ top: 2%
+ left: center
+tooltip:
+ trigger: axis
+legend:
+ data:
+ - Email Marketing
+ - Affiliate Advertising
+ - Video Advertising
+ - Direct View
+ - Search Engine
+ top: 10%
+grid:
+ left: 5%
+ right: 5%
+ bottom: 5%
+ top: 20%
+ containLabel: true
+toolbox:
+ feature:
+ saveAsImage:
+ title: Save as Image
+xAxis:
+ type: category
+ boundaryGap: false
+ data:
+ - Monday
+ - Tuesday
+ - Wednesday
+ - Thursday
+ - Friday
+ - Saturday
+ - Sunday
+yAxis:
+ type: value
+series:
+ - name: Email Marketing
+ type: line
+ stack: Total
+ data:
+ - 120
+ - 132
+ - 101
+ - 134
+ - 90
+ - 230
+ - 210
+ - name: Affiliate Advertising
+ type: line
+ stack: Total
+ data:
+ - 220
+ - 182
+ - 191
+ - 234
+ - 290
+ - 330
+ - 310
+ - name: Video Advertising
+ type: line
+ stack: Total
+ data:
+ - 150
+ - 232
+ - 201
+ - 154
+ - 190
+ - 330
+ - 410
+ - name: Direct View
+ type: line
+ stack: Total
+ data:
+ - 320
+ - 332
+ - 301
+ - 334
+ - 390
+ - 330
+ - 320
+ - name: Search Engine
+ type: line
+ stack: Total
+ data:
+ - 820
+ - 932
+ - 901
+ - 934
+ - 1290
+ - 1330
+ - 1320
+{{}}
+```
+
+The same in `TOML` format:
+
+```toml
+{{}}
+[title]
+text = "Summary Line Chart"
+top = "2%"
+left = "center"
+
+[tooltip]
+trigger = "axis"
+
+[legend]
+data = [
+ "Email Marketing",
+ "Affiliate Advertising",
+ "Video Advertising",
+ "Direct View",
+ "Search Engine"
+]
+top = "10%"
+
+[grid]
+left = "5%"
+right = "5%"
+bottom = "5%"
+top = "20%"
+containLabel = true
+
+[toolbox]
+[toolbox.feature]
+[toolbox.feature.saveAsImage]
+title = "Save as Image"
+
+[xAxis]
+type = "category"
+boundaryGap = false
+data = [
+ "Monday",
+ "Tuesday",
+ "Wednesday",
+ "Thursday",
+ "Friday",
+ "Saturday",
+ "Sunday"
+]
+
+[yAxis]
+type = "value"
+
+[[series]]
+name = "Email Marketing"
+type = "line"
+stack = "Total"
+data = [
+ 120.0,
+ 132.0,
+ 101.0,
+ 134.0,
+ 90.0,
+ 230.0,
+ 210.0
+]
+
+[[series]]
+name = "Affiliate Advertising"
+type = "line"
+stack = "Total"
+data = [
+ 220.0,
+ 182.0,
+ 191.0,
+ 234.0,
+ 290.0,
+ 330.0,
+ 310.0
+]
+
+[[series]]
+name = "Video Advertising"
+type = "line"
+stack = "Total"
+data = [
+ 150.0,
+ 232.0,
+ 201.0,
+ 154.0,
+ 190.0,
+ 330.0,
+ 410.0
+]
+
+[[series]]
+name = "Direct View"
+type = "line"
+stack = "Total"
+data = [
+ 320.0,
+ 332.0,
+ 301.0,
+ 334.0,
+ 390.0,
+ 330.0,
+ 320.0
+]
+
+[[series]]
+name = "Search Engine"
+type = "line"
+stack = "Total"
+data = [
+ 820.0,
+ 932.0,
+ 901.0,
+ 934.0,
+ 1290.0,
+ 1330.0,
+ 1320.0
+]
+{{}}
+```
+
+The rendered output looks like this:
+
+{{< echarts >}}
+{
+ "title": {
+ "text": "Summary Line Chart",
+ "top": "2%",
+ "left": "center"
+ },
+ "tooltip": {
+ "trigger": "axis"
+ },
+ "legend": {
+ "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"],
+ "top": "10%"
+ },
+ "grid": {
+ "left": "5%",
+ "right": "5%",
+ "bottom": "5%",
+ "top": "20%",
+ "containLabel": true
+ },
+ "toolbox": {
+ "feature": {
+ "saveAsImage": {
+ "title": "Save as Image"
+ }
+ }
+ },
+ "xAxis": {
+ "type": "category",
+ "boundaryGap": false,
+ "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
+ },
+ "yAxis": {
+ "type": "value"
+ },
+ "series": [
+ {
+ "name": "Email Marketing",
+ "type": "line",
+ "stack": "Total",
+ "data": [120, 132, 101, 134, 90, 230, 210]
+ },
+ {
+ "name": "Affiliate Advertising",
+ "type": "line",
+ "stack": "Total",
+ "data": [220, 182, 191, 234, 290, 330, 310]
+ },
+ {
+ "name": "Video Advertising",
+ "type": "line",
+ "stack": "Total",
+ "data": [150, 232, 201, 154, 190, 330, 410]
+ },
+ {
+ "name": "Direct View",
+ "type": "line",
+ "stack": "Total",
+ "data": [320, 332, 301, 334, 390, 330, 320]
+ },
+ {
+ "name": "Search Engine",
+ "type": "line",
+ "stack": "Total",
+ "data": [820, 932, 901, 934, 1290, 1330, 1320]
+ }
+ ]
+}
+{{< /echarts >}}
+
+The `echarts` shortcode has also the following named parameters:
+
+* **width** *[optional]* (**first** positional parameter)
+
+ {{< version 0.2.0 >}} Width of the data visualization, default value is `100%`.
+
+* **height** *[optional]* (**second** positional parameter)
+
+ {{< version 0.2.0 >}} Height of the data visualization, default value is `30rem`.
diff --git a/exampleSite/content/posts/theme-documentation-echarts-shortcode/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-echarts-shortcode/index.zh-cn.md
new file mode 100644
index 0000000..cbed268
--- /dev/null
+++ b/exampleSite/content/posts/theme-documentation-echarts-shortcode/index.zh-cn.md
@@ -0,0 +1,414 @@
+---
+weight: 6
+title: "主题文档 - echarts Shortcode"
+date: 2020-03-03T14:29:59+08:00
+lastmod: 2020-03-03T14:29:59+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "echarts shortcode 使用 ECharts 库提供数据可视化的功能."
+images: ["featured-image.jpg"]
+resources:
+- name: "featured-image"
+ src: "featured-image.jpg"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+
+toc:
+ enable: false
+code:
+ maxShownLines: 70
+---
+
+`echarts` shortcode 使用 [ECharts](https://echarts.apache.org/) 库提供数据可视化的功能.
+
+
+
+**ECharts** 是一个帮助你生成交互式数据可视化的库.
+
+ECharts 提供了常规的 [折线图](https://echarts.apache.org/zh/option.html#series-line), [柱状图](https://echarts.apache.org/zh/option.html#series-line), [散点图](https://echarts.apache.org/zh/option.html#series-scatter), [饼图](https://echarts.apache.org/zh/option.html#series-pie), [K线图](https://echarts.apache.org/zh/option.html#series-candlestick), 用于统计的 [盒形图](https://echarts.apache.org/zh/option.html#series-boxplot), 用于地理数据可视化的 [地图](https://echarts.apache.org/zh/option.html#series-map), [热力图](https://echarts.apache.org/zh/option.html#series-heatmap), [线图](https://echarts.apache.org/zh/option.html#series-lines), 用于关系数据可视化的 [关系图](https://echarts.apache.org/zh/option.html#series-graph), [treemap](https://echarts.apache.org/zh/option.html#series-treemap), [旭日图](https://echarts.apache.org/zh/option.html#series-sunburst), 多维数据可视化的 [平行坐标](https://echarts.apache.org/zh/option.html#series-parallel), 还有用于 BI 的 [漏斗图](https://echarts.apache.org/zh/option.html#series-funnel), [仪表盘](https://echarts.apache.org/zh/option.html#series-gauge), 并且支持图与图之间的混搭.
+
+只需在 `echarts` shortcode 中以 `JSON`/`YAML`/`TOML`格式插入 ECharts 选项即可.
+
+一个 `JSON` 格式的 `echarts` 示例:
+
+```json
+{{}}
+{
+ "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]
+ }
+ ]
+}
+{{}}
+```
+
+一个 `YAML` 格式的 `echarts` 示例:
+
+```yaml
+{{}}
+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
+{{}}
+```
+
+一个 `TOML` 格式的 `echarts` 示例:
+
+```toml
+{{}}
+[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 >}}
+{
+ "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 >}}
+
+`echarts` shortcode 还有以下命名参数:
+
+* **width** *[可选]* (**第一个**位置参数)
+
+ {{< version 0.2.0 >}} 数据可视化的宽度, 默认值是 `100%`.
+
+* **height** *[可选]* (**第二个**位置参数)
+
+ {{< version 0.2.0 >}} 数据可视化的高度, 默认值是 `30rem`.
diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md
index 0e32f60..c7755df 100644
--- a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md
+++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md
@@ -7,7 +7,7 @@ draft: false
author: "Dillon"
authorLink: "https://dillonzq.com"
description: "LoveIt theme provides multiple shortcodes on top of built-in ones in Hugo."
-images: ["featured-image.png"]
+images: ["featured-image.jpg"]
resources:
- name: "featured-image"
src: "featured-image.jpg"
@@ -281,850 +281,29 @@ A **tip** banner
## 5 mermaid
-[mermaid](https://mermaidjs.github.io/) is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.
+The `mermaid` shortcode supports diagrams in Hugo with [Mermaid](https://mermaidjs.github.io/) library.
-Just insert your mermaid code in the `mermaid` shortcode and that’s it.
-
-### 5.1 Flowchart {#flowchart}
-
-Example **flowchart** `mermaid` input:
-
-```markdown
-{{}}
-graph LR;
- A[Hard edge] -->|Link text| B(Round edge)
- B --> C{Decision}
- C -->|One| D[Result one]
- C -->|Two| E[Result two]
-{{}}
-```
-
-The rendered output looks like this:
-
-{{< 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 >}}
-
-### 5.2 Sequence Diagram {#sequence-diagram}
-
-Example **sequence diagram** `mermaid` input:
-
-```markdown
-{{}}
-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!
-{{}}
-```
-
-The rendered output looks like this:
-
-{{< 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!
-{{< /mermaid >}}
-
-### 5.3 GANTT {#gantt}
-
-Example **GANTT** `mermaid` input:
-
-```markdown
-{{}}
-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
-{{}}
-```
-
-The rendered output looks like this:
-
-{{< 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 >}}
-
-### 5.4 Class Diagram {#class-diagram}
-
-Example **class diagram** `mermaid` input:
-
-```markdown
-{{}}
-classDiagram
- Class01 <|-- AveryLongClass : Cool
- Class03 *-- Class04
- Class05 o-- Class06
- Class07 .. Class08
- Class09 --> C2 : Where am i?
- Class09 --* C3
- Class09 --|> Class07
- Class07 : equals()
- Class07 : Object[] elementData
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 <--> C2: Cool label
-{{}}
-```
-
-The rendered output looks like this:
-
-{{< mermaid >}}
-classDiagram
- Class01 <|-- AveryLongClass : Cool
- Class03 *-- Class04
- Class05 o-- Class06
- Class07 .. Class08
- Class09 --> C2 : Where am i?
- Class09 --* C3
- Class09 --|> Class07
- Class07 : equals()
- Class07 : Object[] elementData
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 <--> C2: Cool label
-{{< /mermaid >}}
-
-### 5.5 State Diagram {#state-diagram}
-
-Example **state diagram** `mermaid` input:
-
-```markdown
-{{}}
-stateDiagram
- [*] --> Still
- Still --> [*]
- Still --> Moving
- Moving --> Still
- Moving --> Crash
- Crash --> [*]
-{{}}
-```
-
-The rendered output looks like this:
-
-{{< mermaid >}}
-stateDiagram
- [*] --> Still
- Still --> [*]
- Still --> Moving
- Moving --> Still
- Moving --> Crash
- Crash --> [*]
-{{< /mermaid >}}
-
-### 5.6 Git Graph {#git-graph}
-
-Example **git graph** `mermaid` input:
-
-```markdown
-{{}}
-gitGraph
- commit
- commit
- branch develop
- checkout develop
- commit
- commit
- checkout main
- merge develop
- commit
- commit
-{{}}
-```
-
-The rendered output looks like this:
-
-{{< mermaid >}}
-gitGraph
- commit
- commit
- branch develop
- checkout develop
- commit
- commit
- checkout main
- merge develop
- commit
- commit
-{{< /mermaid >}}
-
-### 5.7 Pie {#pie}
-
-Example **pie** `mermaid` input:
-
-```markdown
-{{}}
-pie
- "Dogs" : 386
- "Cats" : 85
- "Rats" : 15
-{{}}
-```
-
-The rendered output looks like this:
-
-{{< mermaid >}}
-pie
- "Dogs" : 386
- "Cats" : 85
- "Rats" : 15
-{{< /mermaid >}}
+The full documentation is provided in [Theme Documentation - mermaid Shortcode](../theme-documentation-mermaid-shortcode).
## 6 echarts
-[ECharts](https://echarts.apache.org/) is a library helping you to generate interactive data visualization.
+The `echarts` shortcode supports data visualization in Hugo with [ECharts](https://echarts.apache.org/) library.
-The basic chart types ECharts supports include [line series](https://echarts.apache.org/en/option.html#series-line), [bar series](https://echarts.apache.org/en/option.html#series-line), [scatter series](https://echarts.apache.org/en/option.html#series-scatter), [pie charts](https://echarts.apache.org/en/option.html#series-pie), [candle-stick series](https://echarts.apache.org/en/option.html#series-candlestick), [boxplot series](https://echarts.apache.org/en/option.html#series-boxplot) for statistics, [map series](https://echarts.apache.org/en/option.html#series-map), [heatmap series](https://echarts.apache.org/en/option.html#series-heatmap), [lines series](https://echarts.apache.org/en/option.html#series-lines) for directional information, [graph series](https://echarts.apache.org/en/option.html#series-graph) for relationships, [treemap series](https://echarts.apache.org/en/option.html#series-treemap), [sunburst series](https://echarts.apache.org/en/option.html#series-sunburst), [parallel series](https://echarts.apache.org/en/option.html#series-parallel) for multi-dimensional data, [funnel series](https://echarts.apache.org/en/option.html#series-funnel), [gauge series](https://echarts.apache.org/en/option.html#series-gauge). And it's extremely easy to create a combinition of them with ECharts.
-
-Just insert your ECharts option in `JSON`/`YAML`/`TOML` format in the `echarts` shortcode and that’s it.
-
-Example `echarts` input in `JSON` format:
-
-```json
-{{}}
-{
- "title": {
- "text": "Summary Line Chart",
- "top": "2%",
- "left": "center"
- },
- "tooltip": {
- "trigger": "axis"
- },
- "legend": {
- "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"],
- "top": "10%"
- },
- "grid": {
- "left": "5%",
- "right": "5%",
- "bottom": "5%",
- "top": "20%",
- "containLabel": true
- },
- "toolbox": {
- "feature": {
- "saveAsImage": {
- "title": "Save as Image"
- }
- }
- },
- "xAxis": {
- "type": "category",
- "boundaryGap": false,
- "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
- },
- "yAxis": {
- "type": "value"
- },
- "series": [
- {
- "name": "Email Marketing",
- "type": "line",
- "stack": "Total",
- "data": [120, 132, 101, 134, 90, 230, 210]
- },
- {
- "name": "Affiliate Advertising",
- "type": "line",
- "stack": "Total",
- "data": [220, 182, 191, 234, 290, 330, 310]
- },
- {
- "name": "Video Advertising",
- "type": "line",
- "stack": "Total",
- "data": [150, 232, 201, 154, 190, 330, 410]
- },
- {
- "name": "Direct View",
- "type": "line",
- "stack": "Total",
- "data": [320, 332, 301, 334, 390, 330, 320]
- },
- {
- "name": "Search Engine",
- "type": "line",
- "stack": "Total",
- "data": [820, 932, 901, 934, 1290, 1330, 1320]
- }
- ]
-}
-{{}}
-```
-
-The same in `YAML` format:
-
-```yaml
-{{}}
-title:
- text: Summary Line Chart
- top: 2%
- left: center
-tooltip:
- trigger: axis
-legend:
- data:
- - Email Marketing
- - Affiliate Advertising
- - Video Advertising
- - Direct View
- - Search Engine
- top: 10%
-grid:
- left: 5%
- right: 5%
- bottom: 5%
- top: 20%
- containLabel: true
-toolbox:
- feature:
- saveAsImage:
- title: Save as Image
-xAxis:
- type: category
- boundaryGap: false
- data:
- - Monday
- - Tuesday
- - Wednesday
- - Thursday
- - Friday
- - Saturday
- - Sunday
-yAxis:
- type: value
-series:
- - name: Email Marketing
- type: line
- stack: Total
- data:
- - 120
- - 132
- - 101
- - 134
- - 90
- - 230
- - 210
- - name: Affiliate Advertising
- type: line
- stack: Total
- data:
- - 220
- - 182
- - 191
- - 234
- - 290
- - 330
- - 310
- - name: Video Advertising
- type: line
- stack: Total
- data:
- - 150
- - 232
- - 201
- - 154
- - 190
- - 330
- - 410
- - name: Direct View
- type: line
- stack: Total
- data:
- - 320
- - 332
- - 301
- - 334
- - 390
- - 330
- - 320
- - name: Search Engine
- type: line
- stack: Total
- data:
- - 820
- - 932
- - 901
- - 934
- - 1290
- - 1330
- - 1320
-{{}}
-```
-
-The same in `TOML` format:
-
-```toml
-{{}}
-[title]
-text = "Summary Line Chart"
-top = "2%"
-left = "center"
-
-[tooltip]
-trigger = "axis"
-
-[legend]
-data = [
- "Email Marketing",
- "Affiliate Advertising",
- "Video Advertising",
- "Direct View",
- "Search Engine"
-]
-top = "10%"
-
-[grid]
-left = "5%"
-right = "5%"
-bottom = "5%"
-top = "20%"
-containLabel = true
-
-[toolbox]
-[toolbox.feature]
-[toolbox.feature.saveAsImage]
-title = "Save as Image"
-
-[xAxis]
-type = "category"
-boundaryGap = false
-data = [
- "Monday",
- "Tuesday",
- "Wednesday",
- "Thursday",
- "Friday",
- "Saturday",
- "Sunday"
-]
-
-[yAxis]
-type = "value"
-
-[[series]]
-name = "Email Marketing"
-type = "line"
-stack = "Total"
-data = [
- 120.0,
- 132.0,
- 101.0,
- 134.0,
- 90.0,
- 230.0,
- 210.0
-]
-
-[[series]]
-name = "Affiliate Advertising"
-type = "line"
-stack = "Total"
-data = [
- 220.0,
- 182.0,
- 191.0,
- 234.0,
- 290.0,
- 330.0,
- 310.0
-]
-
-[[series]]
-name = "Video Advertising"
-type = "line"
-stack = "Total"
-data = [
- 150.0,
- 232.0,
- 201.0,
- 154.0,
- 190.0,
- 330.0,
- 410.0
-]
-
-[[series]]
-name = "Direct View"
-type = "line"
-stack = "Total"
-data = [
- 320.0,
- 332.0,
- 301.0,
- 334.0,
- 390.0,
- 330.0,
- 320.0
-]
-
-[[series]]
-name = "Search Engine"
-type = "line"
-stack = "Total"
-data = [
- 820.0,
- 932.0,
- 901.0,
- 934.0,
- 1290.0,
- 1330.0,
- 1320.0
-]
-{{}}
-```
-
-The rendered output looks like this:
-
-{{< echarts >}}
-{
- "title": {
- "text": "Summary Line Chart",
- "top": "2%",
- "left": "center"
- },
- "tooltip": {
- "trigger": "axis"
- },
- "legend": {
- "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"],
- "top": "10%"
- },
- "grid": {
- "left": "5%",
- "right": "5%",
- "bottom": "5%",
- "top": "20%",
- "containLabel": true
- },
- "toolbox": {
- "feature": {
- "saveAsImage": {
- "title": "Save as Image"
- }
- }
- },
- "xAxis": {
- "type": "category",
- "boundaryGap": false,
- "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
- },
- "yAxis": {
- "type": "value"
- },
- "series": [
- {
- "name": "Email Marketing",
- "type": "line",
- "stack": "Total",
- "data": [120, 132, 101, 134, 90, 230, 210]
- },
- {
- "name": "Affiliate Advertising",
- "type": "line",
- "stack": "Total",
- "data": [220, 182, 191, 234, 290, 330, 310]
- },
- {
- "name": "Video Advertising",
- "type": "line",
- "stack": "Total",
- "data": [150, 232, 201, 154, 190, 330, 410]
- },
- {
- "name": "Direct View",
- "type": "line",
- "stack": "Total",
- "data": [320, 332, 301, 334, 390, 330, 320]
- },
- {
- "name": "Search Engine",
- "type": "line",
- "stack": "Total",
- "data": [820, 932, 901, 934, 1290, 1330, 1320]
- }
- ]
-}
-{{< /echarts >}}
-
-The `echarts` shortcode has also the following named parameters:
-
-* **width** *[optional]* (**first** positional parameter)
-
- {{< version 0.2.0 >}} Width of the data visualization, default value is `100%`.
-
-* **height** *[optional]* (**second** positional parameter)
-
- {{< version 0.2.0 >}} Height of the data visualization, default value is `30rem`.
+The full documentation is provided in [Theme Documentation - echarts Shortcode](../theme-documentation-echarts-shortcode).
## 7 mapbox
{{< version 0.2.0 >}}
-[Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) is a JavaScript library that uses WebGL to render interactive maps from [vector tiles](https://docs.mapbox.com/help/glossary/vector-tiles/) and [Mapbox styles](https://docs.mapbox.com/mapbox-gl-js/style-spec/).
+The `mapbox` shortcode supports interactive maps in Hugo with [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) library.
-The `mapbox` shortcode has the following named parameters to use Mapbox GL JS:
-
-* **lng** *[required]* (**first** positional parameter)
-
- Longitude of the inital centerpoint of the map, measured in degrees.
-
-* **lat** *[required]* (**second** positional parameter)
-
- Latitude of the inital centerpoint of the map, measured in degrees.
-
-* **zoom** *[optional]* (**third** positional parameter)
-
- The initial zoom level of the map, default value is `10`.
-
-* **marked** *[optional]* (**fourth** positional parameter)
-
- Whether to add a marker at the inital centerpoint of the map, default value is `true`.
-
-* **light-style** *[optional]* (**fifth** positional parameter)
-
- Style for the light theme, default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
-
-* **dark-style** *[optional]* (**sixth** positional parameter)
-
- Style for the dark theme, default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
-
-* **navigation** *[optional]*
-
- Whether to add [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
-
-* **geolocate** *[optional]*
-
- Whether to add [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
-
-* **scale** *[optional]*
-
- Whether to add [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api#scalecontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
-
-* **fullscreen** *[optional]*
-
- Whether to add [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api#fullscreencontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
-
-* **width** *[optional]*
-
- Width of the map, default value is `100%`.
-
-* **height** *[optional]*
-
- Height of the map, default value is `20rem`.
-
-Example simple `mapbox` input:
-
-```markdown
-{{}}
-Or
-{{}}
-```
-
-The rendered output looks like this:
-
-{{< mapbox 121.485 31.233 12 >}}
-
-Example `mapbox` input with the custom style:
-
-```markdown
-{{}}
-Or
-{{}}
-```
-
-The rendered output looks like this:
-
-{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4?optimize=true" "mapbox://styles/mapbox/navigation-preview-night-v4?optimize=true" >}}
+The full documentation is provided in [Theme Documentation - mapbox Shortcode](../theme-documentation-mapbox-shortcode).
## 8 music
-The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS).
+The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS) library.
-There are three ways to use it the `music` shortcode.
-
-### 8.1 Custom Music URL {#custom-music-url}
-
-{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
-
-The `music` shortcode has the following named parameters by custom music URL:
-
-* **server** *[required]*
-
- URL of the custom music.
-
-* **name** *[optional]*
-
- Name of the custom music.
-
-* **artist** *[optional]*
-
- Artist of the custom music.
-
-* **cover** *[required]*
-
- URL of the custom music cover.
-
-Example `music` input by custom music URL:
-
-```markdown
-{{}}
-```
-
-The rendered output looks like this:
-
-{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}
-
-### 8.2 Music Platform URL Automatic Identification {#automatic-identification}
-
-The `music` shortcode has one named parameter by music platform URL automatic identification:
-
-* **auto** *[required]* (**first** positional parameter)
-
- URL of the music platform URL for automatic identification,
- which supports `netease`, `tencent` and `xiami` music platform.
-
-Example `music` input by music platform URL automatic identification:
-
-```markdown
-{{}}
-Or
-{{}}
-```
-
-The rendered output looks like this:
-
-{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
-
-### 8.3 Custom Server, Type and ID {#custom-server}
-
-The `music` shortcode has the following named parameters by custom music platform:
-
-* **server** *[required]* (**first** positional parameter)
-
- [`netease`, `tencent`, `kugou`, `xiami`, `baidu`]
-
- Music platform.
-
-* **type** *[required]* (**second** positional parameter)
-
- [`song`, `playlist`, `album`, `search`, `artist`]
-
- Type of the music.
-
-* **id** *[required]* (**third** positional parameter)
-
- Song ID, or playlist ID, or album ID, or search keyword, or artist ID.
-
-Example `music` input by custom music platform:
-
-```markdown
-{{}}
-Or
-{{}}
-```
-
-The rendered output looks like this:
-
-{{< music netease song 1868553 >}}
-
-### 8.4 Other Parameters {#other-parameters}
-
-The `music` shortcode has other named parameters applying to the above three ways:
-
-* **theme** *[optional]*
-
- {{< version 0.2.0 changed >}} Main color of the music player, default value is `#448aff`.
-
-* **fixed** *[optional]*
-
- Whether to enable fixed mode, default value is `false`.
-
-* **mini** *[optional]*
-
- Whether to enable mini mode, default value is `false`.
-
-* **autoplay** *[optional]*
-
- Whether to autoplay music, default value is `false`.
-
-* **volume** *[optional]*
-
- Default volume when the player is first opened, which will be remembered in the browser, default value is `0.7`.
-
-* **mutex** *[optional]*
-
- Whether to pause other players when this player starts playing, default value is `true`.
-
-The `music` shortcode has the following named parameters only applying to the type of music list:
-
-* **loop** *[optional]*
-
- [`all`, `one`, `none`]
-
- Loop mode of the music list, default value is `none`.
-
-* **order** *[optional]*
-
- [`list`, `random`]
-
- Play order of the music list, default value is `list`.
-
-* **list-folded** *[optional]*
-
- Whether the music list should be folded at first, default value is `false`.
-
-* **list-max-height** *[optional]*
-
- Max height of the music list, default value is `340px`.
+The full documentation is provided in [Theme Documentation - music Shortcode](../theme-documentation-music-shortcode).
## 9 bilibili
@@ -1132,137 +311,13 @@ The `music` shortcode has the following named parameters only applying to the ty
The `bilibili` shortcode embeds a responsive video player for bilibili videos.
-When the video only has one part, only the BV `id` of the video is required, e.g.:
-
-```code
-https://www.bilibili.com/video/BV1Sx411T7QQ
-```
-
-Example `bilibili` input:
-
-```markdown
-{{}}
-Or
-{{}}
-```
-
-The rendered output looks like this:
-
-{{< bilibili id=BV1Sx411T7QQ >}}
-
-When the video has multiple parts, in addition to the BV `id` of the video,
-`p` is also required, whose default value is `1`, e.g.:
-
-```code
-https://www.bilibili.com/video/BV1TJ411C7An?p=3
-```
-
-Example `bilibili` input with `p`:
-
-```markdown
-{{}}
-Or
-{{}}
-```
-
-The rendered output looks like this:
-
-{{< bilibili id=BV1TJ411C7An p=3 >}}
+The full documentation is provided in [Theme Documentation - bilibili Shortcode](../theme-documentation-bilibili-shortcode).
## 10 typeit
-The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/).
+The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/) library.
-Just insert your content in the `typeit` shortcode and that’s it.
-
-### 10.1 Simple Content {#simple-content}
-
-Simple content is allowed in `Markdown` format and **without** rich block content such as images and more...
-
-Example `typeit` input:
-
-```markdown
-{{}}
-This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
-{{}}
-```
-
-The rendered output looks like this:
-
-{{< typeit >}}
-This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
-{{< /typeit >}}
-
-Alternatively, you can use custom **HTML tags**.
-
-Example `typeit` input with `h4` tag:
-
-```markdown
-{{}}
-This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
-{{}}
-```
-
-The rendered output looks like this:
-
-{{< typeit tag=h4 >}}
-This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
-{{< /typeit >}}
-
-### 10.2 Code Content {#code-content}
-
-Code content is allowed and will be highlighted by named parameter `code` for the type of code language.
-
-Example `typeit` input with `code`:
-
-```markdown
-{{}}
-public class HelloWorld {
- public static void main(String []args) {
- System.out.println("Hello World");
- }
-}
-{{}}
-```
-
-The rendered output looks like this:
-
-{{< typeit code=java >}}
-public class HelloWorld {
- public static void main(String []args) {
- System.out.println("Hello World");
- }
-}
-{{< /typeit >}}
-
-### 10.3 Group Content {#group-content}
-
-All typing animations start at the same time by default.
-But sometimes you may want to start a set of `typeit` contents in order.
-
-A set of `typeit` contents with the same value of named parameter `group` will start typing animation in sequence.
-
-Example `typeit` input with `group`:
-
-```markdown
-{{}}
-**First** this paragraph begins
-{{}}
-
-{{}}
-**Then** this paragraph begins
-{{}}
-```
-
-The rendered output looks like this:
-
-{{< typeit group=paragraph >}}
-**First** this paragraph begins
-{{< /typeit >}}
-
-{{< typeit group=paragraph >}}
-**Then** this paragraph begins
-{{< /typeit >}}
+The full documentation is provided in [Theme Documentation - typeit Shortcode](../theme-documentation-typeit-shortcode).
## 11 script
diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md
index e1b3384..84095e8 100644
--- a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md
+++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md
@@ -7,7 +7,7 @@ draft: false
author: "Dillon"
authorLink: "https://dillonzq.com"
description: "LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode."
-images: ["featured-image.png"]
+images: ["featured-image.jpg"]
resources:
- name: "featured-image"
src: "featured-image.jpg"
@@ -284,849 +284,29 @@ This is a **right-aligned** paragraph.
## 5 mermaid
-[mermaid](https://mermaidjs.github.io/) 是一个可以帮助你在文章中生成图表和流程图的库, 类似 Markdown 的语法.
+`mermaid` shortcode 使用 [Mermaid](https://mermaidjs.github.io/) 库提供绘制图表和流程图的功能.
-只需将你的 mermaid 代码插入 `mermaid` shortcode 中即可.
-
-### 5.1 流程图 {#flowchart}
-
-一个 **流程图** `mermaid` 示例:
-
-```markdown
-{{}}
-graph LR;
- A[Hard edge] -->|Link text| B(Round edge)
- B --> C{Decision}
- C -->|One| D[Result one]
- C -->|Two| E[Result two]
-{{}}
-```
-
-呈现的输出效果如下:
-
-{{< 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 >}}
-
-### 5.2 时序图 {#sequence-diagram}
-
-一个 **时序图** `mermaid` 示例:
-
-```markdown
-{{}}
-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!
-{{}}
-```
-
-呈现的输出效果如下:
-
-{{< 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!
-{{< /mermaid >}}
-
-### 5.3 甘特图 {#gantt}
-
-一个 **甘特图** `mermaid` 示例:
-
-```markdown
-{{}}
-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 >}}
-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 >}}
-
-### 5.4 类图 {#class-diagram}
-
-一个 **类图** `mermaid` 示例:
-
-```markdown
-{{}}
-classDiagram
- Class01 <|-- AveryLongClass : Cool
- Class03 *-- Class04
- Class05 o-- Class06
- Class07 .. Class08
- Class09 --> C2 : Where am i?
- Class09 --* C3
- Class09 --|> Class07
- Class07 : equals()
- Class07 : Object[] elementData
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 <--> C2: Cool label
-{{}}
-```
-
-呈现的输出效果如下:
-
-{{< mermaid >}}
-classDiagram
- Class01 <|-- AveryLongClass : Cool
- Class03 *-- Class04
- Class05 o-- Class06
- Class07 .. Class08
- Class09 --> C2 : Where am i?
- Class09 --* C3
- Class09 --|> Class07
- Class07 : equals()
- Class07 : Object[] elementData
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 <--> C2: Cool label
-{{< /mermaid >}}
-
-### 5.5 状态图 {#state-diagram}
-
-一个 **状态图** `mermaid` 示例:
-
-```markdown
-{{}}
-stateDiagram
- [*] --> Still
- Still --> [*]
- Still --> Moving
- Moving --> Still
- Moving --> Crash
- Crash --> [*]
-{{}}
-```
-
-呈现的输出效果如下:
-
-{{< mermaid >}}
-stateDiagram
- [*] --> Still
- Still --> [*]
- Still --> Moving
- Moving --> Still
- Moving --> Crash
- Crash --> [*]
-{{< /mermaid >}}
-
-### 5.6 Git 图 {#git-graph}
-
-一个 **Git 图** `mermaid` 示例:
-
-```markdown
-{{}}
-gitGraph
- commit
- commit
- branch develop
- checkout develop
- commit
- commit
- checkout main
- merge develop
- commit
- commit
-{{}}
-```
-
-呈现的输出效果如下:
-
-{{< mermaid >}}
-gitGraph
- commit
- commit
- branch develop
- checkout develop
- commit
- commit
- checkout main
- merge develop
- commit
- commit
-{{< /mermaid >}}
-
-### 5.7 饼图 {#pie}
-
-一个 **饼图** `mermaid` 示例:
-
-```markdown
-{{}}
-pie
- "Dogs" : 386
- "Cats" : 85
- "Rats" : 15
-{{}}
-```
-
-呈现的输出效果如下:
-
-{{< mermaid >}}
-pie
- "Dogs" : 386
- "Cats" : 85
- "Rats" : 15
-{{< /mermaid >}}
+完整文档请查看页面 [主题文档 - mermaid Shortcode](../theme-documentation-mermaid-shortcode).
## 6 echarts
-[ECharts](https://echarts.apache.org/) 是一个帮助你生成交互式数据可视化的库.
+`echarts` shortcode 使用 [ECharts](https://echarts.apache.org/) 库提供数据可视化的功能.
-ECharts 提供了常规的 [折线图](https://echarts.apache.org/zh/option.html#series-line), [柱状图](https://echarts.apache.org/zh/option.html#series-line), [散点图](https://echarts.apache.org/zh/option.html#series-scatter), [饼图](https://echarts.apache.org/zh/option.html#series-pie), [K线图](https://echarts.apache.org/zh/option.html#series-candlestick), 用于统计的 [盒形图](https://echarts.apache.org/zh/option.html#series-boxplot), 用于地理数据可视化的 [地图](https://echarts.apache.org/zh/option.html#series-map), [热力图](https://echarts.apache.org/zh/option.html#series-heatmap), [线图](https://echarts.apache.org/zh/option.html#series-lines), 用于关系数据可视化的 [关系图](https://echarts.apache.org/zh/option.html#series-graph), [treemap](https://echarts.apache.org/zh/option.html#series-treemap), [旭日图](https://echarts.apache.org/zh/option.html#series-sunburst), 多维数据可视化的 [平行坐标](https://echarts.apache.org/zh/option.html#series-parallel), 还有用于 BI 的 [漏斗图](https://echarts.apache.org/zh/option.html#series-funnel), [仪表盘](https://echarts.apache.org/zh/option.html#series-gauge), 并且支持图与图之间的混搭.
-
-只需在 `echarts` shortcode 中以 `JSON`/`YAML`/`TOML`格式插入 ECharts 选项即可.
-
-一个 `JSON` 格式的 `echarts` 示例:
-
-```json
-{{}}
-{
- "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]
- }
- ]
-}
-{{}}
-```
-
-一个 `YAML` 格式的 `echarts` 示例:
-
-```yaml
-{{}}
-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
-{{}}
-```
-
-一个 `TOML` 格式的 `echarts` 示例:
-
-```toml
-{{}}
-[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 >}}
-{
- "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 >}}
-
-`echarts` shortcode 还有以下命名参数:
-
-* **width** *[可选]* (**第一个**位置参数)
-
- {{< version 0.2.0 >}} 数据可视化的宽度, 默认值是 `100%`.
-
-* **height** *[可选]* (**第二个**位置参数)
-
- {{< version 0.2.0 >}} 数据可视化的高度, 默认值是 `30rem`.
+完整文档请查看页面 [主题文档 - echarts Shortcode](../theme-documentation-echarts-shortcode).
## 7 mapbox
{{< version 0.2.0 >}}
-[Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 是一个 JavaScript 库，它使用 WebGL, 以 [vector tiles](https://docs.mapbox.com/help/glossary/vector-tiles/) 和 [Mapbox styles](https://docs.mapbox.com/mapbox-gl-js/style-spec/) 为来源, 将它们渲染成互动式地图.
+`mapbox` shortcode 使用 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 库提供互动式地图的功能.
-`mapbox` shortcode 有以下命名参数来使用 Mapbox GL JS:
-
-* **lng** *[必需]* (**第一个**位置参数)
-
- 地图初始中心点的经度, 以度为单位.
-
-* **lat** *[必需]* (**第二个**位置参数)
-
- 地图初始中心点的纬度, 以度为单位.
-
-* **zoom** *[可选]* (**第三个**位置参数)
-
- 地图的初始缩放级别, 默认值是 `10`.
-
-* **marked** *[可选]* (**第四个**位置参数)
-
- 是否在地图的初始中心点添加图钉, 默认值是 `true`.
-
-* **light-style** *[可选]* (**第五个**位置参数)
-
- 浅色主题的地图样式, 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值.
-
-* **dark-style** *[可选]* (**第六个**位置参数)
-
- 深色主题的地图样式, 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值.
-
-* **navigation** *[可选]*
-
- 是否添加 [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol), 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值.
-
-* **geolocate** *[可选]*
-
- 是否添加 [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol), 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值.
-
-* **scale** *[可选]*
-
- 是否添加 [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api#scalecontrol), 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值.
-
-* **fullscreen** *[可选]*
-
- 是否添加 [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api#fullscreencontrol), 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值.
-
-* **width** *[可选]*
-
- 地图的宽度, 默认值是 `100%`.
-
-* **height** *[可选]*
-
- 地图的高度, 默认值是 `20rem`.
-
-一个简单的 `mapbox` 示例:
-
-```markdown
-{{}}
-或者
-{{}}
-```
-
-呈现的输出效果如下:
-
-{{< mapbox 121.485 31.233 12 >}}
-
-一个带有自定义样式的 `mapbox` 示例:
-
-```markdown
-{{}}
-或者
-{{}}
-```
-
-呈现的输出效果如下:
-
-{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1?optimize=true" >}}
+完整文档请查看页面 [主题文档 - mapbox Shortcode](../theme-documentation-mapbox-shortcode).
## 8 music
-`music` shortcode 基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 提供了一个内嵌的响应式音乐播放器.
+`music` shortcode 基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 库提供了一个内嵌的响应式音乐播放器.
-有三种方式使用 `music` shortcode.
-
-### 8.1 自定义音乐 URL {#custom-music-url}
-
-{{< version 0.2.10 >}} 支持[本地资源引用](../theme-documentation-content#contents-organization)的完整用法.
-
-`music` shortcode 有以下命名参数来使用自定义音乐 URL:
-
-* **server** *[必需]*
-
- 音乐的链接.
-
-* **type** *[可选]*
-
- 音乐的名称.
-
-* **artist** *[可选]*
-
- 音乐的创作者.
-
-* **cover** *[可选]*
-
- 音乐的封面链接.
-
-一个使用自定义音乐 URL 的 `music` 示例:
-
-```markdown
-{{}}
-```
-
-呈现的输出效果如下:
-
-{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}
-
-### 8.2 音乐平台 URL 的自动识别 {#automatic-identification}
-
-`music` shortcode 有一个命名参数来使用音乐平台 URL 的自动识别:
-
-* **auto** *[必需]]* (**第一个**位置参数)
-
- 用来自动识别的音乐平台 URL, 支持 `netease`, `tencent` 和 `xiami` 平台.
-
-一个使用音乐平台 URL 的自动识别的 `music` 示例:
-
-```markdown
-{{}}
-或者
-{{}}
-```
-
-呈现的输出效果如下:
-
-{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
-
-### 8.3 自定义音乐平台, 类型和 ID {#custom-server}
-
-`music` shortcode 有以下命名参数来使用自定义音乐平台:
-
-* **server** *[必需]* (**第一个**位置参数)
-
- [`netease`, `tencent`, `kugou`, `xiami`, `baidu`]
-
- 音乐平台.
-
-* **type** *[必需]* (**第二个**位置参数)
-
- [`song`, `playlist`, `album`, `search`, `artist`]
-
- 音乐类型.
-
-* **id** *[必需]* (**第三个**位置参数)
-
- 歌曲 ID, 或者播放列表 ID, 或者专辑 ID, 或者搜索关键词, 或者创作者 ID.
-
-一个使用自定义音乐平台的 `music` 示例:
-
-```markdown
-{{}}
-或者
-{{}}
-```
-
-呈现的输出效果如下:
-
-{{< music netease song 1868553 >}}
-
-### 8.4 其它参数 {#other-parameters}
-
-`music` shortcode 有一些可以应用于以上三种方式的其它命名参数:
-
-* **theme** *[可选]*
-
- {{< version 0.2.0 changed >}} 音乐播放器的主题色, 默认值是 `#448aff`.
-
-* **fixed** *[可选]*
-
- 是否开启固定模式, 默认值是 `false`.
-
-* **mini** *[可选]*
-
- 是否开启迷你模式, 默认值是 `false`.
-
-* **autoplay** *[可选]*
-
- 是否自动播放音乐, 默认值是 `false`.
-
-* **volume** *[可选]*
-
- 第一次打开播放器时的默认音量, 会被保存在浏览器缓存中, 默认值是 `0.7`.
-
-* **mutex** *[可选]*
-
- 是否自动暂停其它播放器, 默认值是 `true`.
-
-`music` shortcode 还有一些只适用于音乐列表方式的其它命名参数:
-
-* **loop** *[可选]*
-
- [`all`, `one`, `none`]
-
- 音乐列表的循环模式, 默认值是 `none`.
-
-* **order** *[可选]*
-
- [`list`, `random`]
-
- 音乐列表的播放顺序, 默认值是 `list`.
-
-* **list-folded** *[可选]*
-
- 初次打开的时候音乐列表是否折叠, 默认值是 `false`.
-
-* **list-max-height** *[可选]*
-
- 音乐列表的最大高度, 默认值是 `340px`.
+完整文档请查看页面 [主题文档 - music Shortcode](../theme-documentation-music-shortcode).
## 9 bilibili
@@ -1134,136 +314,13 @@ data = [
`bilibili` shortcode 提供了一个内嵌的用来播放 bilibili 视频的响应式播放器.
-如果视频只有一个部分, 则仅需要视频的 BV `id`, 例如:
-
-```code
-https://www.bilibili.com/video/BV1Sx411T7QQ
-```
-
-一个 `bilibili` 示例:
-
-```markdown
-{{}}
-或者
-{{}}
-```
-
-呈现的输出效果如下:
-
-{{< bilibili id=BV1Sx411T7QQ >}}
-
-如果视频包含多个部分, 则除了视频的 BV `id` 之外, 还需要 `p`, 默认值为 `1`, 例如:
-
-```code
-https://www.bilibili.com/video/BV1TJ411C7An?p=3
-```
-
-一个带有 `p` 参数的 `bilibili` 示例:
-
-```markdown
-{{}}
-或者
-{{}}
-```
-
-呈现的输出效果如下:
-
-{{< bilibili id=BV1TJ411C7An p=3 >}}
+完整文档请查看页面 [主题文档 - bilibili Shortcode](../theme-documentation-bilibili-shortcode).
## 10 typeit
-`typeit` shortcode 基于 [TypeIt](https://typeitjs.com/) 提供了打字动画.
+`typeit` shortcode 基于 [TypeIt](https://typeitjs.com/) 库提供了打字动画.
-只需将你需要打字动画的内容插入 `typeit` shortcode 中即可.
-
-### 10.1 简单内容 {#simple-content}
-
-允许使用 `Markdown` 格式的简单内容, 并且 **不包含** 富文本的块内容, 例如图像等等...
-
-一个 `typeit` 示例:
-
-```markdown
-{{}}
-这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
-{{}}
-```
-
-呈现的输出效果如下:
-
-{{< typeit >}}
-这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
-{{< /typeit >}}
-
-另外, 你也可以自定义 **HTML 标签**.
-
-一个带有 `h4` 标签的 `typeit` 示例:
-
-```markdown
-{{}}
-这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
-{{}}
-```
-
-呈现的输出效果如下:
-
-{{< typeit tag=h4 >}}
-这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
-{{< /typeit >}}
-
-### 10.2 代码内容 {#code-content}
-
-代码内容也是允许的, 并且通过使用参数 `code` 指定语言类型可以实习语法高亮.
-
-一个带有 `code` 参数的 `typeit` 示例:
-
-```markdown
-{{}}
-public class HelloWorld {
- public static void main(String []args) {
- System.out.println("Hello World");
- }
-}
-{{}}
-```
-
-呈现的输出效果如下:
-
-{{< typeit code=java >}}
-public class HelloWorld {
- public static void main(String []args) {
- System.out.println("Hello World");
- }
-}
-{{< /typeit >}}
-
-### 10.3 分组内容 {#code-content}
-
-默认情况下, 所有打字动画都是同时开始的.
-但是有时你可能需要按顺序开始一组 `typeit` 内容的打字动画.
-
-一组具有相同 `group` 参数值的 `typeit` 内容将按顺序开始打字动画.
-
-一个带有 `group` 参数的 `typeit` 示例:
-
-```markdown
-{{}}
-**首先**, 这个段落开始
-{{}}
-
-{{}}
-**然后**, 这个段落开始
-{{}}
-```
-
-呈现的输出效果如下:
-
-{{< typeit group=paragraph >}}
-**首先**, 这个段落开始
-{{< /typeit >}}
-
-{{< typeit group=paragraph >}}
-**然后**, 这个段落开始
-{{< /typeit >}}
+完整文档请查看页面 [主题文档 - typeit Shortcode](../theme-documentation-typeit-shortcode).
## 11 script
diff --git a/exampleSite/content/posts/theme-documentation-mapbox-shortcode/featured-image.jpg b/exampleSite/content/posts/theme-documentation-mapbox-shortcode/featured-image.jpg
new file mode 100644
index 0000000..1e76914
Binary files /dev/null and b/exampleSite/content/posts/theme-documentation-mapbox-shortcode/featured-image.jpg differ
diff --git a/exampleSite/content/posts/theme-documentation-mapbox-shortcode/index.en.md b/exampleSite/content/posts/theme-documentation-mapbox-shortcode/index.en.md
new file mode 100644
index 0000000..9323761
--- /dev/null
+++ b/exampleSite/content/posts/theme-documentation-mapbox-shortcode/index.en.md
@@ -0,0 +1,104 @@
+---
+weight: 7
+title: "Theme Documentation - mapbox Shortcode"
+date: 2020-03-03T13:29:41+08:00
+lastmod: 2020-03-03T13:29:41+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "The mapbox shortcode supports interactive maps in Hugo with Mapbox GL JS library."
+images: ["featured-image.jpg"]
+resources:
+- name: "featured-image"
+ src: "featured-image.jpg"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+
+toc:
+ enable: false
+---
+
+{{< version 0.2.0 >}}
+
+The `mapbox` shortcode supports interactive maps in Hugo with [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) library.
+
+
+
+**Mapbox GL JS** is a JavaScript library that uses WebGL to render interactive maps from [vector tiles](https://docs.mapbox.com/help/glossary/vector-tiles/) and [Mapbox styles](https://docs.mapbox.com/mapbox-gl-js/style-spec/).
+
+The `mapbox` shortcode has the following named parameters to use Mapbox GL JS:
+
+* **lng** *[required]* (**first** positional parameter)
+
+ Longitude of the inital centerpoint of the map, measured in degrees.
+
+* **lat** *[required]* (**second** positional parameter)
+
+ Latitude of the inital centerpoint of the map, measured in degrees.
+
+* **zoom** *[optional]* (**third** positional parameter)
+
+ The initial zoom level of the map, default value is `10`.
+
+* **marked** *[optional]* (**fourth** positional parameter)
+
+ Whether to add a marker at the inital centerpoint of the map, default value is `true`.
+
+* **light-style** *[optional]* (**fifth** positional parameter)
+
+ Style for the light theme, default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
+
+* **dark-style** *[optional]* (**sixth** positional parameter)
+
+ Style for the dark theme, default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
+
+* **navigation** *[optional]*
+
+ Whether to add [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
+
+* **geolocate** *[optional]*
+
+ Whether to add [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
+
+* **scale** *[optional]*
+
+ Whether to add [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api#scalecontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
+
+* **fullscreen** *[optional]*
+
+ Whether to add [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api#fullscreencontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
+
+* **width** *[optional]*
+
+ Width of the map, default value is `100%`.
+
+* **height** *[optional]*
+
+ Height of the map, default value is `20rem`.
+
+Example simple `mapbox` input:
+
+```markdown
+{{}}
+Or
+{{}}
+```
+
+The rendered output looks like this:
+
+{{< mapbox 121.485 31.233 12 >}}
+
+Example `mapbox` input with the custom style:
+
+```markdown
+{{}}
+Or
+{{}}
+```
+
+The rendered output looks like this:
+
+{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4?optimize=true" "mapbox://styles/mapbox/navigation-preview-night-v4?optimize=true" >}}
diff --git a/exampleSite/content/posts/theme-documentation-mapbox-shortcode/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-mapbox-shortcode/index.zh-cn.md
new file mode 100644
index 0000000..64b7216
--- /dev/null
+++ b/exampleSite/content/posts/theme-documentation-mapbox-shortcode/index.zh-cn.md
@@ -0,0 +1,104 @@
+---
+weight: 7
+title: "主题文档 - mapbox Shortcode"
+date: 2020-03-03T13:29:59+08:00
+lastmod: 2020-03-03T13:29:59+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "mapbox shortcode 使用 Mapbox GL JS 库提供互动式地图的功能."
+images: ["featured-image.jpg"]
+resources:
+- name: "featured-image"
+ src: "featured-image.jpg"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+
+toc:
+ enable: false
+---
+
+{{< version 0.2.0 >}}
+
+`mapbox` shortcode 使用 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 库提供互动式地图的功能.
+
+
+
+**Mapbox GL JS** 是一个 JavaScript 库，它使用 WebGL, 以 [vector tiles](https://docs.mapbox.com/help/glossary/vector-tiles/) 和 [Mapbox styles](https://docs.mapbox.com/mapbox-gl-js/style-spec/) 为来源, 将它们渲染成互动式地图.
+
+`mapbox` shortcode 有以下命名参数来使用 Mapbox GL JS:
+
+* **lng** *[必需]* (**第一个**位置参数)
+
+ 地图初始中心点的经度, 以度为单位.
+
+* **lat** *[必需]* (**第二个**位置参数)
+
+ 地图初始中心点的纬度, 以度为单位.
+
+* **zoom** *[可选]* (**第三个**位置参数)
+
+ 地图的初始缩放级别, 默认值是 `10`.
+
+* **marked** *[可选]* (**第四个**位置参数)
+
+ 是否在地图的初始中心点添加图钉, 默认值是 `true`.
+
+* **light-style** *[可选]* (**第五个**位置参数)
+
+ 浅色主题的地图样式, 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值.
+
+* **dark-style** *[可选]* (**第六个**位置参数)
+
+ 深色主题的地图样式, 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值.
+
+* **navigation** *[可选]*
+
+ 是否添加 [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol), 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值.
+
+* **geolocate** *[可选]*
+
+ 是否添加 [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol), 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值.
+
+* **scale** *[可选]*
+
+ 是否添加 [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api#scalecontrol), 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值.
+
+* **fullscreen** *[可选]*
+
+ 是否添加 [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api#fullscreencontrol), 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值.
+
+* **width** *[可选]*
+
+ 地图的宽度, 默认值是 `100%`.
+
+* **height** *[可选]*
+
+ 地图的高度, 默认值是 `20rem`.
+
+一个简单的 `mapbox` 示例:
+
+```markdown
+{{}}
+或者
+{{}}
+```
+
+呈现的输出效果如下:
+
+{{< mapbox 121.485 31.233 12 >}}
+
+一个带有自定义样式的 `mapbox` 示例:
+
+```markdown
+{{}}
+或者
+{{}}
+```
+
+呈现的输出效果如下:
+
+{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1?optimize=true" >}}
diff --git a/exampleSite/content/posts/theme-documentation-mermaid-shortcode/featured-image.png b/exampleSite/content/posts/theme-documentation-mermaid-shortcode/featured-image.png
new file mode 100644
index 0000000..6db8635
Binary files /dev/null and b/exampleSite/content/posts/theme-documentation-mermaid-shortcode/featured-image.png differ
diff --git a/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md b/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md
new file mode 100644
index 0000000..0cfd0dd
--- /dev/null
+++ b/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md
@@ -0,0 +1,259 @@
+---
+weight: 5
+title: "Theme Documentation - mermaid Shortcode"
+date: 2020-03-03T15:29:41+08:00
+lastmod: 2020-03-03T15:29:41+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "The mermaid shortcode supports diagrams in Hugo with Mermaid library."
+images: ["featured-image.png"]
+resources:
+- name: "featured-image"
+ src: "featured-image.png"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+---
+
+The `mermaid` shortcode supports diagrams in Hugo with [Mermaid](https://mermaidjs.github.io/) library.
+
+
+
+**Mermaid** is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.
+
+Just insert your mermaid code in the `mermaid` shortcode and that’s it.
+
+## 1 Flowchart {#flowchart}
+
+Example **flowchart** `mermaid` input:
+
+```markdown
+{{}}
+graph LR;
+ A[Hard edge] -->|Link text| B(Round edge)
+ B --> C{Decision}
+ C -->|One| D[Result one]
+ C -->|Two| E[Result two]
+{{}}
+```
+
+The rendered output looks like this:
+
+{{< 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 >}}
+
+## 2 Sequence Diagram {#sequence-diagram}
+
+Example **sequence diagram** `mermaid` input:
+
+```markdown
+{{}}
+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!
+{{}}
+```
+
+The rendered output looks like this:
+
+{{< 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!
+{{< /mermaid >}}
+
+## 3 GANTT {#gantt}
+
+Example **GANTT** `mermaid` input:
+
+```markdown
+{{}}
+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
+{{}}
+```
+
+The rendered output looks like this:
+
+{{< 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 >}}
+
+## 4 Class Diagram {#class-diagram}
+
+Example **class diagram** `mermaid` input:
+
+```markdown
+{{}}
+classDiagram
+ Class01 <|-- AveryLongClass : Cool
+ Class03 *-- Class04
+ Class05 o-- Class06
+ Class07 .. Class08
+ Class09 --> C2 : Where am i?
+ Class09 --* C3
+ Class09 --|> Class07
+ Class07 : equals()
+ Class07 : Object[] elementData
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 <--> C2: Cool label
+{{}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+classDiagram
+ Class01 <|-- AveryLongClass : Cool
+ Class03 *-- Class04
+ Class05 o-- Class06
+ Class07 .. Class08
+ Class09 --> C2 : Where am i?
+ Class09 --* C3
+ Class09 --|> Class07
+ Class07 : equals()
+ Class07 : Object[] elementData
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 <--> C2: Cool label
+{{< /mermaid >}}
+
+## 5 State Diagram {#state-diagram}
+
+Example **state diagram** `mermaid` input:
+
+```markdown
+{{}}
+stateDiagram
+ [*] --> Still
+ Still --> [*]
+ Still --> Moving
+ Moving --> Still
+ Moving --> Crash
+ Crash --> [*]
+{{}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+stateDiagram
+ [*] --> Still
+ Still --> [*]
+ Still --> Moving
+ Moving --> Still
+ Moving --> Crash
+ Crash --> [*]
+{{< /mermaid >}}
+
+## 6 Git Graph {#git-graph}
+
+Example **git graph** `mermaid` input:
+
+```markdown
+{{}}
+gitGraph
+ commit
+ commit
+ branch develop
+ checkout develop
+ commit
+ commit
+ checkout main
+ merge develop
+ commit
+ commit
+{{}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+gitGraph
+ commit
+ commit
+ branch develop
+ checkout develop
+ commit
+ commit
+ checkout main
+ merge develop
+ commit
+ commit
+{{< /mermaid >}}
+
+## 7 Pie {#pie}
+
+Example **pie** `mermaid` input:
+
+```markdown
+{{}}
+pie
+ "Dogs" : 386
+ "Cats" : 85
+ "Rats" : 15
+{{}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+pie
+ "Dogs" : 386
+ "Cats" : 85
+ "Rats" : 15
+{{< /mermaid >}}
diff --git a/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.zh-cn.md
new file mode 100644
index 0000000..7e3731d
--- /dev/null
+++ b/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.zh-cn.md
@@ -0,0 +1,259 @@
+---
+weight: 5
+title: "主题文档 - mermaid Shortcode"
+date: 2020-03-03T15:29:59+08:00
+lastmod: 2020-03-03T15:29:59+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "mermaid shortcode 使用 Mermaid 库提供绘制图表和流程图的功能."
+images: ["featured-image.png"]
+resources:
+- name: "featured-image"
+ src: "featured-image.png"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+---
+
+`mermaid` shortcode 使用 [Mermaid](https://mermaidjs.github.io/) 库提供绘制图表和流程图的功能.
+
+
+
+[mermaid](https://mermaidjs.github.io/) 是一个可以帮助你在文章中绘制图表和流程图的库, 类似 Markdown 的语法.
+
+只需将你的 mermaid 代码插入 `mermaid` shortcode 中即可.
+
+## 1 流程图 {#flowchart}
+
+一个 **流程图** `mermaid` 示例:
+
+```markdown
+{{}}
+graph LR;
+ A[Hard edge] -->|Link text| B(Round edge)
+ B --> C{Decision}
+ C -->|One| D[Result one]
+ C -->|Two| E[Result two]
+{{}}
+```
+
+呈现的输出效果如下:
+
+{{< 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 >}}
+
+## 2 时序图 {#sequence-diagram}
+
+一个 **时序图** `mermaid` 示例:
+
+```markdown
+{{}}
+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!
+{{}}
+```
+
+呈现的输出效果如下:
+
+{{< 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!
+{{< /mermaid >}}
+
+## 3 甘特图 {#gantt}
+
+一个 **甘特图** `mermaid` 示例:
+
+```markdown
+{{}}
+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 >}}
+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 >}}
+
+## 4 类图 {#class-diagram}
+
+一个 **类图** `mermaid` 示例:
+
+```markdown
+{{}}
+classDiagram
+ Class01 <|-- AveryLongClass : Cool
+ Class03 *-- Class04
+ Class05 o-- Class06
+ Class07 .. Class08
+ Class09 --> C2 : Where am i?
+ Class09 --* C3
+ Class09 --|> Class07
+ Class07 : equals()
+ Class07 : Object[] elementData
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 <--> C2: Cool label
+{{}}
+```
+
+呈现的输出效果如下:
+
+{{< mermaid >}}
+classDiagram
+ Class01 <|-- AveryLongClass : Cool
+ Class03 *-- Class04
+ Class05 o-- Class06
+ Class07 .. Class08
+ Class09 --> C2 : Where am i?
+ Class09 --* C3
+ Class09 --|> Class07
+ Class07 : equals()
+ Class07 : Object[] elementData
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 <--> C2: Cool label
+{{< /mermaid >}}
+
+## 5 状态图 {#state-diagram}
+
+一个 **状态图** `mermaid` 示例:
+
+```markdown
+{{}}
+stateDiagram
+ [*] --> Still
+ Still --> [*]
+ Still --> Moving
+ Moving --> Still
+ Moving --> Crash
+ Crash --> [*]
+{{}}
+```
+
+呈现的输出效果如下:
+
+{{< mermaid >}}
+stateDiagram
+ [*] --> Still
+ Still --> [*]
+ Still --> Moving
+ Moving --> Still
+ Moving --> Crash
+ Crash --> [*]
+{{< /mermaid >}}
+
+## 6 Git 图 {#git-graph}
+
+一个 **Git 图** `mermaid` 示例:
+
+```markdown
+{{}}
+gitGraph
+ commit
+ commit
+ branch develop
+ checkout develop
+ commit
+ commit
+ checkout main
+ merge develop
+ commit
+ commit
+{{}}
+```
+
+呈现的输出效果如下:
+
+{{< mermaid >}}
+gitGraph
+ commit
+ commit
+ branch develop
+ checkout develop
+ commit
+ commit
+ checkout main
+ merge develop
+ commit
+ commit
+{{< /mermaid >}}
+
+## 7 饼图 {#pie}
+
+一个 **饼图** `mermaid` 示例:
+
+```markdown
+{{}}
+pie
+ "Dogs" : 386
+ "Cats" : 85
+ "Rats" : 15
+{{}}
+```
+
+呈现的输出效果如下:
+
+{{< mermaid >}}
+pie
+ "Dogs" : 386
+ "Cats" : 85
+ "Rats" : 15
+{{< /mermaid >}}
diff --git a/exampleSite/content/posts/theme-documentation-music-shortcode/featured-image.png b/exampleSite/content/posts/theme-documentation-music-shortcode/featured-image.png
new file mode 100644
index 0000000..b024637
Binary files /dev/null and b/exampleSite/content/posts/theme-documentation-music-shortcode/featured-image.png differ
diff --git a/exampleSite/content/posts/theme-documentation-music-shortcode/index.en.md b/exampleSite/content/posts/theme-documentation-music-shortcode/index.en.md
new file mode 100644
index 0000000..9844667
--- /dev/null
+++ b/exampleSite/content/posts/theme-documentation-music-shortcode/index.en.md
@@ -0,0 +1,160 @@
+---
+weight: 8
+title: "Theme Documentation - music Shortcode"
+date: 2020-03-03T12:29:41+08:00
+lastmod: 2020-03-03T12:29:41+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "The music shortcode embeds a responsive music player based on APlayer and MetingJS library."
+images: ["featured-image.png"]
+resources:
+- name: "featured-image"
+ src: "featured-image.png"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+---
+
+The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS).
+
+
+
+There are three ways to use it the `music` shortcode.
+
+## 1 Custom Music URL {#custom-music-url}
+
+{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
+
+The `music` shortcode has the following named parameters by custom music URL:
+
+* **server** *[required]*
+
+ URL of the custom music.
+
+* **name** *[optional]*
+
+ Name of the custom music.
+
+* **artist** *[optional]*
+
+ Artist of the custom music.
+
+* **cover** *[required]*
+
+ URL of the custom music cover.
+
+Example `music` input by custom music URL:
+
+```markdown
+{{}}
+```
+
+The rendered output looks like this:
+
+{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}
+
+## 2 Music Platform URL Automatic Identification {#automatic-identification}
+
+The `music` shortcode has one named parameter by music platform URL automatic identification:
+
+* **auto** *[required]* (**first** positional parameter)
+
+ URL of the music platform URL for automatic identification,
+ which supports `netease`, `tencent` and `xiami` music platform.
+
+Example `music` input by music platform URL automatic identification:
+
+```markdown
+{{}}
+Or
+{{}}
+```
+
+The rendered output looks like this:
+
+{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
+
+## 3 Custom Server, Type and ID {#custom-server}
+
+The `music` shortcode has the following named parameters by custom music platform:
+
+* **server** *[required]* (**first** positional parameter)
+
+ [`netease`, `tencent`, `kugou`, `xiami`, `baidu`]
+
+ Music platform.
+
+* **type** *[required]* (**second** positional parameter)
+
+ [`song`, `playlist`, `album`, `search`, `artist`]
+
+ Type of the music.
+
+* **id** *[required]* (**third** positional parameter)
+
+ Song ID, or playlist ID, or album ID, or search keyword, or artist ID.
+
+Example `music` input by custom music platform:
+
+```markdown
+{{}}
+Or
+{{}}
+```
+
+The rendered output looks like this:
+
+{{< music netease song 1868553 >}}
+
+## 4 Other Parameters {#other-parameters}
+
+The `music` shortcode has other named parameters applying to the above three ways:
+
+* **theme** *[optional]*
+
+ {{< version 0.2.0 changed >}} Main color of the music player, default value is `#448aff`.
+
+* **fixed** *[optional]*
+
+ Whether to enable fixed mode, default value is `false`.
+
+* **mini** *[optional]*
+
+ Whether to enable mini mode, default value is `false`.
+
+* **autoplay** *[optional]*
+
+ Whether to autoplay music, default value is `false`.
+
+* **volume** *[optional]*
+
+ Default volume when the player is first opened, which will be remembered in the browser, default value is `0.7`.
+
+* **mutex** *[optional]*
+
+ Whether to pause other players when this player starts playing, default value is `true`.
+
+The `music` shortcode has the following named parameters only applying to the type of music list:
+
+* **loop** *[optional]*
+
+ [`all`, `one`, `none`]
+
+ Loop mode of the music list, default value is `none`.
+
+* **order** *[optional]*
+
+ [`list`, `random`]
+
+ Play order of the music list, default value is `list`.
+
+* **list-folded** *[optional]*
+
+ Whether the music list should be folded at first, default value is `false`.
+
+* **list-max-height** *[optional]*
+
+ Max height of the music list, default value is `340px`.
diff --git a/exampleSite/content/posts/theme-documentation-music-shortcode/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-music-shortcode/index.zh-cn.md
new file mode 100644
index 0000000..2465b1a
--- /dev/null
+++ b/exampleSite/content/posts/theme-documentation-music-shortcode/index.zh-cn.md
@@ -0,0 +1,159 @@
+---
+weight: 8
+title: "主题文档 - music Shortcode"
+date: 2020-03-03T12:29:59+08:00
+lastmod: 2020-03-03T12:29:59+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "music shortcode 基于 APlayer 和 MetingJS 库提供了一个内嵌的响应式音乐播放器."
+images: ["featured-image.png"]
+resources:
+- name: "featured-image"
+ src: "featured-image.png"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+---
+
+`music` shortcode 基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 库提供了一个内嵌的响应式音乐播放器.
+
+
+
+有三种方式使用 `music` shortcode.
+
+## 1 自定义音乐 URL {#custom-music-url}
+
+{{< version 0.2.10 >}} 支持[本地资源引用](../theme-documentation-content#contents-organization)的完整用法.
+
+`music` shortcode 有以下命名参数来使用自定义音乐 URL:
+
+* **server** *[必需]*
+
+ 音乐的链接.
+
+* **type** *[可选]*
+
+ 音乐的名称.
+
+* **artist** *[可选]*
+
+ 音乐的创作者.
+
+* **cover** *[可选]*
+
+ 音乐的封面链接.
+
+一个使用自定义音乐 URL 的 `music` 示例:
+
+```markdown
+{{}}
+```
+
+呈现的输出效果如下:
+
+{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}
+
+## 2 音乐平台 URL 的自动识别 {#automatic-identification}
+
+`music` shortcode 有一个命名参数来使用音乐平台 URL 的自动识别:
+
+* **auto** *[必需]]* (**第一个**位置参数)
+
+ 用来自动识别的音乐平台 URL, 支持 `netease`, `tencent` 和 `xiami` 平台.
+
+一个使用音乐平台 URL 的自动识别的 `music` 示例:
+
+```markdown
+{{}}
+或者
+{{}}
+```
+
+呈现的输出效果如下:
+
+{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
+
+## 3 自定义音乐平台, 类型和 ID {#custom-server}
+
+`music` shortcode 有以下命名参数来使用自定义音乐平台:
+
+* **server** *[必需]* (**第一个**位置参数)
+
+ [`netease`, `tencent`, `kugou`, `xiami`, `baidu`]
+
+ 音乐平台.
+
+* **type** *[必需]* (**第二个**位置参数)
+
+ [`song`, `playlist`, `album`, `search`, `artist`]
+
+ 音乐类型.
+
+* **id** *[必需]* (**第三个**位置参数)
+
+ 歌曲 ID, 或者播放列表 ID, 或者专辑 ID, 或者搜索关键词, 或者创作者 ID.
+
+一个使用自定义音乐平台的 `music` 示例:
+
+```markdown
+{{}}
+或者
+{{}}
+```
+
+呈现的输出效果如下:
+
+{{< music netease song 1868553 >}}
+
+## 4 其它参数 {#other-parameters}
+
+`music` shortcode 有一些可以应用于以上三种方式的其它命名参数:
+
+* **theme** *[可选]*
+
+ {{< version 0.2.0 changed >}} 音乐播放器的主题色, 默认值是 `#448aff`.
+
+* **fixed** *[可选]*
+
+ 是否开启固定模式, 默认值是 `false`.
+
+* **mini** *[可选]*
+
+ 是否开启迷你模式, 默认值是 `false`.
+
+* **autoplay** *[可选]*
+
+ 是否自动播放音乐, 默认值是 `false`.
+
+* **volume** *[可选]*
+
+ 第一次打开播放器时的默认音量, 会被保存在浏览器缓存中, 默认值是 `0.7`.
+
+* **mutex** *[可选]*
+
+ 是否自动暂停其它播放器, 默认值是 `true`.
+
+`music` shortcode 还有一些只适用于音乐列表方式的其它命名参数:
+
+* **loop** *[可选]*
+
+ [`all`, `one`, `none`]
+
+ 音乐列表的循环模式, 默认值是 `none`.
+
+* **order** *[可选]*
+
+ [`list`, `random`]
+
+ 音乐列表的播放顺序, 默认值是 `list`.
+
+* **list-folded** *[可选]*
+
+ 初次打开的时候音乐列表是否折叠, 默认值是 `false`.
+
+* **list-max-height** *[可选]*
+
+ 音乐列表的最大高度, 默认值是 `340px`.
diff --git a/exampleSite/content/posts/theme-documentation-typeit-shortcode/featured-image.png b/exampleSite/content/posts/theme-documentation-typeit-shortcode/featured-image.png
new file mode 100644
index 0000000..9b53b59
Binary files /dev/null and b/exampleSite/content/posts/theme-documentation-typeit-shortcode/featured-image.png differ
diff --git a/exampleSite/content/posts/theme-documentation-typeit-shortcode/index.en.md b/exampleSite/content/posts/theme-documentation-typeit-shortcode/index.en.md
new file mode 100644
index 0000000..7c0b423
--- /dev/null
+++ b/exampleSite/content/posts/theme-documentation-typeit-shortcode/index.en.md
@@ -0,0 +1,114 @@
+---
+weight: 10
+title: "Theme Documentation - typeit Shortcode"
+date: 2020-03-03T10:29:41+08:00
+lastmod: 2020-03-03T10:29:41+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "The typeit shortcode provides typing animation based on TypeIt library."
+images: ["featured-image.png"]
+resources:
+- name: "featured-image"
+ src: "featured-image.png"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+---
+
+The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/) library.
+
+
+
+Just insert your content in the `typeit` shortcode and that’s it.
+
+## 1 Simple Content {#simple-content}
+
+Simple content is allowed in `Markdown` format and **without** rich block content such as images and more...
+
+Example `typeit` input:
+
+```markdown
+{{}}
+This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
+{{}}
+```
+
+The rendered output looks like this:
+
+{{< typeit >}}
+This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
+{{< /typeit >}}
+
+Alternatively, you can use custom **HTML tags**.
+
+Example `typeit` input with `h4` tag:
+
+```markdown
+{{}}
+This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
+{{}}
+```
+
+The rendered output looks like this:
+
+{{< typeit tag=h4 >}}
+This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
+{{< /typeit >}}
+
+## 2 Code Content {#code-content}
+
+Code content is allowed and will be highlighted by named parameter `code` for the type of code language.
+
+Example `typeit` input with `code`:
+
+```markdown
+{{}}
+public class HelloWorld {
+ public static void main(String []args) {
+ System.out.println("Hello World");
+ }
+}
+{{}}
+```
+
+The rendered output looks like this:
+
+{{< typeit code=java >}}
+public class HelloWorld {
+ public static void main(String []args) {
+ System.out.println("Hello World");
+ }
+}
+{{< /typeit >}}
+
+## 3 Group Content {#group-content}
+
+All typing animations start at the same time by default.
+But sometimes you may want to start a set of `typeit` contents in order.
+
+A set of `typeit` contents with the same value of named parameter `group` will start typing animation in sequence.
+
+Example `typeit` input with `group`:
+
+```markdown
+{{}}
+**First** this paragraph begins
+{{}}
+
+{{}}
+**Then** this paragraph begins
+{{}}
+```
+
+The rendered output looks like this:
+
+{{< typeit group=paragraph >}}
+**First** this paragraph begins
+{{< /typeit >}}
+
+{{< typeit group=paragraph >}}
+**Then** this paragraph begins
+{{< /typeit >}}
diff --git a/exampleSite/content/posts/theme-documentation-typeit-shortcode/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-typeit-shortcode/index.zh-cn.md
new file mode 100644
index 0000000..5b1fcff
--- /dev/null
+++ b/exampleSite/content/posts/theme-documentation-typeit-shortcode/index.zh-cn.md
@@ -0,0 +1,114 @@
+---
+weight: 10
+title: "主题文档 - typeit Shortcode"
+date: 2020-03-03T10:29:59+08:00
+lastmod: 2020-03-03T10:29:59+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "typeit shortcode 基于 TypeIt 库提供了打字动画."
+images: ["featured-image.png"]
+resources:
+- name: "featured-image"
+ src: "featured-image.png"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+---
+
+`typeit` shortcode 基于 [TypeIt](https://typeitjs.com/) 库提供了打字动画.
+
+
+
+只需将你需要打字动画的内容插入 `typeit` shortcode 中即可.
+
+## 1 简单内容 {#simple-content}
+
+允许使用 `Markdown` 格式的简单内容, 并且 **不包含** 富文本的块内容, 例如图像等等...
+
+一个 `typeit` 示例:
+
+```markdown
+{{}}
+这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
+{{}}
+```
+
+呈现的输出效果如下:
+
+{{< typeit >}}
+这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
+{{< /typeit >}}
+
+另外, 你也可以自定义 **HTML 标签**.
+
+一个带有 `h4` 标签的 `typeit` 示例:
+
+```markdown
+{{}}
+这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
+{{}}
+```
+
+呈现的输出效果如下:
+
+{{< typeit tag=h4 >}}
+这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
+{{< /typeit >}}
+
+## 2 代码内容 {#code-content}
+
+代码内容也是允许的, 并且通过使用参数 `code` 指定语言类型可以实习语法高亮.
+
+一个带有 `code` 参数的 `typeit` 示例:
+
+```markdown
+{{}}
+public class HelloWorld {
+ public static void main(String []args) {
+ System.out.println("Hello World");
+ }
+}
+{{}}
+```
+
+呈现的输出效果如下:
+
+{{< typeit code=java >}}
+public class HelloWorld {
+ public static void main(String []args) {
+ System.out.println("Hello World");
+ }
+}
+{{< /typeit >}}
+
+## 3 分组内容 {#code-content}
+
+默认情况下, 所有打字动画都是同时开始的.
+但是有时你可能需要按顺序开始一组 `typeit` 内容的打字动画.
+
+一组具有相同 `group` 参数值的 `typeit` 内容将按顺序开始打字动画.
+
+一个带有 `group` 参数的 `typeit` 示例:
+
+```markdown
+{{}}
+**首先**, 这个段落开始
+{{}}
+
+{{}}
+**然后**, 这个段落开始
+{{}}
+```
+
+呈现的输出效果如下:
+
+{{< typeit group=paragraph >}}
+**首先**, 这个段落开始
+{{< /typeit >}}
+
+{{< typeit group=paragraph >}}
+**然后**, 这个段落开始
+{{< /typeit >}}