diff options
Diffstat (limited to 'themes/LoveIt/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.fr.md')
| -rw-r--r-- | themes/LoveIt/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.fr.md | 1300 |
1 files changed, 0 insertions, 1300 deletions
diff --git a/themes/LoveIt/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.fr.md b/themes/LoveIt/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.fr.md deleted file mode 100644 index 8cbecea..0000000 --- a/themes/LoveIt/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.fr.md +++ /dev/null @@ -1,1300 +0,0 @@ ---- -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: "Dillon" -authorLink: "https://dillonzq.com" -description: "Le thème LoveIt 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 **LoveIt** 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/dillonzq/LoveIt/pulls) to the theme! -{{< /admonition >}} - -## 1 style - -{{< version 0.2.0 changed >}} - -{{< 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 - -{{< version 0.2.0 >}} - -`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. - -{{< version 0.2.10 >}} 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} - -{{< version 0.2.0 changed >}} - -`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). - -{{< version 0.2.10 >}} 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) {{< version 0.2.0 changed >}} - - 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) - - {{< version 0.2.0 >}} Width of the data visualization, default value is `100%`. - -* **height** *[optional]* (**second** positional parameter) - - {{< version 0.2.0 >}} Height of the data visualization, default value is `30rem`. - -## 7 mapbox - -{{< version 0.2.0 >}} - -[Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) is a JavaScript library that uses WebGL to render interactive maps from [vector tiles](https://docs.mapbox.com/help/glossary/vector-tiles/) and [Mapbox styles](https://docs.mapbox.com/mapbox-gl-js/style-spec/). - -The `mapbox` shortcode 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} - -{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported. - -The `music` shortcode has the following named parameters by custom music URL: - -* **server** *[required]* - - URL of the custom music. - -* **name** *[optional]* - - Name of the custom music. - -* **artist** *[optional]* - - Artist of the custom music. - -* **cover** *[required]* - - URL of the custom music cover. - -Example `music` input by custom music URL: - -```markdown -{{</* 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]* - - {{< version 0.2.0 changed >}} Main color of the music player, default value is `#448aff`. - -* **fixed** *[optional]* - - Whether to enable fixed mode, default value is `false`. - -* **mini** *[optional]* - - Whether to enable mini mode, default value is `false`. - -* **autoplay** *[optional]* - - Whether to autoplay music, default value is `false`. - -* **volume** *[optional]* - - Default volume when the player is first opened, which will be remembered in the browser, default value is `0.7`. - -* **mutex** *[optional]* - - Whether to pause other players when this player starts playing, default value is `true`. - -The `music` shortcode has the following named parameters only applying to the type of music list: - -* **loop** *[optional]* - - [`all`, `one`, `none`] - - Loop mode of the music list, default value is `none`. - -* **order** *[optional]* - - [`list`, `random`] - - Play order of the music list, default value is `list`. - -* **list-folded** *[optional]* - - Whether the music list should be folded at first, default value is `false`. - -* **list-max-height** *[optional]* - - Max height of the music list, default value is `340px`. - -## 9 bilibili - -{{< version 0.2.0 changed >}} - -The `bilibili` shortcode embeds a responsive video player for bilibili videos. - -When the video only has one part, only the BV `id` of the video is required, e.g.: - -```code -https://www.bilibili.com/video/BV1Sx411T7QQ -``` - -Example `bilibili` input: - -```markdown -{{</* 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 - -{{< version 0.2.8 >}} - -`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 LoveIt!'); -{{</* /script */>}} -``` - -You can see the output in the console of the developer tool. - -{{< script >}} -console.log('Hello LoveIt!'); -{{< /script >}} |