chore(docs): update shortcodes docs

6 files changed, 132 insertions, 114 deletions

diff --git a/exampleSite/content/posts/theme-documentation-built-in-shortcodes.en.md b/exampleSite/content/posts/theme-documentation-built-in-shortcodes.en.md
index f61d94a..b7c41fc 100644
--- a/exampleSite/content/posts/theme-documentation-built-in-shortcodes.en.md
+++ b/exampleSite/content/posts/theme-documentation-built-in-shortcodes.en.md
@@ -28,7 +28,7 @@ A shortcode is a simple snippet that can generate reasonable HTML code and confo
 
 Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
 
-## figure {#figure}
+## 1 figure {#figure}
 
 [Documentation of `figure`](https://gohugo.io/content-management/shortcodes#figure)
 
@@ -53,7 +53,7 @@ The HTML looks like this:
 </figure>
 ```
 
-## gist
+## 2 gist
 
 [Documentation of `gist`](https://gohugo.io/content-management/shortcodes#gist)
 
@@ -73,7 +73,7 @@ The HTML looks like this:
 <script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
 ```
 
-## highlight
+## 3 highlight
 
 [Documentation of `highlight`](https://gohugo.io/content-management/shortcodes#instagram)
 
@@ -105,7 +105,7 @@ The rendered output looks like this:
 </section>
 {{< /highlight >}}
 
-## instagram
+## 4 instagram
 
 [Documentation of `instagram`](https://gohugo.io/content-management/shortcodes#instagram)
 
@@ -119,7 +119,7 @@ The rendered output looks like this:
 
 {{< instagram BWNjjyYFxVx hidecaption >}}
 
-## param
+## 5 param
 
 [Documentation of `param`](https://gohugo.io/content-management/shortcodes#param)
 
@@ -133,11 +133,11 @@ The rendered output looks like this:
 
 {{< param description >}}
 
-## ref and relref {#ref-and-relref}
+## 6 ref and relref {#ref-and-relref}
 
 [Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes#ref-and-relref)
 
-## tweet
+## 7 tweet
 
 [Documentation of `tweet`](https://gohugo.io/content-management/shortcodes#tweet)
 
@@ -151,7 +151,7 @@ The rendered output looks like this:
 
 {{< tweet 877500564405444608 >}}
 
-## vimeo
+## 8 vimeo
 
 [Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes#vimeo)
 
@@ -165,7 +165,7 @@ The rendered output looks like this:
 
 {{< vimeo 146022717 >}}
 
-## youtube
+## 9 youtube
 
 [Documentation of `youtube`](https://gohugo.io/content-management/shortcodes#youtube)
 
diff --git a/exampleSite/content/posts/theme-documentation-built-in-shortcodes.fr.md b/exampleSite/content/posts/theme-documentation-built-in-shortcodes.fr.md
index 8fa768a..2165eef 100644
--- a/exampleSite/content/posts/theme-documentation-built-in-shortcodes.fr.md
+++ b/exampleSite/content/posts/theme-documentation-built-in-shortcodes.fr.md
@@ -33,7 +33,7 @@ A shortcode is a simple snippet that can generate reasonable HTML code and confo
 
 Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
 
-## figure {#figure}
+## 1 figure {#figure}
 
 [Documentation of `figure`](https://gohugo.io/content-management/shortcodes#figure)
 
@@ -58,7 +58,7 @@ The HTML looks like this:
 </figure>
 ```
 
-## gist
+## 2 gist
 
 [Documentation of `gist`](https://gohugo.io/content-management/shortcodes#gist)
 
@@ -78,7 +78,7 @@ The HTML looks like this:
 <script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
 ```
 
-## highlight
+## 3 highlight
 
 [Documentation of `highlight`](https://gohugo.io/content-management/shortcodes#instagram)
 
@@ -110,7 +110,7 @@ The rendered output looks like this:
 </section>
 {{< /highlight >}}
 
-## instagram
+## 4 instagram
 
 [Documentation of `instagram`](https://gohugo.io/content-management/shortcodes#instagram)
 
@@ -124,7 +124,7 @@ The rendered output looks like this:
 
 {{< instagram BWNjjyYFxVx hidecaption >}}
 
-## param
+## 5 param
 
 [Documentation of `param`](https://gohugo.io/content-management/shortcodes#param)
 
@@ -138,11 +138,11 @@ The rendered output looks like this:
 
 {{< param description >}}
 
-## ref and relref {#ref-and-relref}
+## 6 ref and relref {#ref-and-relref}
 
 [Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes#ref-and-relref)
 
-## tweet
+## 7 tweet
 
 [Documentation of `tweet`](https://gohugo.io/content-management/shortcodes#tweet)
 
@@ -156,7 +156,7 @@ The rendered output looks like this:
 
 {{< tweet 877500564405444608 >}}
 
-## vimeo
+## 8 vimeo
 
 [Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes#vimeo)
 
@@ -170,7 +170,7 @@ The rendered output looks like this:
 
 {{< vimeo 146022717 >}}
 
-## youtube
+## 9 youtube
 
 [Documentation of `youtube`](https://gohugo.io/content-management/shortcodes#youtube)
 
diff --git a/exampleSite/content/posts/theme-documentation-built-in-shortcodes.zh-cn.md b/exampleSite/content/posts/theme-documentation-built-in-shortcodes.zh-cn.md
index 85e21ff..1efb081 100644
--- a/exampleSite/content/posts/theme-documentation-built-in-shortcodes.zh-cn.md
+++ b/exampleSite/content/posts/theme-documentation-built-in-shortcodes.zh-cn.md
@@ -29,7 +29,7 @@ shortcode 是一个简单代码段, 可以生成合理的 HTML 代码, 并且符
 Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见的用法.
 提供这些 shortcodes 是为了方便保持你的 Markdown 内容简洁.
 
-## figure {#figure}
+## 1 figure {#figure}
 
 [`figure` 的文档](https://gohugo.io/content-management/shortcodes#figure)
 
@@ -54,7 +54,7 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见�
 </figure>
 ```
 
-## gist
+## 2 gist
 
 [`gist` 的文档](https://gohugo.io/content-management/shortcodes#gist)
 
@@ -74,7 +74,7 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见�
 <script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
 ```
 
-## highlight
+## 3 highlight
 
 [`highlight` 的文档](https://gohugo.io/content-management/shortcodes#instagram)
 
@@ -106,7 +106,7 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见�
 </section>
 {{< /highlight >}}
 
-## instagram
+## 4 instagram
 
 [`instagram` 的文档](https://gohugo.io/content-management/shortcodes#instagram)
 
@@ -120,7 +120,7 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见�
 
 {{< instagram BWNjjyYFxVx hidecaption >}}
 
-## param
+## 5 param
 
 [`param` 的文档](https://gohugo.io/content-management/shortcodes#param)
 
@@ -134,11 +134,11 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见�
 
 {{< param description >}}
 
-## ref 和 relref {#ref-and-relref}
+## 6 ref 和 relref {#ref-and-relref}
 
 [`ref` 和 `relref` 的文档](https://gohugo.io/content-management/shortcodes#ref-and-relref)
 
-## tweet
+## 7 tweet
 
 [`tweet` 的文档](https://gohugo.io/content-management/shortcodes#tweet)
 
@@ -152,7 +152,7 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见�
 
 {{< tweet 877500564405444608 >}}
 
-## vimeo
+## 8 vimeo
 
 [`vimeo` 的文档](https://gohugo.io/content-management/shortcodes#vimeo)
 
@@ -166,7 +166,7 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见�
 
 {{< vimeo 146022717 >}}
 
-## youtube
+## 9 youtube
 
 [`youtube` 的文档](https://gohugo.io/content-management/shortcodes#youtube)
 
diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md
index 08927cf..427f555 100644
--- a/exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md
+++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md
@@ -20,7 +20,7 @@ lightgallery: true
 
 <!--more-->
 
-## style
+## 1 style
 
 {{< version 0.2.0 changed >}}
 
@@ -48,7 +48,7 @@ The rendered output looks like this:
 This is a **right-aligned** paragraph.
 {{< /style >}}
 
-## link
+## 2 link
 
 {{< version 0.2.0 >}}
 
@@ -112,7 +112,7 @@ The rendered output looks like this (hover over the link, there should be a tool
 
 {{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
 
-## image
+## 3 image
 
 {{< version 0.2.0 changed >}}
 
@@ -182,7 +182,7 @@ The rendered output looks like this:
 
 {{< image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" >}}
 
-## admonition
+## 4 admonition
 
 The `admonition` shortcode supports **12** types of banners to help you put notice in your page.
 
@@ -268,13 +268,13 @@ The rendered output looks like this:
 A **tip** banner
 {{< /admonition >}}
 
-## mermaid
+## 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.
 
 Just insert your mermaid code in the `mermaid` shortcode and that’s it.
 
-### Flowchart {#flowchart}
+### 5.1 Flowchart {#flowchart}
 
 Example **flowchart** `mermaid` input:
 
@@ -298,7 +298,7 @@ graph LR;
     C -->|Two| E[Result two]
 {{< /mermaid >}}
 
-### Sequence Diagram {#sequence-diagram}
+### 5.2 Sequence Diagram {#sequence-diagram}
 
 Example **sequence diagram** `mermaid` input:
 
@@ -334,7 +334,7 @@ sequenceDiagram
     Bob-->John: Jolly good!
 {{< /mermaid >}}
 
-### GANTT {#gantt}
+### 5.3 GANTT {#gantt}
 
 Example **GANTT** `mermaid` input:
 
@@ -378,7 +378,7 @@ gantt
     Add to mermaid                      :1d
 {{< /mermaid >}}
 
-### Class Diagram {#class-diagram}
+### 5.4 Class Diagram {#class-diagram}
 
 Example **class diagram** `mermaid` input:
 
@@ -420,7 +420,7 @@ classDiagram
     Class08 <--> C2: Cool label
 {{< /mermaid >}}
 
-### State Diagram {#state-diagram}
+### 5.5 State Diagram {#state-diagram}
 
 Example **state diagram** `mermaid` input:
 
@@ -448,7 +448,7 @@ stateDiagram
     Crash --> [*]
 {{< /mermaid >}}
 
-### Git Graph {#git-graph}
+### 5.6 Git Graph {#git-graph}
 
 Example **git graph** `mermaid` input:
 
@@ -494,7 +494,7 @@ end
     merge newbranch
 {{< /mermaid >}}
 
-### Pie {#pie}
+### 5.7 Pie {#pie}
 
 Example **pie** `mermaid` input:
 
@@ -516,7 +516,7 @@ pie
     "Rats" : 15
 {{< /mermaid >}}
 
-## echarts
+## 6 echarts
 
 [ECharts](https://echarts.apache.org/) is a library helping you to generate interactive data visualization.
 
@@ -904,7 +904,7 @@ The `echarts` shortcode has also the following named parameters:
 
     {{< version 0.2.0 >}} Height of the data visualization, default value is `30rem`.
 
-## mapbox
+## 7 mapbox
 
 {{< version 0.2.0 >}}
 
@@ -960,13 +960,21 @@ The `mapbox` shortcode has the following named parameters to use Mapbox GL JS:
 
     Height of the map, default value is `20rem`.
 
-Example `mapbox` input:
+Example simple `mapbox` input:
 
 ```markdown
 {{</* mapbox 121.485 31.233 12 */>}}
 Or
 {{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}
+```
+
+The rendered output looks like this:
+
+{{< mapbox 121.485 31.233 12 >}}
 
+Example `mapbox` input with the custom style:
+
+```markdown
 {{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4" "mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
 Or
 {{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/navigation-preview-day-v4" dark-style="mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
@@ -974,17 +982,15 @@ Or
 
 The rendered output looks like this:
 
-{{< mapbox 121.485 31.233 12 >}}
-
 {{< 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" >}}
 
-## music
+## 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).
 
 There are three ways to use it the `music` shortcode.
 
-### Custom Music URL {#custom-music-url}
+### 8.1 Custom Music URL {#custom-music-url}
 
 The `music` shortcode has the following named parameters by custom music URL:
 
@@ -1007,14 +1013,14 @@ The `music` shortcode has the following named parameters by custom music URL:
 Example `music` input by custom music URL:
 
 ```markdown
-{{</* music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" */>}}
+{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" */>}}
 ```
 
 The rendered output looks like this:
 
-{{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}}
+{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" >}}
 
-### Music Platform URL Automatic Identification {#automatic-identification}
+### 8.2 Music Platform URL Automatic Identification {#automatic-identification}
 
 The `music` shortcode has one named parameter by music platform URL automatic identification:
 
@@ -1035,7 +1041,7 @@ The rendered output looks like this:
 
 {{< music auto="https://music.163.com/#/playlist?id=60198" >}}
 
-### Custom Server, Type and ID {#custom-server}
+### 8.3 Custom Server, Type and ID {#custom-server}
 
 The `music` shortcode has the following named parameters by custom music platform:
 
@@ -1067,7 +1073,7 @@ The rendered output looks like this:
 
 {{< music netease song 1868553 >}}
 
-### Other Parameters {#other-parameters}
+### 8.4 Other Parameters {#other-parameters}
 
 The `music` shortcode has other named parameters applying to the above three ways:
 
@@ -1117,7 +1123,7 @@ The `music` shortcode has the following named parameters only applying to the ty
 
     Max height of the music list, default value is `340px`.
 
-## bilibili
+## 9 bilibili
 
 {{< version 0.2.0 changed >}}
 
@@ -1160,13 +1166,13 @@ The rendered output looks like this:
 
 {{< bilibili id=BV1TJ411C7An p=3 >}}
 
-## typeit
+## 10 typeit
 
 The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/).
 
 Just insert your content in the `typeit` shortcode and that’s it.
 
-### Simple Content {#simple-content}
+### 10.1 Simple Content {#simple-content}
 
 Simple content is allowed in `Markdown` format and **without** rich block content such as images and more...
 
@@ -1200,7 +1206,7 @@ The rendered output looks like this:
 This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
 {{< /typeit >}}
 
-### Code Content {#code-content}
+### 10.2 Code Content {#code-content}
 
 Code content is allowed and will be highlighted by named parameter `code` for the type of code language.
 
@@ -1226,7 +1232,7 @@ public class HelloWorld {
 }
 {{< /typeit >}}
 
-### Group Content {#group-content}
+### 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.
diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes.fr.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes.fr.md
index 2209e88..98c8beb 100644
--- a/exampleSite/content/posts/theme-documentation-extended-shortcodes.fr.md
+++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes.fr.md
@@ -25,7 +25,7 @@ Sorry, this article has not been completely translated into **French**.
 Welcome to take the time to propose a translation by [:(fas fa-code-branch fa-fw): making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme!
 {{< /admonition >}}
 
-## style
+## 1 style
 
 {{< version 0.2.0 changed >}}
 
@@ -53,7 +53,7 @@ The rendered output looks like this:
 This is a **right-aligned** paragraph.
 {{< /style >}}
 
-## link
+## 2 link
 
 {{< version 0.2.0 >}}
 
@@ -117,7 +117,7 @@ The rendered output looks like this (hover over the link, there should be a tool
 
 {{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
 
-## image
+## 3 image
 
 {{< version 0.2.0 changed >}}
 
@@ -187,7 +187,7 @@ The rendered output looks like this:
 
 {{< image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" >}}
 
-## admonition
+## 4 admonition
 
 The `admonition` shortcode supports **12** types of banners to help you put notice in your page.
 
@@ -273,13 +273,13 @@ The rendered output looks like this:
 A **tip** banner
 {{< /admonition >}}
 
-## mermaid
+## 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.
 
 Just insert your mermaid code in the `mermaid` shortcode and that’s it.
 
-### Flowchart {#flowchart}
+### 5.1 Flowchart {#flowchart}
 
 Example **flowchart** `mermaid` input:
 
@@ -303,7 +303,7 @@ graph LR;
     C -->|Two| E[Result two]
 {{< /mermaid >}}
 
-### Sequence Diagram {#sequence-diagram}
+### 5.2 Sequence Diagram {#sequence-diagram}
 
 Example **sequence diagram** `mermaid` input:
 
@@ -339,7 +339,7 @@ sequenceDiagram
     Bob-->John: Jolly good!
 {{< /mermaid >}}
 
-### GANTT {#gantt}
+### 5.3 GANTT {#gantt}
 
 Example **GANTT** `mermaid` input:
 
@@ -383,7 +383,7 @@ gantt
     Add to mermaid                      :1d
 {{< /mermaid >}}
 
-### Class Diagram {#class-diagram}
+### 5.4 Class Diagram {#class-diagram}
 
 Example **class diagram** `mermaid` input:
 
@@ -425,7 +425,7 @@ classDiagram
     Class08 <--> C2: Cool label
 {{< /mermaid >}}
 
-### State Diagram {#state-diagram}
+### 5.5 State Diagram {#state-diagram}
 
 Example **state diagram** `mermaid` input:
 
@@ -453,7 +453,7 @@ stateDiagram
     Crash --> [*]
 {{< /mermaid >}}
 
-### Git Graph {#git-graph}
+### 5.6 Git Graph {#git-graph}
 
 Example **git graph** `mermaid` input:
 
@@ -499,7 +499,7 @@ end
     merge newbranch
 {{< /mermaid >}}
 
-### Pie {#pie}
+### 5.7 Pie {#pie}
 
 Example **pie** `mermaid` input:
 
@@ -521,7 +521,7 @@ pie
     "Rats" : 15
 {{< /mermaid >}}
 
-## echarts
+## 6 echarts
 
 [ECharts](https://echarts.apache.org/) is a library helping you to generate interactive data visualization.
 
@@ -909,7 +909,7 @@ The `echarts` shortcode has also the following named parameters:
 
     {{< version 0.2.0 >}} Height of the data visualization, default value is `30rem`.
 
-## mapbox
+## 7 mapbox
 
 {{< version 0.2.0 >}}
 
@@ -965,13 +965,21 @@ The `mapbox` shortcode has the following named parameters to use Mapbox GL JS:
 
     Height of the map, default value is `20rem`.
 
-Example `mapbox` input:
+Example simple `mapbox` input:
 
 ```markdown
 {{</* mapbox 121.485 31.233 12 */>}}
 Or
 {{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}
+```
+
+The rendered output looks like this:
+
+{{< mapbox 121.485 31.233 12 >}}
 
+Example `mapbox` input with the custom style:
+
+```markdown
 {{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4" "mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
 Or
 {{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/navigation-preview-day-v4" dark-style="mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
@@ -979,17 +987,15 @@ Or
 
 The rendered output looks like this:
 
-{{< mapbox 121.485 31.233 12 >}}
-
 {{< 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" >}}
 
-## music
+## 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).
 
 There are three ways to use it the `music` shortcode.
 
-### Custom Music URL {#custom-music-url}
+### 8.1 Custom Music URL {#custom-music-url}
 
 The `music` shortcode has the following named parameters by custom music URL:
 
@@ -1012,14 +1018,14 @@ The `music` shortcode has the following named parameters by custom music URL:
 Example `music` input by custom music URL:
 
 ```markdown
-{{</* music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" */>}}
+{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" */>}}
 ```
 
 The rendered output looks like this:
 
-{{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}}
+{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" >}}
 
-### Music Platform URL Automatic Identification {#automatic-identification}
+### 8.2 Music Platform URL Automatic Identification {#automatic-identification}
 
 The `music` shortcode has one named parameter by music platform URL automatic identification:
 
@@ -1040,7 +1046,7 @@ The rendered output looks like this:
 
 {{< music auto="https://music.163.com/#/playlist?id=60198" >}}
 
-### Custom Server, Type and ID {#custom-server}
+### 8.3 Custom Server, Type and ID {#custom-server}
 
 The `music` shortcode has the following named parameters by custom music platform:
 
@@ -1072,7 +1078,7 @@ The rendered output looks like this:
 
 {{< music netease song 1868553 >}}
 
-### Other Parameters {#other-parameters}
+### 8.4 Other Parameters {#other-parameters}
 
 The `music` shortcode has other named parameters applying to the above three ways:
 
@@ -1122,7 +1128,7 @@ The `music` shortcode has the following named parameters only applying to the ty
 
     Max height of the music list, default value is `340px`.
 
-## bilibili
+## 9 bilibili
 
 {{< version 0.2.0 changed >}}
 
@@ -1165,13 +1171,13 @@ The rendered output looks like this:
 
 {{< bilibili id=BV1TJ411C7An p=3 >}}
 
-## typeit
+## 10 typeit
 
 The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/).
 
 Just insert your content in the `typeit` shortcode and that’s it.
 
-### Simple Content {#simple-content}
+### 10.1 Simple Content {#simple-content}
 
 Simple content is allowed in `Markdown` format and **without** rich block content such as images and more...
 
@@ -1205,7 +1211,7 @@ The rendered output looks like this:
 This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
 {{< /typeit >}}
 
-### Code Content {#code-content}
+### 10.2 Code Content {#code-content}
 
 Code content is allowed and will be highlighted by named parameter `code` for the type of code language.
 
@@ -1231,7 +1237,7 @@ public class HelloWorld {
 }
 {{< /typeit >}}
 
-### Group Content {#group-content}
+### 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.
diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes.zh-cn.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes.zh-cn.md
index 9590c57..1c4730a 100644
--- a/exampleSite/content/posts/theme-documentation-extended-shortcodes.zh-cn.md
+++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes.zh-cn.md
@@ -23,7 +23,7 @@ mapbox:
 
 <!--more-->
 
-## style
+## 1 style
 
 {{< version 0.2.0 changed >}}
 
@@ -50,7 +50,7 @@ This is a **right-aligned** paragraph.
 This is a **right-aligned** paragraph.
 {{< /style >}}
 
-## link
+## 2 link
 
 {{< version 0.2.0 >}}
 
@@ -115,7 +115,7 @@ This is a **right-aligned** paragraph.
 
 {{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
 
-## image
+## 3 image
 
 {{< version 0.2.0 changed >}}
 
@@ -185,7 +185,7 @@ This is a **right-aligned** paragraph.
 
 {{< image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" >}}
 
-## admonition
+## 4 admonition
 
 `admonition` shortcode 支持 **12** 种 帮助你在页面中插入提示的横幅.
 
@@ -271,13 +271,13 @@ This is a **right-aligned** paragraph.
 一个 **技巧** 横幅
 {{< /admonition >}}
 
-## mermaid
+## 5 mermaid
 
 [mermaid](https://mermaidjs.github.io/) 是一个可以帮助你在文章中生成图表和流程图的库, 类似 Markdown 的语法.
 
 只需将你的 mermaid 代码插入 `mermaid` shortcode 中即可.
 
-### 流程图 {#flowchart}
+### 5.1 流程图 {#flowchart}
 
 一个 **流程图** `mermaid` 示例:
 
@@ -301,7 +301,7 @@ graph LR;
     C -->|Two| E[Result two]
 {{< /mermaid >}}
 
-### 时序图 {#sequence-diagram}
+### 5.2 时序图 {#sequence-diagram}
 
 一个 **时序图** `mermaid` 示例:
 
@@ -337,7 +337,7 @@ sequenceDiagram
     Bob-->John: Jolly good!
 {{< /mermaid >}}
 
-### 甘特图 {#gantt}
+### 5.3 甘特图 {#gantt}
 
 一个 **甘特图** `mermaid` 示例:
 
@@ -381,7 +381,7 @@ gantt
     Add to mermaid                      :1d
 {{< /mermaid >}}
 
-### 类图 {#class-diagram}
+### 5.4 类图 {#class-diagram}
 
 一个 **类图** `mermaid` 示例:
 
@@ -423,7 +423,7 @@ classDiagram
     Class08 <--> C2: Cool label
 {{< /mermaid >}}
 
-### 状态图 {#state-diagram}
+### 5.5 状态图 {#state-diagram}
 
 一个 **状态图** `mermaid` 示例:
 
@@ -451,7 +451,7 @@ stateDiagram
     Crash --> [*]
 {{< /mermaid >}}
 
-### Git 图 {#git-graph}
+### 5.6 Git 图 {#git-graph}
 
 一个 **Git 图** `mermaid` 示例:
 
@@ -497,7 +497,7 @@ end
     merge newbranch
 {{< /mermaid >}}
 
-### 饼图 {#pie}
+### 5.7 饼图 {#pie}
 
 一个 **饼图** `mermaid` 示例:
 
@@ -519,7 +519,7 @@ pie
     "Rats" : 15
 {{< /mermaid >}}
 
-## echarts
+## 6 echarts
 
 [ECharts](https://echarts.apache.org/) 是一个帮助你生成交互式数据可视化的库.
 
@@ -907,7 +907,7 @@ data = [
 
     {{< version 0.2.0 >}} 数据可视化的高度, 默认值是 `30rem`.
 
-## mapbox
+## 7 mapbox
 
 {{< version 0.2.0 >}}
 
@@ -963,13 +963,21 @@ data = [
 
     地图的高度, 默认值是 `20rem`.
 
-一个 `mapbox` 示例:
+一个简单的 `mapbox` 示例:
 
 ```markdown
 {{</* mapbox 121.485 31.233 12 */>}}
 或者
 {{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}
+```
+
+呈现的输出效果如下:
+
+{{< mapbox 121.485 31.233 12 >}}
 
+一个带有自定义样式的 `mapbox` 示例:
+
+```markdown
 {{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1" */>}}
 或者
 {{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/streets-zh-v1" */>}}
@@ -977,17 +985,15 @@ data = [
 
 呈现的输出效果如下:
 
-{{< mapbox 121.485 31.233 12 >}}
-
 {{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1?optimize=true" >}}
 
-## music
+## 8 music
 
 `music` shortcode 基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 提供了一个内嵌的响应式音乐播放器.
 
 有三种方式使用 `music` shortcode.
 
-### 自定义音乐 URL {#custom-music-url}
+### 8.1 自定义音乐 URL {#custom-music-url}
 
 `music` shortcode 有以下命名参数来使用自定义音乐 URL:
 
@@ -1010,14 +1016,14 @@ data = [
 一个使用自定义音乐 URL 的 `music` 示例:
 
 ```markdown
-{{</* music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" */>}}
+{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" */>}}
 ```
 
 呈现的输出效果如下:
 
-{{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}}
+{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" >}}
 
-### 音乐平台 URL 的自动识别 {#automatic-identification}
+### 8.2 音乐平台 URL 的自动识别 {#automatic-identification}
 
 `music` shortcode 有一个命名参数来使用音乐平台 URL 的自动识别:
 
@@ -1037,7 +1043,7 @@ data = [
 
 {{< music auto="https://music.163.com/#/playlist?id=60198" >}}
 
-### 自定义音乐平台, 类型和 ID {#custom-server}
+### 8.3 自定义音乐平台, 类型和 ID {#custom-server}
 
 `music` shortcode 有以下命名参数来使用自定义音乐平台:
 
@@ -1069,7 +1075,7 @@ data = [
 
 {{< music netease song 1868553 >}}
 
-### 其它参数 {#other-parameters}
+### 8.4 其它参数 {#other-parameters}
 
 `music` shortcode 有一些可以应用于以上三种方式的其它命名参数:
 
@@ -1119,7 +1125,7 @@ data = [
 
     音乐列表的最大高度, 默认值是 `340px`.
 
-## bilibili
+## 9 bilibili
 
 {{< version 0.2.0 changed >}}
 
@@ -1161,13 +1167,13 @@ https://www.bilibili.com/video/BV1TJ411C7An?p=3
 
 {{< bilibili id=BV1TJ411C7An p=3 >}}
 
-## typeit
+## 10 typeit
 
 `typeit` shortcode 基于 [TypeIt](https://typeitjs.com/) 提供了打字动画.
 
 只需将你需要打字动画的内容插入 `typeit` shortcode 中即可.
 
-### 简单内容 {#simple-content}
+### 10.1 简单内容 {#simple-content}
 
 允许使用 `Markdown` 格式的简单内容, 并且 **不包含** 富文本的块内容, 例如图像等等...
 
@@ -1201,7 +1207,7 @@ https://www.bilibili.com/video/BV1TJ411C7An?p=3
 这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
 {{< /typeit >}}
 
-### 代码内容 {#code-content}
+### 10.2 代码内容 {#code-content}
 
 代码内容也是允许的, 并且通过使用参数 `code` 指定语言类型可以实习语法高亮.
 
@@ -1227,7 +1233,7 @@ public class HelloWorld {
 }
 {{< /typeit >}}
 
-### 分组内容 {#code-content}
+### 10.3 分组内容 {#code-content}
 
 默认情况下, 所有打字动画都是同时开始的.
 但是有时你可能需要按顺序开始一组 `typeit` 内容的打字动画.