feat(shortcode): add mapbox shortcode (#190)

* feat(shortcode): add mapbox shortcode

* docs: split shortcodes into built-in shortcodes and extended shortcodes

* docs(shortcodes): add docs for mapbox shortcode

* docs(shortcodes): fix an error in shortcodes docs

29 files changed, 1230 insertions, 684 deletions

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 489a8c5..b4886a2 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -768,8 +768,8 @@ enableEmoji = true
     # whether to show link to Raw Markdown content of the post
     # 是否在文章页面显示原始 Markdown 文档链接
     linkToMarkdown = true
-  # mathematical formulas (KaTeX https://katex.org/)
-  # 数学公式 (KaTeX https://katex.org/)
+  # KaTeX mathematical formulas config (KaTeX https://katex.org/)
+  # KaTeX 数学公式配置 (KaTeX https://katex.org/)
   [params.math]
     enable = true
     # default block delimiter is $$ ... $$ and \\[ ... \\]
@@ -786,6 +786,30 @@ enableEmoji = true
     # KaTeX extension mhchem
     # KaTeX 插件 mhchem
     mhchem = true
+  # Mapbox GL JS config (Mapbox GL JS https://docs.mapbox.com/mapbox-gl-js)
+  # Mapbox GL JS 配置 (Mapbox GL JS https://docs.mapbox.com/mapbox-gl-js)
+  [params.mapbox]
+    # access token of Mapbox GL JS
+    # Mapbox GL JS 的 access token
+    accessToken = "pk.eyJ1IjoiZGlsbG9uenEiLCJhIjoiY2s2czd2M2x3MDA0NjNmcGxmcjVrZmc2cyJ9.aSjv2BNuZUfARvxRYjSVZQ"
+    # style for the light theme
+    # 浅色主题的地图样式
+    lightStyle = "mapbox://styles/mapbox/light-v9?optimize=true"
+    # style for the dark theme
+    # 深色主题的地图样式
+    darkStyle = "mapbox://styles/mapbox/dark-v9?optimize=true"
+    # whether to add NavigationControl (https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol)
+    # 是否添加 NavigationControl (https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol)
+    navigation = true
+    # whether to add GeolocateControl (https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol)
+    # 是否添加 GeolocateControl (https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol)
+    geolocate = true
+    # whether to add ScaleControl (https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol)
+    # 是否添加 ScaleControl (https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol)
+    scale = true
+    # whether to add FullscreenControl (https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol)
+    # 是否添加 FullscreenControl (https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol)
+    fullscreen = true
   # site verification code for Google/Bing/Yandex/Pinterest/Baidu
   # 网站验证代码，用于 Google/Bing/Yandex/Pinterest/Baidu
   [params.verification]
@@ -851,6 +875,9 @@ enableEmoji = true
     # echarts@4.6.0 https://echarts.apache.org/
     echartsJS = ''
     echartsMacaronsJS = ''
+    # mapbox-gl@1.8.1 https://docs.mapbox.com/mapbox-gl-js
+    mapboxGLCSS = ''
+    mapboxGLJS = ''
     # gitalk@1.6.2 https://github.com/gitalk/gitalk
     gitalkCSS = ''
     gitalkJS = ''
diff --git a/exampleSite/content/about.en.md b/exampleSite/content/about.en.md
index b46a1d2..bdde261 100644
--- a/exampleSite/content/about.en.md
+++ b/exampleSite/content/about.en.md
@@ -58,11 +58,13 @@ It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) a
 * :(far fa-images): **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
 * :(fab fa-font-awesome): Extended markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
 * :(far fa-sticky-note): Extended markdown syntax for **ruby annotation**
