From 0c7cb4486a89ec6fe9680e6569ef41d4b82d557d Mon Sep 17 00:00:00 2001 From: Christoph Cullmann Date: Thu, 18 Feb 2021 22:21:36 +0100 Subject: use maintained theme --- .../index.fr.md | 1288 ++++++++++++++++++++ 1 file changed, 1288 insertions(+) create mode 100644 themes/CodeIT/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.fr.md (limited to 'themes/CodeIT/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.fr.md') 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. + + + +{{< 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 +{{}} +This is a **right-aligned** paragraph. +{{}} +``` + +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 +{{}} +Or +{{}} + +{{}} +Or +{{}} + +{{}} +Or +{{}} +``` + +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 +{{}} +Or +{{}} +``` + +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 +{{}} +``` + +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 +{{}} +A **tip** banner +{{}} +Or +{{}} +A **tip** banner +{{}} +``` + +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 +{{}} +graph LR; +A[Hard edge] -->|Link text| B(Round edge) +B --> C{Decision} +C -->|One| D[Result one] +C -->|Two| E[Result two] +{{}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +graph LR; +A[Hard edge] -->|Link text| B(Round edge) +B --> C{Decision} +C -->|One| D[Result one] +C -->|Two| E[Result two] +{{< /mermaid >}} + +### 5.2 Sequence Diagram {#sequence-diagram} + +Example **sequence diagram** `mermaid` input: + +```markdown +{{}} +sequenceDiagram +participant Alice +participant Bob +Alice->>John: Hello John, how are you? +loop Healthcheck +John->John: Fight against hypochondria +end +Note right of John: Rational thoughts
prevail... +John-->Alice: Great! +John->Bob: How about you? +Bob-->John: Jolly good! +{{}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +sequenceDiagram +participant Alice +participant Bob +Alice->>John: Hello John, how are you? +loop Healthcheck +John->John: Fight against hypochondria +end +Note right of John: Rational thoughts
prevail... +John-->Alice: Great! +John->Bob: How about you? +Bob-->John: Jolly good! +{{< /mermaid >}} + +### 5.3 GANTT {#gantt} + +Example **GANTT** `mermaid` input: + +```markdown +{{}} +gantt +dateFormat YYYY-MM-DD +title Adding GANTT diagram functionality to mermaid +section A section +Completed task :done, des1, 2014-01-06,2014-01-08 +Active task :active, des2, 2014-01-09, 3d +Future task : des3, after des2, 5d +Future task2 : des4, after des3, 5d +section Critical tasks +Completed task in the critical line :crit, done, 2014-01-06,24h +Implement parser and jison :crit, done, after des1, 2d +Create tests for parser :crit, active, 3d +Future task in critical line :crit, 5d +Create tests for renderer :2d +Add to mermaid :1d +{{}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +gantt +dateFormat YYYY-MM-DD +title Adding GANTT diagram functionality to mermaid +section A section +Completed task :done, des1, 2014-01-06,2014-01-08 +Active task :active, des2, 2014-01-09, 3d +Future task : des3, after des2, 5d +Future task2 : des4, after des3, 5d +section Critical tasks +Completed task in the critical line :crit, done, 2014-01-06,24h +Implement parser and jison :crit, done, after des1, 2d +Create tests for parser :crit, active, 3d +Future task in critical line :crit, 5d +Create tests for renderer :2d +Add to mermaid :1d +{{< /mermaid >}} + +### 5.4 Class Diagram {#class-diagram} + +Example **class diagram** `mermaid` input: + +```markdown +{{}} +classDiagram +Class01 <|-- AveryLongClass : Cool +Class03 _-- Class04 +Class05 o-- Class06 +Class07 .. Class08 +Class09 --> C2 : Where am i? +Class09 --_ C3 +Class09 --|> Class07 +Class07 : equals() +Class07 : Object[] elementData +Class01 : size() +Class01 : int chimp +Class01 : int gorilla +Class08 <--> C2: Cool label +{{}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +classDiagram +Class01 <|-- AveryLongClass : Cool +Class03 _-- Class04 +Class05 o-- Class06 +Class07 .. Class08 +Class09 --> C2 : Where am i? +Class09 --_ C3 +Class09 --|> Class07 +Class07 : equals() +Class07 : Object[] elementData +Class01 : size() +Class01 : int chimp +Class01 : int gorilla +Class08 <--> C2: Cool label +{{< /mermaid >}} + +### 5.5 State Diagram {#state-diagram} + +Example **state diagram** `mermaid` input: + +```markdown +{{}} +stateDiagram +[*] --> Still +Still --> [*] +Still --> Moving +Moving --> Still +Moving --> Crash +Crash --> [*] +{{}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +stateDiagram +[*] --> Still +Still --> [*] +Still --> Moving +Moving --> Still +Moving --> Crash +Crash --> [*] +{{< /mermaid >}} + +### 5.6 Git Graph {#git-graph} + +Example **git graph** `mermaid` input: + +```markdown +{{}} +gitGraph: +options +{ +"nodeSpacing": 100, +"nodeRadius": 10 +} +end +commit +branch newbranch +checkout newbranch +commit +commit +checkout master +commit +commit +merge newbranch +{{}} +``` + +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 +{{}} +pie +"Dogs" : 386 +"Cats" : 85 +"Rats" : 15 +{{}} +``` + +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 +{{}} +{ + "title": { + "text": "Summary Line Chart", + "top": "2%", + "left": "center" + }, + "tooltip": { + "trigger": "axis" + }, + "legend": { + "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"], + "top": "10%" + }, + "grid": { + "left": "5%", + "right": "5%", + "bottom": "5%", + "top": "20%", + "containLabel": true + }, + "toolbox": { + "feature": { + "saveAsImage": { + "title": "Save as Image" + } + } + }, + "xAxis": { + "type": "category", + "boundaryGap": false, + "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] + }, + "yAxis": { + "type": "value" + }, + "series": [ + { + "name": "Email Marketing", + "type": "line", + "stack": "Total", + "data": [120, 132, 101, 134, 90, 230, 210] + }, + { + "name": "Affiliate Advertising", + "type": "line", + "stack": "Total", + "data": [220, 182, 191, 234, 290, 330, 310] + }, + { + "name": "Video Advertising", + "type": "line", + "stack": "Total", + "data": [150, 232, 201, 154, 190, 330, 410] + }, + { + "name": "Direct View", + "type": "line", + "stack": "Total", + "data": [320, 332, 301, 334, 390, 330, 320] + }, + { + "name": "Search Engine", + "type": "line", + "stack": "Total", + "data": [820, 932, 901, 934, 1290, 1330, 1320] + } + ] +} +{{}} +``` + +The same in `YAML` format: + +```yaml +{{}} +title: + text: Summary Line Chart + top: 2% + left: center +tooltip: + trigger: axis +legend: + data: + - Email Marketing + - Affiliate Advertising + - Video Advertising + - Direct View + - Search Engine + top: 10% +grid: + left: 5% + right: 5% + bottom: 5% + top: 20% + containLabel: true +toolbox: + feature: + saveAsImage: + title: Save as Image +xAxis: + type: category + boundaryGap: false + data: + - Monday + - Tuesday + - Wednesday + - Thursday + - Friday + - Saturday + - Sunday +yAxis: + type: value +series: + - name: Email Marketing + type: line + stack: Total + data: + - 120 + - 132 + - 101 + - 134 + - 90 + - 230 + - 210 + - name: Affiliate Advertising + type: line + stack: Total + data: + - 220 + - 182 + - 191 + - 234 + - 290 + - 330 + - 310 + - name: Video Advertising + type: line + stack: Total + data: + - 150 + - 232 + - 201 + - 154 + - 190 + - 330 + - 410 + - name: Direct View + type: line + stack: Total + data: + - 320 + - 332 + - 301 + - 334 + - 390 + - 330 + - 320 + - name: Search Engine + type: line + stack: Total + data: + - 820 + - 932 + - 901 + - 934 + - 1290 + - 1330 + - 1320 +{{}} +``` + +The same in `TOML` format: + +```toml +{{}} +[title] +text = "Summary Line Chart" +top = "2%" +left = "center" + +[tooltip] +trigger = "axis" + +[legend] +data = [ + "Email Marketing", + "Affiliate Advertising", + "Video Advertising", + "Direct View", + "Search Engine" +] +top = "10%" + +[grid] +left = "5%" +right = "5%" +bottom = "5%" +top = "20%" +containLabel = true + +[toolbox] +[toolbox.feature] +[toolbox.feature.saveAsImage] +title = "Save as Image" + +[xAxis] +type = "category" +boundaryGap = false +data = [ + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + "Sunday" +] + +[yAxis] +type = "value" + +[[series]] +name = "Email Marketing" +type = "line" +stack = "Total" +data = [ + 120.0, + 132.0, + 101.0, + 134.0, + 90.0, + 230.0, + 210.0 +] + +[[series]] +name = "Affiliate Advertising" +type = "line" +stack = "Total" +data = [ + 220.0, + 182.0, + 191.0, + 234.0, + 290.0, + 330.0, + 310.0 +] + +[[series]] +name = "Video Advertising" +type = "line" +stack = "Total" +data = [ + 150.0, + 232.0, + 201.0, + 154.0, + 190.0, + 330.0, + 410.0 +] + +[[series]] +name = "Direct View" +type = "line" +stack = "Total" +data = [ + 320.0, + 332.0, + 301.0, + 334.0, + 390.0, + 330.0, + 320.0 +] + +[[series]] +name = "Search Engine" +type = "line" +stack = "Total" +data = [ + 820.0, + 932.0, + 901.0, + 934.0, + 1290.0, + 1330.0, + 1320.0 +] +{{}} +``` + +The rendered output looks like this: + +{{< echarts >}} +{ +"title": { +"text": "Summary Line Chart", +"top": "2%", +"left": "center" +}, +"tooltip": { +"trigger": "axis" +}, +"legend": { +"data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"], +"top": "10%" +}, +"grid": { +"left": "5%", +"right": "5%", +"bottom": "5%", +"top": "20%", +"containLabel": true +}, +"toolbox": { +"feature": { +"saveAsImage": { +"title": "Save as Image" +} +} +}, +"xAxis": { +"type": "category", +"boundaryGap": false, +"data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] +}, +"yAxis": { +"type": "value" +}, +"series": [ +{ +"name": "Email Marketing", +"type": "line", +"stack": "Total", +"data": [120, 132, 101, 134, 90, 230, 210] +}, +{ +"name": "Affiliate Advertising", +"type": "line", +"stack": "Total", +"data": [220, 182, 191, 234, 290, 330, 310] +}, +{ +"name": "Video Advertising", +"type": "line", +"stack": "Total", +"data": [150, 232, 201, 154, 190, 330, 410] +}, +{ +"name": "Direct View", +"type": "line", +"stack": "Total", +"data": [320, 332, 301, 334, 390, 330, 320] +}, +{ +"name": "Search Engine", +"type": "line", +"stack": "Total", +"data": [820, 932, 901, 934, 1290, 1330, 1320] +} +] +} +{{< /echarts >}} + +The `echarts` shortcode has also the following named parameters: + +- **width** _[optional]_ (**first** positional parameter) + + 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 +{{}} +Or +{{}} +``` + +The rendered output looks like this: + +{{< mapbox 121.485 31.233 12 >}} + +Example `mapbox` input with the custom style: + +```markdown +{{}} +Or +{{}} +``` + +The rendered output looks like this: + +{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4?optimize=true" "mapbox://styles/mapbox/navigation-preview-night-v4?optimize=true" >}} + +## 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 +{{}} +``` + +The rendered output looks like this: + +{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}} + +### 8.2 Music Platform URL Automatic Identification {#automatic-identification} + +The `music` shortcode has one named parameter by music platform URL automatic identification: + +- **auto** _[required]_ (**first** positional parameter) + + URL of the music platform URL for automatic identification, + which supports `netease`, `tencent` and `xiami` music platform. + +Example `music` input by music platform URL automatic identification: + +```markdown +{{}} +Or +{{}} +``` + +The rendered output looks like this: + +{{< music auto="https://music.163.com/#/playlist?id=60198" >}} + +### 8.3 Custom Server, Type and ID {#custom-server} + +The `music` shortcode has the following named parameters by custom music platform: + +- **server** _[required]_ (**first** positional parameter) + + [`netease`, `tencent`, `kugou`, `xiami`, `baidu`] + + Music platform. + +- **type** _[required]_ (**second** positional parameter) + + [`song`, `playlist`, `album`, `search`, `artist`] + + Type of the music. + +- **id** _[required]_ (**third** positional parameter) + + Song ID, or playlist ID, or album ID, or search keyword, or artist ID. + +Example `music` input by custom music platform: + +```markdown +{{}} +Or +{{}} +``` + +The rendered output looks like this: + +{{< music netease song 1868553 >}} + +### 8.4 Other Parameters {#other-parameters} + +The `music` shortcode has other named parameters applying to the above three ways: + +- **theme** _[optional]_ + + 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 +{{}} +Or +{{}} +``` + +The rendered output looks like this: + +{{< bilibili id=BV1Sx411T7QQ >}} + +When the video has multiple parts, in addition to the BV `id` of the video, +`p` is also required, whose default value is `1`, e.g.: + +```code +https://www.bilibili.com/video/BV1TJ411C7An?p=3 +``` + +Example `bilibili` input with `p`: + +```markdown +{{}} +Or +{{}} +``` + +The rendered output looks like this: + +{{< bilibili id=BV1TJ411C7An p=3 >}} + +## 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 +{{}} +This is a _paragraph_ with **typing animation** based on [TypeIt](https://typeitjs.com/)... +{{}} +``` + +The rendered output looks like this: + +{{< typeit >}} +This is a _paragraph_ with **typing animation** based on [TypeIt](https://typeitjs.com/)... +{{< /typeit >}} + +Alternatively, you can use custom **HTML tags**. + +Example `typeit` input with `h4` tag: + +```markdown +{{}} +This is a _paragraph_ with **typing animation** based on [TypeIt](https://typeitjs.com/)... +{{}} +``` + +The rendered output looks like this: + +{{< typeit tag=h4 >}} +This is a _paragraph_ with **typing animation** based on [TypeIt](https://typeitjs.com/)... +{{< /typeit >}} + +### 10.2 Code Content {#code-content} + +Code content is allowed and will be highlighted by named parameter `code` for the type of code language. + +Example `typeit` input with `code`: + +```markdown +{{}} +public class HelloWorld { +public static void main(String []args) { +System.out.println("Hello World"); +} +} +{{}} +``` + +The rendered output looks like this: + +{{< typeit code=java >}} +public class HelloWorld { +public static void main(String []args) { +System.out.println("Hello World"); +} +} +{{< /typeit >}} + +### 10.3 Group Content {#group-content} + +All typing animations start at the same time by default. +But sometimes you may want to start a set of `typeit` contents in order. + +A set of `typeit` contents with the same value of named parameter `group` will start typing animation in sequence. + +Example `typeit` input with `group`: + +```markdown +{{}} +**First** this paragraph begins +{{}} + +{{}} +**Then** this paragraph begins +{{}} +``` + +The rendered output looks like this: + +{{< typeit group=paragraph >}} +**First** this paragraph begins +{{< /typeit >}} + +{{< typeit group=paragraph >}} +**Then** this paragraph begins +{{< /typeit >}} + +## 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 +{{}} +console.log('Hello CodeIT!'); +{{}} +``` + +You can see the output in the console of the developer tool. + +{{< script >}} +console.log('Hello CodeIT!'); +{{< /script >}} -- cgit v1.2.3