use maintained theme

1 files changed, 1288 insertions, 0 deletions

diff --git a/themes/CodeIT/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.fr.md b/themes/CodeIT/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.fr.md
new file mode 100644
index 0000000..6641605
--- /dev/null
+++ b/themes/CodeIT/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.fr.md
@@ -0,0 +1,1288 @@
+---
+weight: 4
+title: "Thème Documentation - Extended Shortcodes"
+date: 2020-03-03T16:29:59+08:00
+lastmod: 2020-03-03T16:29:59+08:00
+draft: false
+author: "Sunt Programator!"
+authorLink: "https://suntprogramator.dev/"
+description: "Le thème CodeIT fournit plusieurs shortcodes en plus de ceux intégrés dans Hugo."
+resources:
+  - name: "featured-image"
+    src: "featured-image.jpg"
+  - name: "featured-image-preview"
+    src: "featured-image-preview.jpg"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+lightgallery: true
+---
+
+Le thème **CodeIT** fournit plusieurs shortcodes en plus de ceux intégrés dans Hugo.
+
+<!--more-->
+
+{{< admonition warning >}}
+Sorry, this article has not been completely translated into **French**.
+Welcome to take the time to propose a translation by [:(fas fa-code-branch fa-fw): making a PR](https://github.com/sunt-programator/CodeIT/pulls) to the theme!
+{{< /admonition >}}
+
+## 1 style
+
+{{< admonition >}}
+Hugo **extended** version is necessary for `style` shortcode.
+{{< /admonition >}}
+
+`style` is a shortcode to insert custom style in your post.
+
+The `style` shortcode has two positional parameters.
+
+The **first** one is the custom style content,
+which supports nesting syntax in [:(fab fa-sass fa-fw): SASS](https://sass-lang.com/documentation/style-rules/declarations#nesting)
+and `&` referring to this parent HTML element.
+
+And the **second** one is the tag name of the HTML element wrapping the content you want to change style, and whose default value is `div`.
+
+Example `style` input:
+
+```markdown
+{{</* style "text-align:right; strong{color:#00b1ff;}" */>}}
+This is a **right-aligned** paragraph.
+{{</* /style */>}}
+```
+
+The rendered output looks like this:
+
+{{< style "text-align:right; strong{color:#00b1ff;}" >}}
+This is a **right-aligned** paragraph.
+{{< /style >}}
+
+## 2 link
+
+`link` shortcode is an alternative to [Markdown link syntax](../basic-markdown-syntax#links). `link` shortcode can provide some other features and can be used in code blocks.
+
+The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
+
+The `link` shortcode has the following named parameters:
+
+- **href** _[required]_ (**first** positional parameter)
+
+  Destination of the link.
+
+- **content** _[optional]_ (**second** positional parameter)
+
+  Content of the link, default value is the value of **href** parameter.
+
+  _Markdown or HTML format is supported._
+
+- **title** _[optional]_ (**third** positional parameter)
+
+  `title` attribute of the HTML `a` tag, which will be shown when hovering on the link.
+
+- **class** _[optional]_
+
+  `class` attribute of the HTML `a` tag.
+
+- **rel** _[optional]_
+
+  Additional `rel` attributes of the HTML `a` tag.
+
+Example `link` input:
+
+```markdown
+{{</* link "https://assemble.io" */>}}
+Or
+{{</* link href="https://assemble.io" */>}}
+
+{{</* link "mailto:contact@revolunet.com" */>}}
+Or
+{{</* link href="mailto:contact@revolunet.com" */>}}
+
+{{</* link "https://assemble.io" Assemble */>}}
+Or
+{{</* link href="https://assemble.io" content=Assemble */>}}
+```
+
+The rendered output looks like this:
+
+- {{< link "https://assemble.io" >}}
+- {{< link "mailto:contact@revolunet.com" >}}
+- {{< link "https://assemble.io" Assemble >}}
+
+Example `link` input with a title:
+
+```markdown
+{{</* link "https://github.com/upstage/" Upstage "Visit Upstage!" */>}}
+Or
+{{</* link href="https://github.com/upstage/" content=Upstage title="Visit Upstage!" */>}}
+```
+
+The rendered output looks like this (hover over the link, there should be a tooltip):
+
+{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
+
+## 3 image {#image}
+
+`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 complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
+
+The `image` shortcode has the following named parameters:
+
+- **src** _[required]_ (**first** positional parameter)
+
+  URL of the image to be displayed.
+
+- **alt** _[optional]_ (**second** positional 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._
+
+- **caption** _[optional]_ (**third** positional parameter)
+
+  Image caption.
+
+  _Markdown or HTML format is supported._
+
+- **title** _[optional]_
+
+  Image title that will be shown when hovering on the image.
+
+- **class** _[optional]_
+
+  `class` attribute of the HTML `figure` tag.
+
+- **src_s** _[optional]_
+
+  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 value is the value of **src** parameter.
+
+- **height** _[optional]_
+
+  `height` attribute of the image.
+
+- **width** _[optional]_
+
+  `width` attribute of the image.
+
+- **linked** _[optional]_
+
+  Whether the image needs to be hyperlinked, default value is `true`.
+
+- **rel** _[optional]_
+
+  Additional `rel` attributes of the HTML `a` tag, if **linked** parameter is set to `true`.
+
+Example `image` input:
+
+```markdown
+{{</* image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" */>}}
+```
+
+The rendered output looks like this:
+
+{{< image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" >}}
+
+## 4 admonition
+
+The `admonition` shortcode supports **12** types of banners to help you put notice in your page.
+
+_Markdown or HTML format in the content is supported._
+
+{{< admonition >}}
+A **note** banner
+{{< /admonition >}}
+
+{{< admonition abstract >}}
+An **abstract** banner
+{{< /admonition >}}
+
+{{< admonition info >}}
+A **info** banner
+{{< /admonition >}}
+
+{{< admonition tip >}}
+A **tip** banner
+{{< /admonition >}}
+
+{{< admonition success >}}
+A **success** banner
+{{< /admonition >}}
+
+{{< admonition question >}}
+A **question** banner
+{{< /admonition >}}
+
+{{< admonition warning >}}
+A **warning** banner
+{{< /admonition >}}
+
+{{< admonition failure >}}
+A **failure** banner
+{{< /admonition >}}
+
+{{< admonition danger >}}
+A **danger** banner
+{{< /admonition >}}
+
+{{< admonition bug >}}
+A **bug** banner
+{{< /admonition >}}
+
+{{< admonition example >}}
+An **example** banner
+{{< /admonition >}}
+
+{{< admonition quote >}}
+A **quote** banner
+{{< /admonition >}}
+
+The `admonition` shortcode has the following named parameters:
+
+- **type** _[optional]_ (**first** positional parameter)
+
+  Type of the `admonition` banner, default value is `note`.
+
+- **title** _[optional]_ (**second** positional parameter)
+
+  Title of the `admonition` banner, default value is the value of **type** parameter.
+
+- **open** _[optional]_ (**third** positional parameter)
+
+  Whether the content will be expandable by default, default value is `true`.
+
+Example `admonition` input:
+
+```markdown
+{{</* admonition type=tip title="This is a tip" open=false */>}}
+A **tip** banner
+{{</* /admonition */>}}
+Or
+{{</* admonition tip "This is a tip" false */>}}
+A **tip** banner
+{{</* /admonition */>}}
+```
+
+The rendered output looks like this:
+
+{{< admonition tip "This is a tip" false >}}
+A **tip** banner
+{{< /admonition >}}
+
+## 5 mermaid
+
+[mermaid](https://mermaidjs.github.io/) is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.
+
+Just insert your mermaid code in the `mermaid` shortcode and that’s it.
+
+### 5.1 Flowchart {#flowchart}
+
+Example **flowchart** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+graph LR;
+A[Hard edge] -->|Link text| B(Round edge)
+B --> C{Decision}
+C -->|One| D[Result one]
+C -->|Two| E[Result two]
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+graph LR;
+A[Hard edge] -->|Link text| B(Round edge)
+B --> C{Decision}
+C -->|One| D[Result one]
+C -->|Two| E[Result two]
+{{< /mermaid >}}
+
+### 5.2 Sequence Diagram {#sequence-diagram}
+
+Example **sequence diagram** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+sequenceDiagram
+participant Alice
+participant Bob
+Alice->>John: Hello John, how are you?
+loop Healthcheck
+John->John: Fight against hypochondria
+end
+Note right of John: Rational thoughts <br/>prevail...
+John-->Alice: Great!
+John->Bob: How about you?
+Bob-->John: Jolly good!
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+sequenceDiagram
+participant Alice
+participant Bob
+Alice->>John: Hello John, how are you?
+loop Healthcheck
+John->John: Fight against hypochondria
+end
+Note right of John: Rational thoughts <br/>prevail...
+John-->Alice: Great!
+John->Bob: How about you?
+Bob-->John: Jolly good!
+{{< /mermaid >}}
+
+### 5.3 GANTT {#gantt}
+
+Example **GANTT** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+gantt
+dateFormat YYYY-MM-DD
+title Adding GANTT diagram functionality to mermaid
+section A section
+Completed task :done, des1, 2014-01-06,2014-01-08
+Active task :active, des2, 2014-01-09, 3d
+Future task : des3, after des2, 5d
+Future task2 : des4, after des3, 5d
+section Critical tasks
+Completed task in the critical line :crit, done, 2014-01-06,24h
+Implement parser and jison :crit, done, after des1, 2d
+Create tests for parser :crit, active, 3d
+Future task in critical line :crit, 5d
+Create tests for renderer :2d
+Add to mermaid :1d
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+gantt
+dateFormat YYYY-MM-DD
+title Adding GANTT diagram functionality to mermaid
+section A section
+Completed task :done, des1, 2014-01-06,2014-01-08
+Active task :active, des2, 2014-01-09, 3d
+Future task : des3, after des2, 5d
+Future task2 : des4, after des3, 5d
+section Critical tasks
+Completed task in the critical line :crit, done, 2014-01-06,24h
+Implement parser and jison :crit, done, after des1, 2d
+Create tests for parser :crit, active, 3d
+Future task in critical line :crit, 5d
+Create tests for renderer :2d
+Add to mermaid :1d
+{{< /mermaid >}}
+
+### 5.4 Class Diagram {#class-diagram}
+
+Example **class diagram** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+Class03 _-- Class04
+Class05 o-- Class06
+Class07 .. Class08
+Class09 --> C2 : Where am i?
+Class09 --_ C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+Class08 <--> C2: Cool label
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+Class03 _-- Class04
+Class05 o-- Class06
+Class07 .. Class08
+Class09 --> C2 : Where am i?
+Class09 --_ C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+Class08 <--> C2: Cool label
+{{< /mermaid >}}
+
+### 5.5 State Diagram {#state-diagram}
+
+Example **state diagram** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+stateDiagram
+[*] --> Still
+Still --> [*]
+Still --> Moving
+Moving --> Still
+Moving --> Crash
+Crash --> [*]
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+stateDiagram
+[*] --> Still
+Still --> [*]
+Still --> Moving
+Moving --> Still
+Moving --> Crash
+Crash --> [*]
+{{< /mermaid >}}
+
+### 5.6 Git Graph {#git-graph}
+
+Example **git graph** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+gitGraph:
+options
+{
+"nodeSpacing": 100,
+"nodeRadius": 10
+}
+end
+commit
+branch newbranch
+checkout newbranch
+commit
+commit
+checkout master
+commit
+commit
+merge newbranch
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+gitGraph:
+options
+{
+"nodeSpacing": 100,
+"nodeRadius": 10
+}
+end
+commit
+branch newbranch
+checkout newbranch
+commit
+commit
+checkout master
+commit
+commit
+merge newbranch
+{{< /mermaid >}}
+
+### 5.7 Pie {#pie}
+
+Example **pie** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+pie
+"Dogs" : 386
+"Cats" : 85
+"Rats" : 15
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+pie
+"Dogs" : 386
+"Cats" : 85
+"Rats" : 15
+{{< /mermaid >}}
+
+## 6 echarts
+
+[ECharts](https://echarts.apache.org/) is a library helping you to generate interactive data visualization.
+
+The basic chart types ECharts supports include [line series](https://echarts.apache.org/en/option.html#series-line), [bar series](https://echarts.apache.org/en/option.html#series-line), [scatter series](https://echarts.apache.org/en/option.html#series-scatter), [pie charts](https://echarts.apache.org/en/option.html#series-pie), [candle-stick series](https://echarts.apache.org/en/option.html#series-candlestick), [boxplot series](https://echarts.apache.org/en/option.html#series-boxplot) for statistics, [map series](https://echarts.apache.org/en/option.html#series-map), [heatmap series](https://echarts.apache.org/en/option.html#series-heatmap), [lines series](https://echarts.apache.org/en/option.html#series-lines) for directional information, [graph series](https://echarts.apache.org/en/option.html#series-graph) for relationships, [treemap series](https://echarts.apache.org/en/option.html#series-treemap), [sunburst series](https://echarts.apache.org/en/option.html#series-sunburst), [parallel series](https://echarts.apache.org/en/option.html#series-parallel) for multi-dimensional data, [funnel series](https://echarts.apache.org/en/option.html#series-funnel), [gauge series](https://echarts.apache.org/en/option.html#series-gauge). And it's extremely easy to create a combinition of them with ECharts.
+
+Just insert your ECharts option in `JSON`/`YAML`/`TOML` format in the `echarts` shortcode and that’s it.
+
+Example `echarts` input in `JSON` format:
+
+```json
+{{</* echarts */>}}
+{
+  "title": {
+    "text": "Summary Line Chart",
+    "top": "2%",
+    "left": "center"
+  },
+  "tooltip": {
+    "trigger": "axis"
+  },
+  "legend": {
+    "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"],
+    "top": "10%"
+  },
+  "grid": {
+    "left": "5%",
+    "right": "5%",
+    "bottom": "5%",
+    "top": "20%",
+    "containLabel": true
+  },
+  "toolbox": {
+    "feature": {
+      "saveAsImage": {
+        "title": "Save as Image"
+      }
+    }
+  },
+  "xAxis": {
+    "type": "category",
+    "boundaryGap": false,
+    "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
+  },
+  "yAxis": {
+    "type": "value"
+  },
+  "series": [
+    {
+      "name": "Email Marketing",
+      "type": "line",
+      "stack": "Total",
+      "data": [120, 132, 101, 134, 90, 230, 210]
+    },
+    {
+      "name": "Affiliate Advertising",
+      "type": "line",
+      "stack": "Total",
+      "data": [220, 182, 191, 234, 290, 330, 310]
+    },
+    {
+      "name": "Video Advertising",
+      "type": "line",
+      "stack": "Total",
+      "data": [150, 232, 201, 154, 190, 330, 410]
+    },
+    {
+      "name": "Direct View",
+      "type": "line",
+      "stack": "Total",
+      "data": [320, 332, 301, 334, 390, 330, 320]
+    },
+    {
+      "name": "Search Engine",
+      "type": "line",
+      "stack": "Total",
+      "data": [820, 932, 901, 934, 1290, 1330, 1320]
+    }
+  ]
+}
+{{</* /echarts */>}}
+```
+
+The same in `YAML` format:
+
+```yaml
+{{</* echarts */>}}
+title:
+    text: Summary Line Chart
+    top: 2%
+    left: center
+tooltip:
+    trigger: axis
+legend:
+    data:
+        - Email Marketing
+        - Affiliate Advertising
+        - Video Advertising
+        - Direct View
+        - Search Engine
+    top: 10%
+grid:
+    left: 5%
+    right: 5%
+    bottom: 5%
+    top: 20%
+    containLabel: true
+toolbox:
+    feature:
+        saveAsImage:
+            title: Save as Image
+xAxis:
+    type: category
+    boundaryGap: false
+    data:
+        - Monday
+        - Tuesday
+        - Wednesday
+        - Thursday
+        - Friday
+        - Saturday
+        - Sunday
+yAxis:
+    type: value
+series:
+    - name: Email Marketing
+      type: line
+      stack: Total
+      data:
+          - 120
+          - 132
+          - 101
+          - 134
+          - 90
+          - 230
+          - 210
+    - name: Affiliate Advertising
+      type: line
+      stack: Total
+      data:
+          - 220
+          - 182
+          - 191
+          - 234
+          - 290
+          - 330
+          - 310
+    - name: Video Advertising
+      type: line
+      stack: Total
+      data:
+          - 150
+          - 232
+          - 201
+          - 154
+          - 190
+          - 330
+          - 410
+    - name: Direct View
+      type: line
+      stack: Total
+      data:
+          - 320
+          - 332
+          - 301
+          - 334
+          - 390
+          - 330
+          - 320
+    - name: Search Engine
+      type: line
+      stack: Total
+      data:
+          - 820
+          - 932
+          - 901
+          - 934
+          - 1290
+          - 1330
+          - 1320
+{{</* /echarts */>}}
+```
+
+The same in `TOML` format:
+
+```toml
+{{</* echarts */>}}
+[title]
+text = "Summary Line Chart"
+top = "2%"
+left = "center"
+
+[tooltip]
+trigger = "axis"
+
+[legend]
+data = [
+  "Email Marketing",
+  "Affiliate Advertising",
+  "Video Advertising",
+  "Direct View",
+  "Search Engine"
+]
+top = "10%"
+
+[grid]
+left = "5%"
+right = "5%"
+bottom = "5%"
+top = "20%"
+containLabel = true
+
+[toolbox]
+[toolbox.feature]
+[toolbox.feature.saveAsImage]
+title = "Save as Image"
+
+[xAxis]
+type = "category"
+boundaryGap = false
+data = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday"
+]
+
+[yAxis]
+type = "value"
+
+[[series]]
+name = "Email Marketing"
+type = "line"
+stack = "Total"
+data = [
+  120.0,
+  132.0,
+  101.0,
+  134.0,
+  90.0,
+  230.0,
+  210.0
+]
+
+[[series]]
+name = "Affiliate Advertising"
+type = "line"
+stack = "Total"
+data = [
+  220.0,
+  182.0,
+  191.0,
+  234.0,
+  290.0,
+  330.0,
+  310.0
+]
+
+[[series]]
+name = "Video Advertising"
+type = "line"
+stack = "Total"
+data = [
+  150.0,
+  232.0,
+  201.0,
+  154.0,
+  190.0,
+  330.0,
+  410.0
+]
+
+[[series]]
+name = "Direct View"
+type = "line"
+stack = "Total"
+data = [
+  320.0,
+  332.0,
+  301.0,
+  334.0,
+  390.0,
+  330.0,
+  320.0
+]
+
+[[series]]
+name = "Search Engine"
+type = "line"
+stack = "Total"
+data = [
+  820.0,
+  932.0,
+  901.0,
+  934.0,
+  1290.0,
+  1330.0,
+  1320.0
+]
+{{</* /echarts */>}}
+```
+
+The rendered output looks like this:
+
+{{< echarts >}}
+{
+"title": {
+"text": "Summary Line Chart",
+"top": "2%",
+"left": "center"
+},
+"tooltip": {
+"trigger": "axis"
+},
+"legend": {
+"data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"],
+"top": "10%"
+},
+"grid": {
+"left": "5%",
+"right": "5%",
+"bottom": "5%",
+"top": "20%",
+"containLabel": true
+},
+"toolbox": {
+"feature": {
+"saveAsImage": {
+"title": "Save as Image"
+}
+}
+},
+"xAxis": {
+"type": "category",
+"boundaryGap": false,
+"data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
+},
+"yAxis": {
+"type": "value"
+},
+"series": [
+{
+"name": "Email Marketing",
+"type": "line",
+"stack": "Total",
+"data": [120, 132, 101, 134, 90, 230, 210]
+},
+{
+"name": "Affiliate Advertising",
+"type": "line",
+"stack": "Total",
+"data": [220, 182, 191, 234, 290, 330, 310]
+},
+{
+"name": "Video Advertising",
+"type": "line",
+"stack": "Total",
+"data": [150, 232, 201, 154, 190, 330, 410]
+},
+{
+"name": "Direct View",
+"type": "line",
+"stack": "Total",
+"data": [320, 332, 301, 334, 390, 330, 320]
+},
+{
+"name": "Search Engine",
+"type": "line",
+"stack": "Total",
+"data": [820, 932, 901, 934, 1290, 1330, 1320]
+}
+]
+}
+{{< /echarts >}}
+
+The `echarts` shortcode has also the following named parameters:
+
+- **width** _[optional]_ (**first** positional parameter)
+
+  Width of the data visualization, default value is `100%`.
+
+- **height** _[optional]_ (**second** positional parameter)
+
+  Height of the data visualization, default value is `30rem`.
+
+## 7 mapbox
+
+[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 simple `mapbox` input:
+
+```markdown
+{{</* mapbox 121.485 31.233 12 */>}}
+Or
+{{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}
+```
+
+The rendered output looks like this:
+
+{{< mapbox 121.485 31.233 12 >}}
+
+Example `mapbox` input with the custom style:
+
+```markdown
+{{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4" "mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
+Or
+{{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/navigation-preview-day-v4" dark-style="mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
+```
+
+The rendered output looks like this:
+
+{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4?optimize=true" "mapbox://styles/mapbox/navigation-preview-night-v4?optimize=true" >}}
+
+## 8 music
+
+The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS).
+
+There are three ways to use it the `music` shortcode.
+
+### 8.1 Custom Music URL {#custom-music-url}
+
+The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
+
+The `music` shortcode has the following named parameters by custom music URL:
+
+- **server** _[required]_
+
+  URL of the custom music.
+
+- **name** _[optional]_
+
+  Name of the custom music.
+
+- **artist** _[optional]_
+
+  Artist of the custom music.
+
+- **cover** _[required]_
+
+  URL of the custom music cover.
+
+Example `music` input by custom music URL:
+
+```markdown
+{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" */>}}
+```
+
+The rendered output looks like this:
+
+{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}
+
+### 8.2 Music Platform URL Automatic Identification {#automatic-identification}
+
+The `music` shortcode has one named parameter by music platform URL automatic identification:
+
+- **auto** _[required]_ (**first** positional parameter)
+
+  URL of the music platform URL for automatic identification,
+  which supports `netease`, `tencent` and `xiami` music platform.
+
+Example `music` input by music platform URL automatic identification:
+
+```markdown
+{{</* music auto="https://music.163.com/#/playlist?id=60198" */>}}
+Or
+{{</* music "https://music.163.com/#/playlist?id=60198" */>}}
+```
+
+The rendered output looks like this:
+
+{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
+
+### 8.3 Custom Server, Type and ID {#custom-server}
+
+The `music` shortcode has the following named parameters by custom music platform:
+
+- **server** _[required]_ (**first** positional parameter)
+
+  [`netease`, `tencent`, `kugou`, `xiami`, `baidu`]
+
+  Music platform.
+
+- **type** _[required]_ (**second** positional parameter)
+
+  [`song`, `playlist`, `album`, `search`, `artist`]
+
+  Type of the music.
+
+- **id** _[required]_ (**third** positional parameter)
+
+  Song ID, or playlist ID, or album ID, or search keyword, or artist ID.
+
+Example `music` input by custom music platform:
+
+```markdown
+{{</* music server="netease" type="song" id="1868553" */>}}
+Or
+{{</* music netease song 1868553 */>}}
+```
+
+The rendered output looks like this:
+
+{{< music netease song 1868553 >}}
+
+### 8.4 Other Parameters {#other-parameters}
+
+The `music` shortcode has other named parameters applying to the above three ways:
+
+- **theme** _[optional]_
+
+  Main color of the music player, default value is `#448aff`.
+
+- **fixed** _[optional]_
+
+  Whether to enable fixed mode, default value is `false`.
+
+- **mini** _[optional]_
+
+  Whether to enable mini mode, default value is `false`.
+
+- **autoplay** _[optional]_
+
+  Whether to autoplay music, default value is `false`.
+
+- **volume** _[optional]_
+
+  Default volume when the player is first opened, which will be remembered in the browser, default value is `0.7`.
+
+- **mutex** _[optional]_
+
+  Whether to pause other players when this player starts playing, default value is `true`.
+
+The `music` shortcode has the following named parameters only applying to the type of music list:
+
+- **loop** _[optional]_
+
+  [`all`, `one`, `none`]
+
+  Loop mode of the music list, default value is `none`.
+
+- **order** _[optional]_
+
+  [`list`, `random`]
+
+  Play order of the music list, default value is `list`.
+
+- **list-folded** _[optional]_
+
+  Whether the music list should be folded at first, default value is `false`.
+
+- **list-max-height** _[optional]_
+
+  Max height of the music list, default value is `340px`.
+
+## 9 bilibili
+
+The `bilibili` shortcode embeds a responsive video player for bilibili videos.
+
+When the video only has one part, only the BV `id` of the video is required, e.g.:
+
+```code
+https://www.bilibili.com/video/BV1Sx411T7QQ
+```
+
+Example `bilibili` input:
+
+```markdown
+{{</* bilibili BV1Sx411T7QQ */>}}
+Or
+{{</* bilibili id=BV1Sx411T7QQ */>}}
+```
+
+The rendered output looks like this:
+
+{{< bilibili id=BV1Sx411T7QQ >}}
+
+When the video has multiple parts, in addition to the BV `id` of the video,
+`p` is also required, whose default value is `1`, e.g.:
+
+```code
+https://www.bilibili.com/video/BV1TJ411C7An?p=3
+```
+
+Example `bilibili` input with `p`:
+
+```markdown
+{{</* bilibili BV1TJ411C7An 3 */>}}
+Or
+{{</* bilibili id=BV1TJ411C7An p=3 */>}}
+```
+
+The rendered output looks like this:
+
+{{< bilibili id=BV1TJ411C7An p=3 >}}
+
+## 10 typeit
+
+The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/).
+
+Just insert your content in the `typeit` shortcode and that’s it.
+
+### 10.1 Simple Content {#simple-content}
+
+Simple content is allowed in `Markdown` format and **without** rich block content such as images and more...
+
+Example `typeit` input:
+
+```markdown
+{{</* typeit */>}}
+This is a _paragraph_ with **typing animation** based on [TypeIt](https://typeitjs.com/)...
+{{</* /typeit */>}}
+```
+
+The rendered output looks like this:
+
+{{< typeit >}}
+This is a _paragraph_ with **typing animation** based on [TypeIt](https://typeitjs.com/)...
+{{< /typeit >}}
+
+Alternatively, you can use custom **HTML tags**.
+
+Example `typeit` input with `h4` tag:
+
+```markdown
+{{</* typeit tag=h4 */>}}
+This is a _paragraph_ with **typing animation** based on [TypeIt](https://typeitjs.com/)...
+{{</* /typeit */>}}
+```
+
+The rendered output looks like this:
+
+{{< typeit tag=h4 >}}
+This is a _paragraph_ with **typing animation** based on [TypeIt](https://typeitjs.com/)...
+{{< /typeit >}}
+
+### 10.2 Code Content {#code-content}
+
+Code content is allowed and will be highlighted by named parameter `code` for the type of code language.
+
+Example `typeit` input with `code`:
+
+```markdown
+{{</* typeit code=java */>}}
+public class HelloWorld {
+public static void main(String []args) {
+System.out.println("Hello World");
+}
+}
+{{</* /typeit */>}}
+```
+
+The rendered output looks like this:
+
+{{< typeit code=java >}}
+public class HelloWorld {
+public static void main(String []args) {
+System.out.println("Hello World");
+}
+}
+{{< /typeit >}}
+
+### 10.3 Group Content {#group-content}
+
+All typing animations start at the same time by default.
+But sometimes you may want to start a set of `typeit` contents in order.
+
+A set of `typeit` contents with the same value of named parameter `group` will start typing animation in sequence.
+
+Example `typeit` input with `group`:
+
+```markdown
+{{</* typeit group=paragraph */>}}
+**First** this paragraph begins
+{{</* /typeit */>}}
+
+{{</* typeit group=paragraph */>}}
+**Then** this paragraph begins
+{{</* /typeit */>}}
+```
+
+The rendered output looks like this:
+
+{{< typeit group=paragraph >}}
+**First** this paragraph begins
+{{< /typeit >}}
+
+{{< typeit group=paragraph >}}
+**Then** this paragraph begins
+{{< /typeit >}}
+
+## 11 script
+
+`script` is a shortcode to insert custom **:(fab fa-js fa-fw): Javascript** in your post.
+
+{{< admonition >}}
+The script content can be guaranteed to be executed in order after all third-party libraries are loaded. So you are free to use third-party libraries.
+{{< /admonition >}}
+
+Example `script` input:
+
+```markdown
+{{</* script */>}}
+console.log('Hello CodeIT!');
+{{</* /script */>}}
+```
+
+You can see the output in the console of the developer tool.
+
+{{< script >}}
+console.log('Hello CodeIT!');
+{{< /script >}}