+* :(fas fa-percentage): Extended markdown syntax for **fraction**
 * :(fas fa-square-root-alt): **Mathematical formula** supported by [$ \KaTeX $](https://katex.org/)
 * :(fas fa-project-diagram): **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
 * :(fas fa-chart-pie): **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
+* :(fas fa-map-marked-alt): **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
 * :(fas fa-music): **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
-* :(fas fa-tv): **Bilibili player** shortcode
+* :(fas fa-video): **Bilibili player** shortcode
 * :(far fa-bell): Kinds of **admonitions** shortcode
 * :(fas fa-align-left): **Custom style** shortcode
 * :(fas fa-i-cursor): **Animated typing** supported by [TypeIt](https://typeitjs.com/)
@@ -87,6 +89,7 @@ Thanks to the authors of following resources included in the theme:
 * [$ \KaTeX $](https://katex.org/)
 * [mermaid](https://github.com/knsv/mermaid)
 * [ECharts](https://echarts.apache.org/)
+* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
 * [APlayer](https://github.com/MoePlayer/APlayer)
 * [MetingJS](https://github.com/metowolf/MetingJS)
 * [Gitalk](https://github.com/gitalk/gitalk)
diff --git a/exampleSite/content/about.fr.md b/exampleSite/content/about.fr.md
index d16afba..50e4c22 100644
--- a/exampleSite/content/about.fr.md
+++ b/exampleSite/content/about.fr.md
@@ -63,11 +63,13 @@ It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) a
 * :(far fa-images): **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
 * :(fab fa-font-awesome): Extended markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
 * :(far fa-sticky-note): Extended markdown syntax for **ruby annotation**
+* :(fas fa-percentage): Extended markdown syntax for **fraction**
 * :(fas fa-square-root-alt): **Mathematical formula** supported by [$ \KaTeX $](https://katex.org/)
 * :(fas fa-project-diagram): **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
 * :(fas fa-chart-pie): **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
+* :(fas fa-map-marked-alt): **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
 * :(fas fa-music): **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
-* :(fas fa-tv): **Bilibili player** shortcode
+* :(fas fa-video): **Bilibili player** shortcode
 * :(far fa-bell): Kinds of **admonitions** shortcode
 * :(fas fa-align-left): **Custom style** shortcode
 * :(fas fa-i-cursor): **Animated typing** supported by [TypeIt](https://typeitjs.com/)
@@ -92,6 +94,7 @@ Thanks to the authors of following resources included in the theme:
 * [$ \KaTeX $](https://katex.org/)
 * [mermaid](https://github.com/knsv/mermaid)
 * [ECharts](https://echarts.apache.org/)
+* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
 * [APlayer](https://github.com/MoePlayer/APlayer)
 * [MetingJS](https://github.com/metowolf/MetingJS)
 * [Gitalk](https://github.com/gitalk/gitalk)
diff --git a/exampleSite/content/about.zh-cn.md b/exampleSite/content/about.zh-cn.md
index 75b1487..cb423fb 100644
--- a/exampleSite/content/about.zh-cn.md
+++ b/exampleSite/content/about.zh-cn.md
@@ -17,7 +17,7 @@ lightgallery: true
 
 它的原型基于 [LeaveIt 主题](https://github.com/liuzc/LeaveIt/) 和 [KeepIt 主题](https://github.com/liuzc/LeaveIt/)。
 
-![Hugo 主题 LoveIt](/images/Apple-Devices-Preview.png "Hugo Theme LoveIt")
+![Hugo 主题 LoveIt](/images/Apple-Devices-Preview.png "Hugo 主题 LoveIt")
 
 ### 特性
 
@@ -33,7 +33,7 @@ lightgallery: true
 #### 外观和布局
 
 * [:(fas fa-desktop):]/[:(fas fa-mobile):] **响应式**布局
-* [:(fas fa-sun):]/[:(fas fa-moon):] **[白天]/[夜晚]** 主题模式
+* [:(fas fa-sun):]/[:(fas fa-moon):] **[浅色]/[深色]** 主题模式
 * :(fas fa-layer-group): 全局一致的**设计语言**
 * :(fas fa-ellipsis-h): 支持**分页**
 * :(far fa-list-alt): 易用和自动展开的**文章目录**
@@ -58,11 +58,13 @@ lightgallery: true
 * :(far fa-images): 支持基于 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 的**图片画廊**
 * :(fab fa-font-awesome): 支持 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
 * :(far fa-sticky-note): 支持**上标注释**的扩展 Markdown 语法
+* :(fas fa-percentage): 支持**分数**的扩展 Markdown 语法
 * :(fas fa-square-root-alt): 支持基于 [$ \KaTeX $](https://katex.org/) 的**数学公式**
 * :(fas fa-project-diagram): 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** shortcode
 * :(fas fa-chart-pie): 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** shortcode
+* :(fas fa-map-marked-alt): 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** shortcode
 * :(fas fa-music): 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的**音乐播放器** shortcode
-* :(fas fa-tv): 支持 **Bilibili 视频** shortcode
+* :(fas fa-video): 支持 **Bilibili 视频** shortcode
 * :(far fa-bell): 支持多种**注释**的 shortcode
 * :(fas fa-align-left): 支持**自定义样式**的 shortcode
 * :(fas fa-i-cursor): 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode
@@ -87,6 +89,7 @@ LoveIt 主题中用到了以下项目，感谢它们的作者：
 * [$ \KaTeX $](https://katex.org/)
 * [mermaid](https://github.com/knsv/mermaid)
 * [ECharts](https://echarts.apache.org/)
+* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
 * [APlayer](https://github.com/MoePlayer/APlayer)
 * [MetingJS](https://github.com/metowolf/MetingJS)
 * [Gitalk](https://github.com/gitalk/gitalk)
diff --git a/exampleSite/content/posts/basic-markdown-syntax.en.md b/exampleSite/content/posts/basic-markdown-syntax.en.md
index 9b7e4bc..cb923b1 100644
--- a/exampleSite/content/posts/basic-markdown-syntax.en.md
+++ b/exampleSite/content/posts/basic-markdown-syntax.en.md
@@ -20,6 +20,14 @@ featuredImagePreview: ""
 toc: true
 autoCollapseToc: true
 math: false
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
 lightgallery: true
 linkToMarkdown: true
 share:
@@ -769,5 +777,5 @@ With a reference later in the document defining the URL location:
 [id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
 
 {{< admonition tip >}}
-**LoveIt** theme has [special shortcode for image](../theme-documentation-shortcodes/#image), which provides more features.
+**LoveIt** theme has [special shortcode for image](../theme-documentation-extended-shortcodes/#image), which provides more features.
 {{< /admonition >}}
diff --git a/exampleSite/content/posts/basic-markdown-syntax.fr.md b/exampleSite/content/posts/basic-markdown-syntax.fr.md
index 410a4b6..f1c0f89 100644
--- a/exampleSite/content/posts/basic-markdown-syntax.fr.md
+++ b/exampleSite/content/posts/basic-markdown-syntax.fr.md
@@ -20,6 +20,14 @@ featuredImagePreview: ""
 toc: true
 autoCollapseToc: true
 math: false
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
 lightgallery: true
 linkToMarkdown: true
 share:
@@ -774,5 +782,5 @@ With a reference later in the document defining the URL location:
 [id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
 
 {{< admonition tip >}}
-**LoveIt** theme has [special shortcode for image](../theme-documentation-shortcodes/#image), which provides more features.
+**LoveIt** theme has [special shortcode for image](../theme-documentation-extended-shortcodes/#image), which provides more features.
 {{< /admonition >}}
diff --git a/exampleSite/content/posts/basic-markdown-syntax.zh-cn.md b/exampleSite/content/posts/basic-markdown-syntax.zh-cn.md
index 5ba2755..a981ae6 100644
--- a/exampleSite/content/posts/basic-markdown-syntax.zh-cn.md
+++ b/exampleSite/content/posts/basic-markdown-syntax.zh-cn.md
@@ -20,6 +20,14 @@ featuredImagePreview: ""
 toc: true
 autoCollapseToc: true
 math: false
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
 lightgallery: true
 linkToMarkdown: true
 share:
@@ -776,5 +784,5 @@ Content for chapter one.
 [id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
 
 {{< admonition tip >}}
-**LoveIt** 主题提供了一个包含更多功能的 [图片的 shortcode](../theme-documentation-shortcodes/#image).
+**LoveIt** 主题提供了一个包含更多功能的 [图片的 shortcode](../theme-documentation-extended-shortcodes/#image).
 {{< /admonition >}}
diff --git a/exampleSite/content/posts/emoji-support.en.md b/exampleSite/content/posts/emoji-support.en.md
index da3cf2c..ab21b58 100644
--- a/exampleSite/content/posts/emoji-support.en.md
+++ b/exampleSite/content/posts/emoji-support.en.md
@@ -20,6 +20,14 @@ featuredImagePreview: ""
 toc: true
 autoCollapseToc: true
 math: false
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
 lightgallery: true
 linkToMarkdown: true
 share:
diff --git a/exampleSite/content/posts/emoji-support.fr.md b/exampleSite/content/posts/emoji-support.fr.md
index 94b0454..89fe282 100644
--- a/exampleSite/content/posts/emoji-support.fr.md
+++ b/exampleSite/content/posts/emoji-support.fr.md
@@ -20,6 +20,14 @@ featuredImagePreview: ""
 toc: true
 autoCollapseToc: true
 math: false
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
 lightgallery: true
 linkToMarkdown: true
 share:
diff --git a/exampleSite/content/posts/emoji-support.zh-cn.md b/exampleSite/content/posts/emoji-support.zh-cn.md
index e7e4c5c..28b5082 100644
--- a/exampleSite/content/posts/emoji-support.zh-cn.md
+++ b/exampleSite/content/posts/emoji-support.zh-cn.md
@@ -20,6 +20,14 @@ featuredImagePreview: ""
 toc: true
 autoCollapseToc: true
 math: false
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
 lightgallery: true
 linkToMarkdown: true
 share:
diff --git a/exampleSite/content/posts/theme-documentation-basics.en.md b/exampleSite/content/posts/theme-documentation-basics.en.md
index 0306109..5f65b90 100644
--- a/exampleSite/content/posts/theme-documentation-basics.en.md
+++ b/exampleSite/content/posts/theme-documentation-basics.en.md
@@ -20,6 +20,14 @@ featuredImagePreview: ""
 toc: true
 autoCollapseToc: false
 math: false
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
 lightgallery: true
 linkToMarkdown: true
 share:
@@ -67,14 +75,14 @@ You can download the [latest release :(far fa-file-archive): .zip file](https://
 Alternatively, clone this repository to the `themes` directory:
 
 ```bash
-git clone -b master https://github.com/dillonzq/LoveIt.git themes/LoveIt
+git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt
 ```
 
 Or, create an empty git repository and make this repository a submodule of your site directory:
 
 ```bash
 git init
-git submodule -b master add https://github.com/dillonzq/LoveIt.git themes/LoveIt
+git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
 ```
 
 ### 2.3 Basic Configuration {#basic-configuration}
@@ -320,6 +328,22 @@ Note that some of these parameters are explained in details in other sections of
     copyTex = true
     # KaTeX extension mhchem
     mhchem = true
+  # {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config
+  [params.mapbox]
+    # access token of Mapbox GL JS
+    accessToken = ""
+    # style for the light theme
+    lightStyle = "mapbox://styles/mapbox/light-v9"
+    # style for the dark theme
+    darkStyle = "mapbox://styles/mapbox/dark-v9"
+    # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol" NavigationControl >}}
+    navigation = true
+    # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" GeolocateControl >}}
+    geolocate = true
+    # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol" ScaleControl >}}
+    scale = true
+    # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol" FullscreenControl >}}
+    fullscreen = true
   # Social Share Links in post page
   [params.share]
     enable = true
@@ -459,6 +483,9 @@ Note that some of these parameters are explained in details in other sections of
     # {{< link "https://echarts.apache.org/" "echarts" >}}@4.6.0
     echartsJS = ''
     echartsMacaronsJS = ''
+    # {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" mapbox-gl >}}@1.8.1
+    mapboxGLCSS = ''
+    mapboxGLJS = ''
     # {{< link "https://github.com/gitalk/gitalk" "gitalk" >}}@1.6.2
     gitalkCSS = ''
     gitalkJS = ''
diff --git a/exampleSite/content/posts/theme-documentation-basics.fr.md b/exampleSite/content/posts/theme-documentation-basics.fr.md
index f81dc72..41c13dc 100644
--- a/exampleSite/content/posts/theme-documentation-basics.fr.md
+++ b/exampleSite/content/posts/theme-documentation-basics.fr.md
@@ -20,6 +20,14 @@ featuredImagePreview: ""
 toc: true
 autoCollapseToc: false
 math: false
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
 lightgallery: true
 linkToMarkdown: true
 share:
@@ -72,14 +80,14 @@ You can download the [latest release :(far fa-file-archive): .zip file](https://
 Alternatively, clone this repository to the `themes` directory:
 
 ```bash
-git clone -b master https://github.com/dillonzq/LoveIt.git themes/LoveIt
+git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt
 ```
 
 Or, create an empty git repository and make this repository a submodule of your site directory:
 
 ```bash
 git init
-git submodule -b master add https://github.com/dillonzq/LoveIt.git themes/LoveIt
+git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
 ```
 
 ### 2.3 Basic Configuration {#basic-configuration}
@@ -325,6 +333,22 @@ Note that some of these parameters are explained in details in other sections of
     copyTex = true
     # KaTeX extension mhchem
     mhchem = true
+  # {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config
+  [params.mapbox]
+    # access token of Mapbox GL JS
+    accessToken = ""
+    # style for the light theme
+    lightStyle = "mapbox://styles/mapbox/light-v9"
+    # style for the dark theme
+    darkStyle = "mapbox://styles/mapbox/dark-v9"
+    # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol" NavigationControl >}}
+    navigation = true
+    # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" GeolocateControl >}}
+    geolocate = true
+    # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol" ScaleControl >}}
+    scale = true
+    # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol" FullscreenControl >}}
+    fullscreen = true
   # Social Share Links in post page
   [params.share]
     enable = true
@@ -464,6 +488,9 @@ Note that some of these parameters are explained in details in other sections of
     # {{< link "https://echarts.apache.org/" "echarts" >}}@4.6.0
     echartsJS = ''
     echartsMacaronsJS = ''
+    # {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" mapbox-gl >}}@1.8.1
+    mapboxGLCSS = ''
+    mapboxGLJS = ''
     # {{< link "https://github.com/gitalk/gitalk" "gitalk" >}}@1.6.2
     gitalkCSS = ''
     gitalkJS = ''
diff --git a/exampleSite/content/posts/theme-documentation-basics.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics.zh-cn.md
index 06e2770..aa6cc94 100644
--- a/exampleSite/content/posts/theme-documentation-basics.zh-cn.md
+++ b/exampleSite/content/posts/theme-documentation-basics.zh-cn.md
@@ -20,6 +20,14 @@ featuredImagePreview: ""
 toc: true
 autoCollapseToc: false
 math: false
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
 lightgallery: true
 linkToMarkdown: true
 share:
@@ -67,14 +75,14 @@ cd my_website
 另外, 也可以直接把这个主题克隆到 `themes` 目录:
 
 ```bash
-git clone -b master https://github.com/dillonzq/LoveIt.git themes/LoveIt
+git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt
 ```
 
 或者, 初始化你的项目目录为 git 仓库, 并且把主题仓库作为你的网站目录的子模块:
 
 ```bash
 git init
-git submodule -b master add https://github.com/dillonzq/LoveIt.git themes/LoveIt
+git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
 ```
 
 ### 2.3 基础配置 {#basic-configuration}
@@ -322,6 +330,22 @@ hugo
     copyTex = true
     # KaTeX 插件 mhchem
     mhchem = true
+  # {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} 配置
+  [params.mapbox]
+    # Mapbox GL JS 的 access token
+    accessToken = ""
+    # 浅色主题的地图样式
+    lightStyle = "mapbox://styles/mapbox/light-v9"
+    # 深色主题的地图样式
+    darkStyle = "mapbox://styles/mapbox/dark-v9"
+    # 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol" NavigationControl >}}
+    navigation = true
+    # 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" GeolocateControl >}}
+    geolocate = true
+    # 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol" ScaleControl >}}
+    scale = true
+    # 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol" FullscreenControl >}}
+    fullscreen = true
   # 文章页面的分享信息设置
   [params.share]
     enable = true
@@ -461,6 +485,9 @@ hugo
     # {{< link "https://echarts.apache.org/" "echarts" >}}@4.6.0
     echartsJS = ''
     echartsMacaronsJS = ''
+    # {{< version 0.2.0 new small >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" mapbox-gl >}}@1.8.1
+    mapboxGLCSS = ''
+    mapboxGLJS = ''
     # {{< link "https://github.com/gitalk/gitalk" "gitalk" >}}@1.6.2
     gitalkCSS = ''
     gitalkJS = ''
diff --git a/exampleSite/content/posts/theme-documentation-built-in-shortcodes.en.md b/exampleSite/content/posts/theme-documentation-built-in-shortcodes.en.md
new file mode 100644
index 0000000..600cbb8
--- /dev/null
+++ b/exampleSite/content/posts/theme-documentation-built-in-shortcodes.en.md
@@ -0,0 +1,200 @@
+---
+weight: 3
+title: "Theme Documentation - Built-in Shortcodes"
+subtitle: ""
+date: 2020-03-04T16:29:41+08:00
+lastmod: 2020-03-04T16:29:41+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "Hugo provides multiple built-in shortcodes for author convenience and to keep your markdown content clean."
+license: ""
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+hiddenFromHomePage: false
+
+featuredImage: "/images/theme-documentation-built-in-shortcodes/featured-image.png"
+featuredImagePreview: ""
+
+toc: true
+autoCollapseToc: true
+math: false
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
+lightgallery: true
+linkToMarkdown: true
+share:
+  enable: true
+comment: true
+---
+
+**Hugo** provides multiple built-in shortcodes for author convenience and to keep your markdown content clean.
+
+<!--more-->
+
+Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
+
+But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
+
+To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/).
+A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy.
+
+Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
+
+## `figure` {#figure}
+
+[Documentation of `figure`](https://gohugo.io/content-management/shortcodes/#figure)
+
+Example `figure` input:
+
+```markdown
+{{</* figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
+```
+
+The rendered output looks like this:
+
+{{< figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
+
+The HTML looks like this:
+
+```html
+<figure>
+    <img src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg"/>
+    <figcaption>
+        <h4>Lighthouse (figure)</h4>
+    </figcaption>
+</figure>
+```
+
+## `gist`
+
+[Documentation of `gist`](https://gohugo.io/content-management/shortcodes/#gist)
+
+Example `gist` input:
+
+```markdown
+{{</* gist spf13 7896402 */>}}
+```
+
+The rendered output looks like this:
+
+{{< gist spf13 7896402 >}}
+
+The HTML looks like this:
+
+```html
+<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
+```
+
+## `highlight`
+
+[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes/#instagram)
+
+Example `highlight` input:
+
+```markdown
+{{</* highlight html */>}}
+<section id="main">
+    <div>
+        <h1 id="title">{{ .Title }}</h1>
+        {{ range .Pages }}
+            {{ .Render "summary"}}
+        {{ end }}
+    </div>
+</section>
+{{</* /highlight */>}}
+```
+
+The rendered output looks like this:
+
+{{< highlight html >}}
+<section id="main">
+    <div>
+        <h1 id="title">{{ .Title }}</h1>
+        {{ range .Pages }}
+            {{ .Render "summary"}}
+        {{ end }}
+    </div>
+</section>
+{{< /highlight >}}
+
+## `instagram`
+
+[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes/#instagram)
+
+Example `instagram` input:
+
+```markdown
+{{</* instagram BWNjjyYFxVx hidecaption */>}}
+```
+
+The rendered output looks like this:
+
+{{< instagram BWNjjyYFxVx hidecaption >}}
+
+## `param`
+
+[Documentation of `param`](https://gohugo.io/content-management/shortcodes/#param)
+
+Example `param` input:
+
+```markdown
+{{</* param description */>}}
+```
+
+The rendered output looks like this:
+
+{{< param description >}}
+
+## `ref` and `relref` {#ref-and-relref}
+
+[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
+
+## `tweet`
+
+[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes/#tweet)
+
+Example `tweet` input:
+
+```markdown
+{{</* tweet 877500564405444608 */>}}
+```
+
+The rendered output looks like this:
+
+{{< tweet 877500564405444608 >}}
+
+## `vimeo`
+
+[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes/#vimeo)
+
+Example `vimeo` input:
+
+```markdown
+{{</* vimeo 146022717 */>}}
+```
+
+The rendered output looks like this:
+
+{{< vimeo 146022717 >}}
+
+## `youtube`
+
+[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes/#youtube)
+
+Example `youtube` input:
+
+```markdown
+{{</* youtube w7Ft2ymGmfc */>}}
+```
+
+The rendered output looks like this:
+
+{{< youtube w7Ft2ymGmfc >}}
diff --git a/exampleSite/content/posts/theme-documentation-built-in-shortcodes.fr.md b/exampleSite/content/posts/theme-documentation-built-in-shortcodes.fr.md
new file mode 100644
index 0000000..36f3923
--- /dev/null
+++ b/exampleSite/content/posts/theme-documentation-built-in-shortcodes.fr.md
@@ -0,0 +1,205 @@
+---
+weight: 3
+title: "Thème Documentation - Built-in Shortcodes"
+subtitle: ""
+date: 2020-03-04T16:29:59+08:00
+lastmod: 2020-03-04T16:29:59+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "Hugo fournit plusieurs shortcodes intégrés pour la commodité de l'auteur et pour garder votre contenu de démarque propre."
+license: ""
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+hiddenFromHomePage: false
+
+featuredImage: "/images/theme-documentation-built-in-shortcodes/featured-image.png"
+featuredImagePreview: ""
+
+toc: true
+autoCollapseToc: true
+math: false
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
+lightgallery: true
+linkToMarkdown: true
+share:
+  enable: true
+comment: true
+---
+
+**Hugo** fournit plusieurs shortcodes intégrés pour la commodité de l'auteur et pour garder votre contenu de démarque propre.
+
+<!--more-->
+
+{{< admonition warning >}}
+Sorry, this article has not been completely translated into **French**.
+Welcome to take the time to propose a translation by [making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme!
+{{< /admonition >}}
+
+Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
+
+But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
+
+To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/).
+A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy.
+
+Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
+
+## `figure` {#figure}
+
+[Documentation of `figure`](https://gohugo.io/content-management/shortcodes/#figure)
+
+Example `figure` input:
+
+```markdown
+{{</* figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
+```
+
+The rendered output looks like this:
+
+{{< figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
+
+The HTML looks like this:
+
+```html
+<figure>
+    <img src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg"/>
+    <figcaption>
+        <h4>Lighthouse (figure)</h4>
+    </figcaption>
+</figure>
+```
+
+## `gist`
+
+[Documentation of `gist`](https://gohugo.io/content-management/shortcodes/#gist)
+
+Example `gist` input:
+
+```markdown
+{{</* gist spf13 7896402 */>}}
+```
+
+The rendered output looks like this:
+
+{{< gist spf13 7896402 >}}
+
+The HTML looks like this:
+
+```html
+<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
+```
+
+## `highlight`
+
+[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes/#instagram)
+
+Example `highlight` input:
+
+```markdown
+{{</* highlight html */>}}
+<section id="main">
+    <div>
+        <h1 id="title">{{ .Title }}</h1>
+        {{ range .Pages }}
+            {{ .Render "summary"}}
+        {{ end }}
+    </div>
+</section>
+{{</* /highlight */>}}
+```
+
+The rendered output looks like this:
+
+{{< highlight html >}}
+<section id="main">
+    <div>
+        <h1 id="title">{{ .Title }}</h1>
+        {{ range .Pages }}
+            {{ .Render "summary"}}
+        {{ end }}
+    </div>
+</section>
+{{< /highlight >}}
+
+## `instagram`
+
+[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes/#instagram)
+
+Example `instagram` input:
+
+```markdown
+{{</* instagram BWNjjyYFxVx hidecaption */>}}
+```
+
+The rendered output looks like this:
+
+{{< instagram BWNjjyYFxVx hidecaption >}}
+
+## `param`
+
+[Documentation of `param`](https://gohugo.io/content-management/shortcodes/#param)
+
+Example `param` input:
+
+```markdown
+{{</* param description */>}}
+```
+
+The rendered output looks like this:
+
+{{< param description >}}
+
+## `ref` and `relref` {#ref-and-relref}
+
+[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
+
+## `tweet`
+
+[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes/#tweet)
+
+Example `tweet` input:
+
+```markdown
+{{</* tweet 877500564405444608 */>}}
+```
+
+The rendered output looks like this:
+
+{{< tweet 877500564405444608 >}}
+
+## `vimeo`
+
+[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes/#vimeo)
+
+Example `vimeo` input:
+
+```markdown
+{{</* vimeo 146022717 */>}}
+```
+
+The rendered output looks like this:
+
+{{< vimeo 146022717 >}}
+
+## `youtube`
+
+[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes/#youtube)
+
+Example `youtube` input:
+
+```markdown
+{{</* youtube w7Ft2ymGmfc */>}}
+```
+
+The rendered output looks like this:
+
+{{< youtube w7Ft2ymGmfc >}}
diff --git a/exampleSite/content/posts/theme-documentation-built-in-shortcodes.zh-cn.md b/exampleSite/content/posts/theme-documentation-built-in-shortcodes.zh-cn.md
new file mode 100644
index 0000000..436e149
--- /dev/null
+++ b/exampleSite/content/posts/theme-documentation-built-in-shortcodes.zh-cn.md
@@ -0,0 +1,201 @@
+---
+weight: 3
+title: "主题文档 - 内置 Shortcodes"
+subtitle: ""
+date: 2020-03-04T16:29:59+08:00
+lastmod: 2020-03-04T16:29:59+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "Hugo 提供了多个内置的 Shortcodes, 以方便作者保持 Markdown 内容的整洁."
+license: ""
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+hiddenFromHomePage: false
+
+featuredImage: "/images/theme-documentation-built-in-shortcodes/featured-image.png"
+featuredImagePreview: ""
+
+toc: true
+autoCollapseToc: true
+math: false
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
+lightgallery: true
+linkToMarkdown: true
+share:
+  enable: true
+comment: true
+---
+
+**Hugo** 提供了多个内置的 Shortcodes, 以方便作者保持 Markdown 内容的整洁.
+
+<!--more-->
+
+Hugo 使用 Markdown 为其简单的内容格式. 但是, Markdown 在很多方面都无法很好地支持. 你可以使用纯 HTML 来扩展可能性.
+
+但这恰好是一个坏主意. 大家使用 Markdown, 正是因为它即使不经过渲染也可以轻松阅读. 应该尽可能避免使用 HTML 以保持内容简洁.
+
+为了避免这种限制, Hugo 创建了 [shortcodes](https://gohugo.io/extras/shortcodes/).
+shortcode 是一个简单代码段, 可以生成合理的 HTML 代码, 并且符合 Markdown 的设计哲学.
+
+Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见的用法.
+提供这些 shortcodes 是为了方便保持你的 Markdown 内容简洁.
+
+## `figure` {#figure}
+
+[`figure` 的文档](https://gohugo.io/content-management/shortcodes/#figure)
+
+一个 `figure` 示例:
+
+```markdown
+{{</* figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
+```
+
+呈现的输出效果如下:
+
+{{< figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
+
+输出的 HTML 看起来像这样:
+
+```html
+<figure>
+    <img src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg"/>
+    <figcaption>
+        <h4>Lighthouse (figure)</h4>
+    </figcaption>
+</figure>
+```
+
+## `gist`
+
+[`gist` 的文档](https://gohugo.io/content-management/shortcodes/#gist)
+
+一个 `gist` 示例:
+
+```markdown
+{{</* gist spf13 7896402 */>}}
+```
+
+呈现的输出效果如下:
+
+{{< gist spf13 7896402 >}}
+
+输出的 HTML 看起来像这样:
+
+```html
+<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
+```
+
+## `highlight`
+
+[`highlight` 的文档](https://gohugo.io/content-management/shortcodes/#instagram)
+
+一个 `highlight` 示例:
+
+```markdown
+{{</* highlight html */>}}
+<section id="main">
+    <div>
+        <h1 id="title">{{ .Title }}</h1>
+        {{ range .Pages }}
+            {{ .Render "summary"}}
+        {{ end }}
+    </div>
+</section>
+{{</* /highlight */>}}
+```
+
+呈现的输出效果如下:
+
+{{< highlight html >}}
+<section id="main">
+    <div>
+        <h1 id="title">{{ .Title }}</h1>
+        {{ range .Pages }}
+            {{ .Render "summary"}}
+        {{ end }}
+    </div>
+</section>
+{{< /highlight >}}
+
+## `instagram`
+
+[`instagram` 的文档](https://gohugo.io/content-management/shortcodes/#instagram)
+
+一个 `instagram` 示例:
+
+```markdown
+{{</* instagram BWNjjyYFxVx hidecaption */>}}
+```
+
+呈现的输出效果如下:
+
+{{< instagram BWNjjyYFxVx hidecaption >}}
+
+## `param`
+
+[`param` 的文档](https://gohugo.io/content-management/shortcodes/#param)
+
+一个 `param` 示例:
+
+```markdown
+{{</* param description */>}}
+```
+
+呈现的输出效果如下:
+
+{{< param description >}}
+
+## `ref` 和 `relref` {#ref-and-relref}
+
+[`ref` 和 `relref` 的文档](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
+
+## `tweet`
+
+[`tweet` 的文档](https://gohugo.io/content-management/shortcodes/#tweet)
+
+一个 `tweet` 示例:
+
+```markdown
+{{</* tweet 877500564405444608 */>}}
+```
+
+呈现的输出效果如下:
+
+{{< tweet 877500564405444608 >}}
+
+## `vimeo`
+
+[`vimeo` 的文档](https://gohugo.io/content-management/shortcodes/#vimeo)
+
+一个 `vimeo` 示例:
+
+```markdown
+{{</* vimeo 146022717 */>}}
+```
+
+呈现的输出效果如下:
+
+{{< vimeo 146022717 >}}
+
+## `youtube`
+
+[`youtube` 的文档](https://gohugo.io/content-management/shortcodes/#youtube)
+
+一个 `youtube` 示例:
+
+```markdown
+{{</* youtube w7Ft2ymGmfc */>}}
+```
+
+呈现的输出效果如下:
+
+{{< youtube w7Ft2ymGmfc >}}
diff --git a/exampleSite/content/posts/theme-documentation-content.en.md b/exampleSite/content/posts/theme-documentation-content.en.md
index a49b7c9..77e90b2 100644
--- a/exampleSite/content/posts/theme-documentation-content.en.md
+++ b/exampleSite/content/posts/theme-documentation-content.en.md
@@ -20,6 +20,14 @@ featuredImagePreview: ""
 toc: true
 autoCollapseToc: false
 math: true
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
 lightgallery: true
 linkToMarkdown: true
 share:
@@ -39,7 +47,7 @@ A few suggestions to help you get a good looking site quickly:
 * Keep static pages in the `content` directory, for example: `content/about.md`
 * Keep media like images in the `static` directory, for example: `static/images/screenshot.png`
 
-## 2 Front Matter
+## 2 Front Matter {#front-matter}
 
 **Hugo** allows you to add front matter in `yaml`, `toml` or `json` to your content files.
 
@@ -67,6 +75,14 @@ featuredImagePreview: ""
 toc: false
 autoCollapseToc: true
 math: true
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
 lightgallery: true
 linkToMarkdown: true
 share:
@@ -92,6 +108,7 @@ comment: true
 * **toc**: if `true`, the content will show the table of the contents.
 * **autoCollapseToc**: if `true`, the table of the contents will be automatically collapsed.
 * **math**: if `true`, the mathematical formula in the content will be automatically rendered.
+* **mapbox**: {{< version 0.2.0 >}} the same as `params.mapbox` in the [site configuration](../theme-documentation-basics/#site-configuration).
 * **lightgallery**: if `true`, images in the content will be shown as the gallery.
 * **linkToMarkdown**: if `true`, the footer of the content will show the link to the orignal Markdown file.
 * **share**: the same as `params.share` in the [site configuration](../theme-documentation-basics/#site-configuration).
diff --git a/exampleSite/content/posts/theme-documentation-content.fr.md b/exampleSite/content/posts/theme-documentation-content.fr.md
index 8ed83be..77c9aee 100644
--- a/exampleSite/content/posts/theme-documentation-content.fr.md
+++ b/exampleSite/content/posts/theme-documentation-content.fr.md
@@ -20,6 +20,14 @@ featuredImagePreview: ""
 toc: true
 autoCollapseToc: false
 math: true
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
 lightgallery: true
 linkToMarkdown: true
 share:
@@ -44,7 +52,7 @@ A few suggestions to help you get a good looking site quickly:
 * Keep static pages in the `content` directory, for example: `content/about.md`
 * Keep media like images in the `static` directory, for example: `static/images/screenshot.png`
 
-## 2 Front Matter
+## 2 Front Matter {#front-matter}
 
 **Hugo** allows you to add front matter in `yaml`, `toml` or `json` to your content files.
 
@@ -72,6 +80,14 @@ featuredImagePreview: ""
 toc: false
 autoCollapseToc: true
 math: true
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
 lightgallery: true
 linkToMarkdown: true
 share:
@@ -97,6 +113,7 @@ comment: true
 * **toc**: if `true`, the content will show the table of the contents.
 * **autoCollapseToc**: if `true`, the table of the contents will be automatically collapsed.
 * **math**: if `true`, the mathematical formula in the content will be automatically rendered.
+* **mapbox**: {{< version 0.2.0 >}} the same as `params.mapbox` in the [site configuration](../theme-documentation-basics/#site-configuration).
 * **lightgallery**: if `true`, images in the content will be shown as the gallery.
 * **linkToMarkdown**: if `true`, the footer of the content will show the link to the orignal Markdown file.
 * **share**: the same as `params.share` in the [site configuration](../theme-documentation-basics/#site-configuration).
diff --git a/exampleSite/content/posts/theme-documentation-content.zh-cn.md b/exampleSite/content/posts/theme-documentation-content.zh-cn.md
index 336bb2a..892f5e1 100644
--- a/exampleSite/content/posts/theme-documentation-content.zh-cn.md
+++ b/exampleSite/content/posts/theme-documentation-content.zh-cn.md
@@ -20,6 +20,14 @@ featuredImagePreview: ""
 toc: true
 autoCollapseToc: false
 math: true
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
 lightgallery: true
 linkToMarkdown: true
 share:
@@ -39,7 +47,7 @@ comment: true
 * 保持简单的静态页面存放在 `content` 目录, 例如: `content/about.md`
 * 保持图片之类的媒体资源存放在 `static` 目录, 例如: `static/images/screenshot.png`
 
-## 2 前置参数
+## 2 前置参数 {#front-matter}
 
 **Hugo** 允许你在文章内容前面添加 `yaml`, `toml` 或者 `json` 格式的前置参数.
 
@@ -67,6 +75,14 @@ featuredImagePreview: ""
 toc: false
 autoCollapseToc: true
 math: true
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
 lightgallery: true
 linkToMarkdown: true
 share:
@@ -92,6 +108,7 @@ comment: true
 * **toc**: 如果设为 `true`, 这篇文章会显示右侧目录.
 * **autoCollapseToc**: 如果设为 `true`, 文章目录会自动折叠.
 * **math**: 如果设为 `true`, 将自动渲染文章中的数学公式.
+* **mapbox**: {{< version 0.2.0 >}} 和 [网站配置](../theme-documentation-basics/#site-configuration) 中的 `params.mapbox` 对象相同.
 * **lightgallery**: 如果设为 `true`, 文章中的图片将可以按照画廊形式呈现.
 * **linkToMarkdown**: 如果设为 `true`, 内容的页脚将显示指向原始 Markdown 文件的链接.
 * **share**: 和 [网站配置](../theme-documentation-basics/#site-configuration) 中的 `params.share` 对象相同.
@@ -248,14 +265,14 @@ $$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
 **LoveIt** 主题支持一种 **分数** Markdown 扩展语法:
 
 ```markdown
-[白天]{?/}[夜晚]
+[浅色]{?/}[深色]
 
 [99]{?/}[100]
 ```
 
 呈现的输出效果如下:
 
-[白天]/[夜晚]
+[浅色]/[深色]
 
 [90]/[100]
 
diff --git a/exampleSite/content/posts/theme-documentation-shortcodes.en.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md
index 69dfa72..207542a 100644
--- a/exampleSite/content/posts/theme-documentation-shortcodes.en.md
+++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md
@@ -1,9 +1,9 @@
 ---
-weight: 3
-title: "Theme Documentation - Shortcodes"
+weight: 4
+title: "Theme Documentation - Extended Shortcodes"
 subtitle: ""
-date: 2020-03-04T16:29:41+08:00
-lastmod: 2020-03-04T16:29:41+08:00
+date: 2020-03-03T16:29:41+08:00
+lastmod: 2020-03-03T16:29:41+08:00
 draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
@@ -14,12 +14,20 @@ tags: ["shortcodes"]
 categories: ["documentation"]
 hiddenFromHomePage: false
 
-featuredImage: "/images/theme-documentation-shortcodes/featured-image.jpg"
-featuredImagePreview: ""
+featuredImage: "/images/theme-documentation-extended-shortcodes/featured-image.jpg"
+featuredImagePreview: "/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"
 
 toc: true
 autoCollapseToc: true
 math: false
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
 lightgallery: true
 linkToMarkdown: true
 share:
@@ -31,173 +39,7 @@ comment: true
 
 <!--more-->
 
-Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
-
-But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
-
-To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/).
-A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy.
-
-## Hugo’s Built-in Shortcodes
-
-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}
-
-[Documentation of `figure`](https://gohugo.io/content-management/shortcodes/#figure)
-
-Example `figure` input:
-
-```markdown
-{{</* figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
-```
-
-The rendered output looks like this:
-
-{{< figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
-
-The HTML looks like this:
-
-```html
-<figure>
-    <img src="/images/theme-documentation-shortcodes/lighthouse.jpg"/>
-    <figcaption>
-        <h4>Lighthouse (figure)</h4>
-    </figcaption>
-</figure>
-```
-
-### `gist`
-
-[Documentation of `gist`](https://gohugo.io/content-management/shortcodes/#gist)
-
-Example `gist` input:
-
-```markdown
-{{</* gist spf13 7896402 */>}}
-```
-
-The rendered output looks like this:
-
-{{< gist spf13 7896402 >}}
-
-The HTML looks like this:
-
-```html
-<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
-```
-
-### `highlight`
-
-[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes/#instagram)
-
-Example `highlight` input:
-
-```markdown
-{{</* highlight html */>}}
-<section id="main">
-    <div>
-        <h1 id="title">{{ .Title }}</h1>
-        {{ range .Pages }}
-            {{ .Render "summary"}}
-        {{ end }}
-    </div>
-</section>
-{{</* /highlight */>}}
-```
-
-The rendered output looks like this:
-
-{{< highlight html >}}
-<section id="main">
-    <div>
-        <h1 id="title">{{ .Title }}</h1>
-        {{ range .Pages }}
-            {{ .Render "summary"}}
-        {{ end }}
-    </div>
-</section>
-{{< /highlight >}}
-
-### `instagram`
-
-[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes/#instagram)
-
-Example `instagram` input:
-
-```markdown
-{{</* instagram BWNjjyYFxVx hidecaption */>}}
-```
-
-The rendered output looks like this:
-
-{{< instagram BWNjjyYFxVx hidecaption >}}
-
-### `param`
-
-[Documentation of `param`](https://gohugo.io/content-management/shortcodes/#param)
-
-Example `param` input:
-
-```markdown
-{{</* param description */>}}
-```
-
-The rendered output looks like this:
-
-{{< param description >}}
-
-### `ref` and `relref` {#ref-and-relref}
-
-[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
-
-### `tweet`
-
-[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes/#tweet)
-
-Example `tweet` input:
-
-```markdown
-{{</* tweet 877500564405444608 */>}}
-```
-
-The rendered output looks like this:
-
-{{< tweet 877500564405444608 >}}
-
-### `vimeo`
-
-[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes/#vimeo)
-
-Example `vimeo` input:
-
-```markdown
-{{</* vimeo 146022717 */>}}
-```
-
-The rendered output looks like this:
-
-{{< vimeo 146022717 >}}
-
-### `youtube`
-
-[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes/#youtube)
-
-Example `youtube` input:
-
-```markdown
-{{</* youtube w7Ft2ymGmfc */>}}
-```
-
-The rendered output looks like this:
-
-{{< youtube w7Ft2ymGmfc >}}
-
-## LoveIt Shortcodes
-
-**LoveIt** provides multiple shortcodes on top of existing ones.
-
-### `style`
+## `style`
 
 `style` is a shortcode to insert custom style in your post.
 
@@ -210,18 +52,18 @@ And the **second** one is the HTML tag around the content you want to change sty
 Example `style` input:
 
 ```markdown
-{{</* style "text-align: right" */>}}
+{{</* style "text-align: right;" */>}}
 This is a right-aligned paragraph.
 {{</* /style */>}}
 ```
 
 The rendered output looks like this:
 
-{{< style "text-align: right" >}}
+{{< style "text-align: right;" >}}
 This is a right-aligned paragraph.
 {{< /style >}}
 
-### `link`
+## `link`
 
 {{< version 0.2.0 >}}
 
@@ -235,7 +77,7 @@ The `link` shortcode has the following named parameters:
 
 * **content** *[optional]* (**second** positional parameter)
 
-    Content of the link, default is the value of **href** parameter.
+    Content of the link, default value is the value of **href** parameter.
 
     *Markdown or HTML format is supported.*
 
@@ -285,11 +127,11 @@ The rendered output looks like this (hover over the link, there should be a tool
 
 {{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
 
-### `image`
+## `image`
 
 {{< version 0.2.0 changed >}}
 
-`image` shortcode is an alternative to [`figure` shortcode](#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js).
+`image` shortcode is an alternative to [`figure` shortcode](../theme-documentation-built-in-shortcodes/#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js).
 
 The `image` shortcode has the following named parameters:
 
@@ -299,7 +141,7 @@ The `image` shortcode has the following named parameters:
 
 * **alt** *[optional]* (**second** positional parameter)
 
-    Alternate text for the image if the image cannot be displayed, default is the value of **src** parameter.
+    Alternate text for the image if the image cannot be displayed, default value is the value of **src** parameter.
 
     *Markdown or HTML format is supported.*
 
@@ -319,11 +161,11 @@ The `image` shortcode has the following named parameters:
 
 * **src_s** *[optional]*
 
-    URL of the image thumbnail, used for lightgallery, default is the value of **src** parameter.
+    URL of the image thumbnail, used for lightgallery, default value is the value of **src** parameter.
 
 * **src_l** *[optional]*
 
-    URL of the HD image, used for lightgallery, default is the value of **src** parameter.
+    URL of the HD image, used for lightgallery, default value is the value of **src** parameter.
 
 * **height** *[optional]*
 
@@ -335,7 +177,7 @@ The `image` shortcode has the following named parameters:
 
 * **linked** *[optional]*
 
-    Whether the image needs to be hyperlinked, default is `true`.
+    Whether the image needs to be hyperlinked, default value is `true`.
 
 * **rel** *[optional]*
 
@@ -348,14 +190,14 @@ The `image` shortcode has the following named parameters:
 Example `image` input:
 
 ```markdown
-{{</* image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" */>}}
+{{</* 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" */>}}
 ```
 
 The rendered output looks like this:
 
-{{< image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" >}}
+{{< 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`
+## `admonition`
 
 The `admonition` shortcode supports **12** types of banners to help you put notice in your page.
 
@@ -413,15 +255,15 @@ The `admonition` shortcode has the following named parameters:
 
 * **type** *[optional]* (**first** positional parameter)
 
-    Type of the `admonition` banner, default is `note`.
+    Type of the `admonition` banner, default value is `note`.
 
 * **title** *[optional]* (**second** positional parameter)
 
-    Title of the `admonition` banner, default is the value of **type** parameter.
+    Title of the `admonition` banner, default value is the value of **type** parameter.
 
 * **details** *[optional]* (**third** positional parameter)
 
-    Whether the content will be expandable/collapsible, default is `false`.
+    Whether the content will be expandable/collapsible, default value is `false`.
 
 Example `admonition` input:
 
@@ -441,13 +283,13 @@ The rendered output looks like this:
 A **tip** banner
 {{< /admonition >}}
 
-### `mermaid`
+## `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}
+### Flowchart {#flowchart}
 
 Example **flowchart** `mermaid` input:
 
@@ -471,7 +313,7 @@ graph LR;
     C -->|Two| E[Result two]
 {{< /mermaid >}}
 
-#### Sequence Diagram {#sequence-diagram}
+### Sequence Diagram {#sequence-diagram}
 
 Example **sequence diagram** `mermaid` input:
 
@@ -507,7 +349,7 @@ sequenceDiagram
     Bob-->John: Jolly good!
 {{< /mermaid >}}
 
-#### GANTT {#gantt}
+### GANTT {#gantt}
 
 Example **GANTT** `mermaid` input:
 
@@ -551,7 +393,7 @@ gantt
     Add to mermaid                      :1d
 {{< /mermaid >}}
 
-#### Class Diagram {#class-diagram}
+### Class Diagram {#class-diagram}
 
 Example **class diagram** `mermaid` input:
 
@@ -593,7 +435,7 @@ classDiagram
     Class08 <--> C2: Cool label
 {{< /mermaid >}}
 
-#### State Diagram {#state-diagram}
+### State Diagram {#state-diagram}
 
 Example **state diagram** `mermaid` input:
 
@@ -621,7 +463,7 @@ stateDiagram
     Crash --> [*]
 {{< /mermaid >}}
 
-#### Git Graph {#git-graph}
+### Git Graph {#git-graph}
 
 Example **git graph** `mermaid` input:
 
@@ -667,7 +509,7 @@ end
     merge newbranch
 {{< /mermaid >}}
 
-#### Pie {#pie}
+### Pie {#pie}
 
 Example **pie** `mermaid` input:
 
@@ -689,7 +531,7 @@ pie
     "Rats" : 15
 {{< /mermaid >}}
 
-### `echarts`
+## `echarts`
 
 [ECharts](https://echarts.apache.org/) is a library helping you to generate interactive data visualization.
 
@@ -1067,13 +909,87 @@ The rendered output looks like this:
 }
 {{< /echarts >}}
 
-### `music`
+## `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 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 `mapbox` input:
+
+```markdown
+{{</* mapbox 121.485 31.233 12 */>}}
+Or
+{{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}
+
+{{</* 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" */>}}
+```
+
+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`
 
 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}
+### Custom Music URL {#custom-music-url}
 
 The `music` shortcode has the following named parameters by custom music URL:
 
@@ -1103,7 +1019,7 @@ 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 Platform URL Automatic Identification {#automatic-identification}
+### Music Platform URL Automatic Identification {#automatic-identification}
 
 The `music` shortcode has one named parameter by music platform URL automatic identification:
 
@@ -1124,7 +1040,7 @@ The rendered output looks like this:
 
 {{< music auto="https://music.163.com/#/playlist?id=60198" >}}
 
-#### Custom Server, Type and ID {#custom-server}
+### Custom Server, Type and ID {#custom-server}
 
 The `music` shortcode has the following named parameters by custom music platform:
 
@@ -1156,33 +1072,33 @@ The rendered output looks like this:
 
 {{< music netease song 1868553 >}}
 
-#### Other Parameters
+### Other Parameters {#other-parameters}
 
 The `music` shortcode has other named parameters applying to the above three ways:
 
 * **theme** *[optional]*
 
-    Main color of the music player, default is `#a9a9b3`.
+    {{< version 0.2.0 changed >}} Main color of the music player, default value is `#448aff`.
 
 * **fixed** *[optional]*
 
-    Whether to enable fixed mode, default is `false`.
+    Whether to enable fixed mode, default value is `false`.
 
 * **mini** *[optional]*
 
-    Whether to enable mini mode, default is `false`.
+    Whether to enable mini mode, default value is `false`.
 
 * **autoplay** *[optional]*
 
-    Whether to autoplay music, default is `false`.
+    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 is `0.7`.
+    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 is `true`.
+    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:
 
@@ -1190,23 +1106,23 @@ The `music` shortcode has the following named parameters only applying to the ty
 
     [`all`, `one`, `none`]
 
-    Loop mode of the music list, default is `none`.
+    Loop mode of the music list, default value is `none`.
 
 * **order** *[optional]*
 
     [`list`, `random`]
 
-    Play order of the music list, default is `list`.
+    Play order of the music list, default value is `list`.
 
 * **list-folded** *[optional]*
 
-    Whether the music list should be folded at first, default is `false`.
+    Whether the music list should be folded at first, default value is `false`.
 
 * **list-max-height** *[optional]*
 
-    Max height of the music list, default is `340px`.
+    Max height of the music list, default value is `340px`.
 
-### `bilibili`
+## `bilibili`
 
 The `bilibili` shortcode embeds a responsive video player for bilibili videos.
 
@@ -1247,13 +1163,13 @@ The rendered output looks like this:
 
 {{< bilibili av=36570401 p=3 >}}
 
-### `typeit`
+## `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}
+### Simple Content {#simple-content}
 
 Simple content is allowed in `Markdown` format and **without** rich block content such as images and more...
 
@@ -1287,7 +1203,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}
+### Code Content {#code-content}
 
 Code content is allowed and will be highlighted by named parameter `code` for the type of code language.
 
@@ -1313,7 +1229,7 @@ public class HelloWorld {
 }
 {{< /typeit >}}
 
-#### Group Content {#group-content}
+### 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-shortcodes.fr.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes.fr.md
index da980a8..6a6868b 100644
--- a/exampleSite/content/posts/theme-documentation-shortcodes.fr.md
+++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes.fr.md
@@ -1,9 +1,9 @@
 ---
-weight: 3
-title: "Thème Documentation - Shortcodes"
+weight: 4
+title: "Thème Documentation - Extended Shortcodes"
 subtitle: ""
-date: 2020-03-04T16:29:59+08:00
-lastmod: 2020-03-04T16:29:59+08:00
+date: 2020-03-03T16:29:59+08:00
+lastmod: 2020-03-03T16:29:59+08:00
 draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
@@ -14,12 +14,20 @@ tags: ["shortcodes"]
 categories: ["documentation"]
 hiddenFromHomePage: false
 
-featuredImage: "/images/theme-documentation-shortcodes/featured-image.jpg"
-featuredImagePreview: ""
+featuredImage: "/images/theme-documentation-extended-shortcodes/featured-image.jpg"
+featuredImagePreview: "/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"
 
 toc: true
 autoCollapseToc: true
 math: false
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
 lightgallery: true
 linkToMarkdown: true
 share:
@@ -36,173 +44,7 @@ Sorry, this article has not been completely translated into **French**.
 Welcome to take the time to propose a translation by [making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme!
 {{< /admonition >}}
 
-Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
-
-But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
-
-To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/).
-A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy.
-
-## Hugo’s Built-in Shortcodes
-
-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}
-
-[Documentation of `figure`](https://gohugo.io/content-management/shortcodes/#figure)
-
-Example `figure` input:
-
-```markdown
-{{</* figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
-```
-
-The rendered output looks like this:
-
-{{< figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
-
-The HTML looks like this:
-
-```html
-<figure>
-    <img src="/images/theme-documentation-shortcodes/lighthouse.jpg"/>
-    <figcaption>
-        <h4>Lighthouse (figure)</h4>
-    </figcaption>
-</figure>
-```
-
-### `gist`
-
-[Documentation of `gist`](https://gohugo.io/content-management/shortcodes/#gist)
-
-Example `gist` input:
-
-```markdown
-{{</* gist spf13 7896402 */>}}
-```
-
-The rendered output looks like this:
-
-{{< gist spf13 7896402 >}}
-
-The HTML looks like this:
-
-```html
-<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
-```
-
-### `highlight`
-
-[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes/#instagram)
-
-Example `highlight` input:
-
-```markdown
-{{</* highlight html */>}}
-<section id="main">
-    <div>
-        <h1 id="title">{{ .Title }}</h1>
-        {{ range .Pages }}
-            {{ .Render "summary"}}
-        {{ end }}
-    </div>
-</section>
-{{</* /highlight */>}}
-```
-
-The rendered output looks like this:
-
-{{< highlight html >}}
-<section id="main">
-    <div>
-        <h1 id="title">{{ .Title }}</h1>
-        {{ range .Pages }}
-            {{ .Render "summary"}}
-        {{ end }}
-    </div>
-</section>
-{{< /highlight >}}
-
-### `instagram`
-
-[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes/#instagram)
-
-Example `instagram` input:
-
-```markdown
-{{</* instagram BWNjjyYFxVx hidecaption */>}}
-```
-
-The rendered output looks like this:
-
-{{< instagram BWNjjyYFxVx hidecaption >}}
-
-### `param`
-
-[Documentation of `param`](https://gohugo.io/content-management/shortcodes/#param)
-
-Example `param` input:
-
-```markdown
-{{</* param description */>}}
-```
-
-The rendered output looks like this:
-
-{{< param description >}}
-
-### `ref` and `relref` {#ref-and-relref}
-
-[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
-
-### `tweet`
-
-[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes/#tweet)
-
-Example `tweet` input:
-
-```markdown
-{{</* tweet 877500564405444608 */>}}
-```
-
-The rendered output looks like this:
-
-{{< tweet 877500564405444608 >}}
-
-### `vimeo`
-
-[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes/#vimeo)
-
-Example `vimeo` input:
-
-```markdown
-{{</* vimeo 146022717 */>}}
-```
-
-The rendered output looks like this:
-
-{{< vimeo 146022717 >}}
-
-### `youtube`
-
-[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes/#youtube)
-
-Example `youtube` input:
-
-```markdown
-{{</* youtube w7Ft2ymGmfc */>}}
-```
-
-The rendered output looks like this:
-
-{{< youtube w7Ft2ymGmfc >}}
-
-## LoveIt Shortcodes
-
-**LoveIt** provides multiple shortcodes on top of existing ones.
-
-### `style`
+## `style`
 
 `style` is a shortcode to insert custom style in your post.
 
@@ -215,18 +57,18 @@ And the **second** one is the HTML tag around the content you want to change sty
 Example `style` input:
 
 ```markdown
-{{</* style "text-align: right" */>}}
+{{</* style "text-align: right;" */>}}
 This is a right-aligned paragraph.
 {{</* /style */>}}
 ```
 
 The rendered output looks like this:
 
-{{< style "text-align: right" >}}
+{{< style "text-align: right;" >}}
 This is a right-aligned paragraph.
 {{< /style >}}
 
-### `link`
+## `link`
 
 {{< version 0.2.0 >}}
 
@@ -240,7 +82,7 @@ The `link` shortcode has the following named parameters:
 
 * **content** *[optional]* (**second** positional parameter)
 
-    Content of the link, default is the value of **href** parameter.
+    Content of the link, default value is the value of **href** parameter.
 
     *Markdown or HTML format is supported.*
 
@@ -290,11 +132,11 @@ The rendered output looks like this (hover over the link, there should be a tool
 
 {{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
 
-### `image`
+## `image`
 
 {{< version 0.2.0 changed >}}
 
-`image` shortcode is an alternative to [`figure` shortcode](#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js).
+`image` shortcode is an alternative to [`figure` shortcode](../theme-documentation-built-in-shortcodes/#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js).
 
 The `image` shortcode has the following named parameters:
 
@@ -304,7 +146,7 @@ The `image` shortcode has the following named parameters:
 
 * **alt** *[optional]* (**second** positional parameter)
 
-    Alternate text for the image if the image cannot be displayed, default is the value of **src** parameter.
+    Alternate text for the image if the image cannot be displayed, default value is the value of **src** parameter.
 
     *Markdown or HTML format is supported.*
 
@@ -324,11 +166,11 @@ The `image` shortcode has the following named parameters:
 
 * **src_s** *[optional]*
 
-    URL of the image thumbnail, used for lightgallery, default is the value of **src** parameter.
+    URL of the image thumbnail, used for lightgallery, default value is the value of **src** parameter.
 
 * **src_l** *[optional]*
 
-    URL of the HD image, used for lightgallery, default is the value of **src** parameter.
+    URL of the HD image, used for lightgallery, default value is the value of **src** parameter.
 
 * **height** *[optional]*
 
@@ -340,7 +182,7 @@ The `image` shortcode has the following named parameters:
 
 * **linked** *[optional]*
 
-    Whether the image needs to be hyperlinked, default is `true`.
+    Whether the image needs to be hyperlinked, default value is `true`.
 
 * **rel** *[optional]*
 
@@ -353,14 +195,14 @@ The `image` shortcode has the following named parameters:
 Example `image` input:
 
 ```markdown
-{{</* image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" */>}}
+{{</* 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" */>}}
 ```
 
 The rendered output looks like this:
 
-{{< image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" >}}
+{{< 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`
+## `admonition`
 
 The `admonition` shortcode supports **12** types of banners to help you put notice in your page.
 
@@ -418,15 +260,15 @@ The `admonition` shortcode has the following named parameters:
 
 * **type** *[optional]* (**first** positional parameter)
 
-    Type of the `admonition` banner, default is `note`.
+    Type of the `admonition` banner, default value is `note`.
 
 * **title** *[optional]* (**second** positional parameter)
 
-    Title of the `admonition` banner, default is the value of **type** parameter.
+    Title of the `admonition` banner, default value is the value of **type** parameter.
 
 * **details** *[optional]* (**third** positional parameter)
 
-    Whether the content will be expandable/collapsible, default is `false`.
+    Whether the content will be expandable/collapsible, default value is `false`.
 
 Example `admonition` input:
 
@@ -446,13 +288,13 @@ The rendered output looks like this:
 A **tip** banner
 {{< /admonition >}}
 
-### `mermaid`
+## `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}
+### Flowchart {#flowchart}
 
 Example **flowchart** `mermaid` input:
 
@@ -476,7 +318,7 @@ graph LR;
     C -->|Two| E[Result two]
 {{< /mermaid >}}
 
-#### Sequence Diagram {#sequence-diagram}
+### Sequence Diagram {#sequence-diagram}
 
 Example **sequence diagram** `mermaid` input:
 
@@ -512,7 +354,7 @@ sequenceDiagram
     Bob-->John: Jolly good!
 {{< /mermaid >}}
 
-#### GANTT {#gantt}
+### GANTT {#gantt}
 
 Example **GANTT** `mermaid` input:
 
@@ -556,7 +398,7 @@ gantt
     Add to mermaid                      :1d
 {{< /mermaid >}}
 
-#### Class Diagram {#class-diagram}
+### Class Diagram {#class-diagram}
 
 Example **class diagram** `mermaid` input:
 
@@ -598,7 +440,7 @@ classDiagram
     Class08 <--> C2: Cool label
 {{< /mermaid >}}
 
-#### State Diagram {#state-diagram}
+### State Diagram {#state-diagram}
 
 Example **state diagram** `mermaid` input:
 
@@ -626,7 +468,7 @@ stateDiagram
     Crash --> [*]
 {{< /mermaid >}}
 
-#### Git Graph {#git-graph}
+### Git Graph {#git-graph}
 
 Example **git graph** `mermaid` input:
 
@@ -672,7 +514,7 @@ end
     merge newbranch
 {{< /mermaid >}}
 
-#### Pie {#pie}
+### Pie {#pie}
 
 Example **pie** `mermaid` input:
 
@@ -694,7 +536,7 @@ pie
     "Rats" : 15
 {{< /mermaid >}}
 
-### `echarts`
+## `echarts`
 
 [ECharts](https://echarts.apache.org/) is a library helping you to generate interactive data visualization.
 
@@ -1072,13 +914,87 @@ The rendered output looks like this:
 }
 {{< /echarts >}}
 
-### `music`
+## `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 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 `mapbox` input:
+
+```markdown
+{{</* mapbox 121.485 31.233 12 */>}}
+Or
+{{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}
+
+{{</* 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" */>}}
+```
+
+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`
 
 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}
+### Custom Music URL {#custom-music-url}
 
 The `music` shortcode has the following named parameters by custom music URL:
 
@@ -1108,7 +1024,7 @@ 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 Platform URL Automatic Identification {#automatic-identification}
+### Music Platform URL Automatic Identification {#automatic-identification}
 
 The `music` shortcode has one named parameter by music platform URL automatic identification:
 
@@ -1129,7 +1045,7 @@ The rendered output looks like this:
 
 {{< music auto="https://music.163.com/#/playlist?id=60198" >}}
 
-#### Custom Server, Type and ID {#custom-server}
+### Custom Server, Type and ID {#custom-server}
 
 The `music` shortcode has the following named parameters by custom music platform:
 
@@ -1161,33 +1077,33 @@ The rendered output looks like this:
 
 {{< music netease song 1868553 >}}
 
-#### Other Parameters
+### Other Parameters {#other-parameters}
 
 The `music` shortcode has other named parameters applying to the above three ways:
 
 * **theme** *[optional]*
 
-    Main color of the music player, default is `#a9a9b3`.
+    {{< version 0.2.0 changed >}} Main color of the music player, default value is `#448aff`.
 
 * **fixed** *[optional]*
 
-    Whether to enable fixed mode, default is `false`.
+    Whether to enable fixed mode, default value is `false`.
 
 * **mini** *[optional]*
 
-    Whether to enable mini mode, default is `false`.
+    Whether to enable mini mode, default value is `false`.
 
 * **autoplay** *[optional]*
 
-    Whether to autoplay music, default is `false`.
+    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 is `0.7`.
+    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 is `true`.
+    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:
 
@@ -1195,23 +1111,23 @@ The `music` shortcode has the following named parameters only applying to the ty
 
     [`all`, `one`, `none`]
 
-    Loop mode of the music list, default is `none`.
+    Loop mode of the music list, default value is `none`.
 
 * **order** *[optional]*
 
     [`list`, `random`]
 
-    Play order of the music list, default is `list`.
+    Play order of the music list, default value is `list`.
 
 * **list-folded** *[optional]*
 
-    Whether the music list should be folded at first, default is `false`.
+    Whether the music list should be folded at first, default value is `false`.
 
 * **list-max-height** *[optional]*
 
-    Max height of the music list, default is `340px`.
+    Max height of the music list, default value is `340px`.
 
-### `bilibili`
+## `bilibili`
 
 The `bilibili` shortcode embeds a responsive video player for bilibili videos.
 
@@ -1252,13 +1168,13 @@ The rendered output looks like this:
 
 {{< bilibili av=36570401 p=3 >}}
 
-### `typeit`
+## `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}
+### Simple Content {#simple-content}
 
 Simple content is allowed in `Markdown` format and **without** rich block content such as images and more...
 
@@ -1292,7 +1208,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}
+### Code Content {#code-content}
 
 Code content is allowed and will be highlighted by named parameter `code` for the type of code language.
 
@@ -1318,7 +1234,7 @@ public class HelloWorld {
 }
 {{< /typeit >}}
 
-#### Group Content {#group-content}
+### 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-shortcodes.zh-cn.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes.zh-cn.md
index ecbb876..9d1dc83 100644
--- a/exampleSite/content/posts/theme-documentation-shortcodes.zh-cn.md
+++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes.zh-cn.md
@@ -1,25 +1,33 @@
 ---
-weight: 3
-title: "主题文档 - Shortcodes"
+weight: 4
+title: "主题文档 - 扩展 Shortcodes"
 subtitle: ""
-date: 2020-03-04T16:29:59+08:00
-lastmod: 2020-03-04T16:29:59+08:00
+date: 2020-03-03T16:29:59+08:00
+lastmod: 2020-03-03T16:29:59+08:00
 draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
-description: "LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个新的 shortcode."
+description: "LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode."
 license: ""
 
 tags: ["shortcodes"]
 categories: ["documentation"]
 hiddenFromHomePage: false
 
-featuredImage: "/images/theme-documentation-shortcodes/featured-image.jpg"
-featuredImagePreview: ""
+featuredImage: "/images/theme-documentation-extended-shortcodes/featured-image.jpg"
+featuredImagePreview: "/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"
 
 toc: true
 autoCollapseToc: true
 math: false
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
 lightgallery: true
 linkToMarkdown: true
 share:
@@ -27,178 +35,11 @@ share:
 comment: true
 ---
 
-**LoveIt** 主题在 Hugo 内置的 shortcode 的基础上提供多个新的 shortcode.
+**LoveIt** 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode.
 
 <!--more-->
 
-Hugo 使用 Markdown 为其简单的内容格式. 但是, Markdown 在很多方面都无法很好地支持. 你可以使用纯 HTML 来扩展可能性.
-
-但这恰好是一个坏主意. 大家使用 Markdown, 正是因为它即使不经过渲染也可以轻松阅读. 应该尽可能避免使用 HTML 以保持内容简洁.
-
-为了避免这种限制, Hugo 创建了 [shortcodes](https://gohugo.io/extras/shortcodes/).
-shortcode 是一个简单代码段, 可以生成合理的 HTML 代码, 并且符合 Markdown 的设计哲学.
-
-## Hugo 内置 shortcodes {#hugo}
-
-Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见的用法.
-提供这些 shortcodes 是为了方便保持你的 Markdown 内容简洁.
-
-### `figure` {#figure}
-
-[`figure` 的文档](https://gohugo.io/content-management/shortcodes/#figure)
-
-一个 `figure` 示例:
-
-```markdown
-{{</* figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
-```
-
-呈现的输出效果如下:
-
-{{< figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
-
-输出的 HTML 看起来像这样:
-
-```html
-<figure>
-    <img src="/images/theme-documentation-shortcodes/lighthouse.jpg"/>
-    <figcaption>
-        <h4>Lighthouse (figure)</h4>
-    </figcaption>
-</figure>
-```
-
-### `gist`
-
-[`gist` 的文档](https://gohugo.io/content-management/shortcodes/#gist)
-
-一个 `gist` 示例:
-
-```markdown
-{{</* gist spf13 7896402 */>}}
-```
-
-呈现的输出效果如下:
-
-{{< gist spf13 7896402 >}}
-
-输出的 HTML 看起来像这样:
-
-```html
-<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
-```
-
-### `highlight`
-
-[`highlight` 的文档](https://gohugo.io/content-management/shortcodes/#instagram)
-
-一个 `highlight` 示例:
-
-```markdown
-{{</* highlight html */>}}
-<section id="main">
-    <div>
-        <h1 id="title">{{ .Title }}</h1>
-        {{ range .Pages }}
-            {{ .Render "summary"}}
-        {{ end }}
-    </div>
-</section>
-{{</* /highlight */>}}
-```
-
-呈现的输出效果如下:
-
-{{< highlight html >}}
-<section id="main">
-    <div>
-        <h1 id="title">{{ .Title }}</h1>
-        {{ range .Pages }}
-            {{ .Render "summary"}}
-        {{ end }}
-    </div>
-</section>
-{{< /highlight >}}
-
-### `instagram`
-
-[`instagram` 的文档](https://gohugo.io/content-management/shortcodes/#instagram)
-
-一个 `instagram` 示例:
-
-```markdown
-{{</* instagram BWNjjyYFxVx hidecaption */>}}
-```
-
-呈现的输出效果如下:
-
-{{< instagram BWNjjyYFxVx hidecaption >}}
-
-### `param`
-
-[`param` 的文档](https://gohugo.io/content-management/shortcodes/#param)
-
-一个 `param` 示例:
-
-```markdown
-{{</* param description */>}}
-```
-
-呈现的输出效果如下:
-
-{{< param description >}}
-
-### `ref` 和 `relref` {#ref-and-relref}
-
-[`ref` 和 `relref` 的文档](https://gohugo.io/content-management/shortcodes/#ref-and-relref)
-
-### `tweet`
-
-[`tweet` 的文档](https://gohugo.io/content-management/shortcodes/#tweet)
-
-一个 `tweet` 示例:
-
-```markdown
-{{</* tweet 877500564405444608 */>}}
-```
-
-呈现的输出效果如下:
-
-{{< tweet 877500564405444608 >}}
-
-### `vimeo`
-
-[`vimeo` 的文档](https://gohugo.io/content-management/shortcodes/#vimeo)
-
-一个 `vimeo` 示例:
-
-```markdown
-{{</* vimeo 146022717 */>}}
-```
-
-呈现的输出效果如下:
-
-{{< vimeo 146022717 >}}
-
-### `youtube`
-
-[`youtube` 的文档](https://gohugo.io/content-management/shortcodes/#youtube)
-
-一个 `youtube` 示例:
-
-```markdown
-{{</* youtube w7Ft2ymGmfc */>}}
-```
-
-呈现的输出效果如下:
-
-{{< youtube w7Ft2ymGmfc >}}
-
-## LoveIt shortcodes {#loveit}
-
-**LoveIt** 在现有内置的 shortcodes 的基础上提供了多个 shortcodes.
-
-### `style`
+## `style`
 
 `style` shortcode 用来在你的文章中插入自定义样式.
 
@@ -211,18 +52,18 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见�
 一个 `style` 示例:
 
 ```markdown
-{{</* style "text-align: right" */>}}
+{{</* style "text-align: right;" */>}}
 This is a right-aligned paragraph.
 {{</* /style */>}}
 ```
 
 呈现的输出效果如下:
 
-{{< style "text-align: right" >}}
+{{< style "text-align: right;" >}}
 This is a right-aligned paragraph.
 {{< /style >}}
 
-### `link`
+## `link`
 
 {{< version 0.2.0 >}}
 
@@ -287,11 +128,11 @@ This is a right-aligned paragraph.
 
 {{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
 
-### `image`
+## `image`
 
 {{< version 0.2.0 changed >}}
 
-`image` shortcode 是 [`figure` shortcode](#figure) 的替代. `image` shortcode 可以充分利用 [lazysizes](https://github.com/aFarkas/lazysizes) 和 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 两个依赖库.
+`image` shortcode 是 [`figure` shortcode](../theme-documentation-built-in-shortcodes/#figure) 的替代. `image` shortcode 可以充分利用 [lazysizes](https://github.com/aFarkas/lazysizes) 和 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 两个依赖库.
 
 `image` shortcode 有以下命名参数:
 
@@ -350,14 +191,14 @@ This is a right-aligned paragraph.
 一个 `image` 示例:
 
 ```markdown
-{{</* image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" */>}}
+{{</* 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" */>}}
 ```
 
 呈现的输出效果如下:
 
-{{< image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" >}}
+{{< 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`
+## `admonition`
 
 `admonition` shortcode 支持 **12** 种 帮助你在页面中插入提示的横幅.
 
@@ -443,13 +284,13 @@ This is a right-aligned paragraph.
 一个 **技巧** 横幅
 {{< /admonition >}}
 
-### `mermaid`
+## `mermaid`
 
 [mermaid](https://mermaidjs.github.io/) 是一个可以帮助你在文章中生成图表和流程图的库, 类似 Markdown 的语法.
 
 只需将你的 mermaid 代码插入 `mermaid` shortcode 中即可.
 
-#### 流程图 {#flowchart}
+### 流程图 {#flowchart}
 
 一个 **流程图** `mermaid` 示例:
 
@@ -473,7 +314,7 @@ graph LR;
     C -->|Two| E[Result two]
 {{< /mermaid >}}
 
-#### 时序图 {#sequence-diagram}
+### 时序图 {#sequence-diagram}
 
 一个 **时序图** `mermaid` 示例:
 
@@ -509,7 +350,7 @@ sequenceDiagram
     Bob-->John: Jolly good!
 {{< /mermaid >}}
 
-#### 甘特图 {#gantt}
+### 甘特图 {#gantt}
 
 一个 **甘特图** `mermaid` 示例:
 
@@ -553,7 +394,7 @@ gantt
     Add to mermaid                      :1d
 {{< /mermaid >}}
 
-#### 类图 {#class-diagram}
+### 类图 {#class-diagram}
 
 一个 **类图** `mermaid` 示例:
 
@@ -595,7 +436,7 @@ classDiagram
     Class08 <--> C2: Cool label
 {{< /mermaid >}}
 
-#### 状态图 {#state-diagram}
+### 状态图 {#state-diagram}
 
 一个 **状态图** `mermaid` 示例:
 
@@ -623,7 +464,7 @@ stateDiagram
     Crash --> [*]
 {{< /mermaid >}}
 
-#### Git 图 {#git-graph}
+### Git 图 {#git-graph}
 
 一个 **Git 图** `mermaid` 示例:
 
@@ -669,7 +510,7 @@ end
     merge newbranch
 {{< /mermaid >}}
 
-#### 饼图 {#pie}
+### 饼图 {#pie}
 
 一个 **饼图** `mermaid` 示例:
 
@@ -691,7 +532,7 @@ pie
     "Rats" : 15
 {{< /mermaid >}}
 
-### `echarts`
+## `echarts`
 
 [ECharts](https://echarts.apache.org/) 是一个帮助你生成交互式数据可视化的库.
 
@@ -1069,36 +910,87 @@ data = [
 }
 {{< /echarts >}}
 
-### `music`
+## `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:
+
+* **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 lng=121.485 lat=31.233 zoom=12 */>}}
+
+{{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4" "mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
+或者
+{{</* 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" */>}}
+```
+
+呈现的输出效果如下:
+
+{{< 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`
 
 `music` shortcode 基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 提供了一个内嵌的响应式音乐播放器.
 
 有三种方式使用 `music` shortcode.
 
-`music` shortcode 可以使用以下命名参数:
-
-|参数             |默认值         |描述|
-|:---------------|:------------:|:----------|
-|url             |**必须**       |音乐的 URL|
-|name            |可选           |音乐名称|
-|artist          |可选           |音乐的创作者|
-|cover           |封面           |音乐封面的 URL|
-|server          |**必须**       |音乐平台: `netease`, `tencent`, `kugou`, `xiami`, `baidu`|
-|type            |**必须**       |`song`, `playlist`, `album`, `search`, `artist`|
-|id              |**必须**       |song id / playlist id / album id / 搜索关键字|
-|auto            |可选           |音乐链接, 支持平台: `netease`, `tencent`, `xiami`|
-|fixed           |`false`       |启用固定模式|
-|mini            |`false`       |启用迷你模式|
-|autoplay        |`false`       |自动播放|
-|theme           |`#a9a9b3`     |主题色|
-|loop            |`all`         |循环模式, 值: 'all', 'one', 'none'|
-|order           |`list`        |播放顺序, 值: 'list', 'random'|
-|volume          |`0.7`         |默认音量, 请注意, 播放器会记住用户设置, 用户自己设置音量后默认音量将不起作用|
-|mutex           |`true`        |防止同时有多个播放器, 在此播放器开始播放时暂停其他播放器|
-|list-folded     |`false`       |列表默认是否折叠|
-|list-max-height |`340px`       |列表最大高度|
-
-#### 自定义音乐 URL {#custom-music-url}
+### 自定义音乐 URL {#custom-music-url}
 
 `music` shortcode 有以下命名参数来使用自定义音乐 URL:
 
@@ -1128,7 +1020,7 @@ data = [
 
 {{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}}
 
-#### 音乐平台 URL 的自动识别 {#automatic-identification}
+### 音乐平台 URL 的自动识别 {#automatic-identification}
 
 `music` shortcode 有一个命名参数来使用音乐平台 URL 的自动识别:
 
@@ -1148,7 +1040,7 @@ data = [
 
 {{< music auto="https://music.163.com/#/playlist?id=60198" >}}
 
-#### 自定义音乐平台, 类型和 ID {#custom-server}
+### 自定义音乐平台, 类型和 ID {#custom-server}
 
 `music` shortcode 有以下命名参数来使用自定义音乐平台:
 
@@ -1180,13 +1072,13 @@ data = [
 
 {{< music netease song 1868553 >}}
 
-#### 其它参数
+### 其它参数 {#other-parameters}
 
 `music` shortcode 有一些可以应用于以上三种方式的其它命名参数:
 
 * **theme** *[可选]*
 
-    音乐播放器的主题色, 默认值是 `#a9a9b3`.
+    {{< version 0.2.0 changed >}} 音乐播放器的主题色, 默认值是 `#448aff`.
 
 * **fixed** *[可选]*
 
@@ -1230,7 +1122,7 @@ data = [
 
     音乐列表的最大高度, 默认值是 `340px`.
 
-### `bilibili`
+## `bilibili`
 
 `bilibili` shortcode 提供了一个内嵌的用来播放 bilibili 视频的响应式播放器.
 
@@ -1270,13 +1162,13 @@ https://www.bilibili.com/video/av36570401?p=3
 
 {{< bilibili av=36570401 p=3 >}}
 
-### `typeit`
+## `typeit`
 
 `typeit` shortcode 基于 [TypeIt](https://typeitjs.com/) 提供了打字动画.
 
 只需将你需要打字动画的内容插入 `typeit` shortcode 中即可.
 
-#### 简单内容 {#simple-content}
+### 简单内容 {#simple-content}
 
 允许使用 `Markdown` 格式的简单内容, 并且 **不包含** 富文本的块内容, 例如图像等等...
 
@@ -1310,7 +1202,7 @@ https://www.bilibili.com/video/av36570401?p=3
 这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
 {{< /typeit >}}
 
-#### 代码内容 {#code-content}
+### 代码内容 {#code-content}
 
 代码内容也是允许的, 并且通过使用参数 `code` 指定语言类型可以实习语法高亮.
 
@@ -1336,7 +1228,7 @@ public class HelloWorld {
 }
 {{< /typeit >}}
 
-#### 分组内容 {#code-content}
+### 分组内容 {#code-content}
 
 默认情况下, 所有打字动画都是同时开始的.
 但是有时你可能需要按顺序开始一组 `typeit` 内容的打字动画.
diff --git a/exampleSite/static/images/theme-documentation-built-in-shortcodes/featured-image.png b/exampleSite/static/images/theme-documentation-built-in-shortcodes/featured-image.png
new file mode 100644
index 0000000..2824a7f
--- /dev/null
+++ b/exampleSite/static/images/theme-documentation-built-in-shortcodes/featured-image.png
diff --git a/exampleSite/static/images/theme-documentation-shortcodes/lighthouse.jpg b/exampleSite/static/images/theme-documentation-built-in-shortcodes/lighthouse.jpg
index b857404..b857404 100644
--- a/exampleSite/static/images/theme-documentation-shortcodes/lighthouse.jpg
+++ b/exampleSite/static/images/theme-documentation-built-in-shortcodes/lighthouse.jpg
diff --git a/exampleSite/static/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg b/exampleSite/static/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg
new file mode 100644
index 0000000..bf079c8
--- /dev/null
+++ b/exampleSite/static/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg
diff --git a/exampleSite/static/images/theme-documentation-shortcodes/featured-image.jpg b/exampleSite/static/images/theme-documentation-extended-shortcodes/featured-image.jpg
index 5fa1383..5fa1383 100644
--- a/exampleSite/static/images/theme-documentation-shortcodes/featured-image.jpg
+++ b/exampleSite/static/images/theme-documentation-extended-shortcodes/featured-image.jpg
diff --git a/exampleSite/static/images/theme-documentation-shortcodes/lighthouse-large.jpg b/exampleSite/static/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg
index 87a14e0..87a14e0 100644
--- a/exampleSite/static/images/theme-documentation-shortcodes/lighthouse-large.jpg
+++ b/exampleSite/static/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg
diff --git a/exampleSite/static/images/theme-documentation-shortcodes/lighthouse-small.jpg b/exampleSite/static/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg
index f73d5ea..f73d5ea 100644
--- a/exampleSite/static/images/theme-documentation-shortcodes/lighthouse-small.jpg
+++ b/exampleSite/static/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg
diff --git a/exampleSite/static/images/theme-documentation-extended-shortcodes/lighthouse.jpg b/exampleSite/static/images/theme-documentation-extended-shortcodes/lighthouse.jpg
new file mode 100644
index 0000000..b857404
--- /dev/null
+++ b/exampleSite/static/images/theme-documentation-extended-shortcodes/lighthouse.jpg