idanoo/m2.nz
1
0
Fork 0
mirror of https://github.com/idanoo/m2.nz.git synced 2024-11-30 04:05:13 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
aeb7459d9e
m2.nz/themes/LoveIt/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md

1321 lines
32 KiB
Markdown
Raw Normal View History

Add theme
2022-05-08 06:47:31 +00:00
---
weight: 4
title: "Theme Documentation - Extended Shortcodes"
date: 2020-03-03T16:29:41+08:00
lastmod: 2020-03-03T16:29:41+08:00
draft: false
author: "Dillon"
authorLink: "https://dillonzq.com"
description: "LoveIt theme provides multiple shortcodes on top of built-in ones in Hugo."
images: ["featured-image.png"]
resources:
- name: "featured-image"
src: "featured-image.jpg"
- name: "featured-image-preview"
src: "featured-image-preview.jpg"
tags: ["shortcodes"]
categories: ["documentation"]
lightgallery: true
math:
enable: true
---
**LoveIt** theme provides multiple shortcodes on top of built-in ones in Hugo.
<!--more-->
## 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
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
{{</* /mermaid */>}}
```
The rendered output looks like this:
{{< mermaid >}}
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
{{< /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 >}}
## 12 raw
`raw` is a shortcode to insert raw **:(fab fa-html5 fa-fw): HTML** content in your post.
This is useful when you want to include some Markdown content to **avoid being rendered or escaped** by Hugo.
Example `raw` input:
```markdown
Inline Formula: {{</* raw */>}}\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{</* /raw */>}}
Block Formula:
{{</* raw */>}}
\[ a=b+c \\ d+e=f \]
{{</* /raw */>}}
Raw content using Markdown syntax: {{</* raw */>}}**Hello**{{</* /raw */>}}
```
The rendered output looks like this:
Inline Formula: {{< raw >}}\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{< /raw >}}
Block Formula:
{{< raw>}}
\[ a=b+c \\ d+e=f \]
{{< /raw >}}
Raw content using Markdown syntax: {{< raw >}}**Hello**{{< /raw >}}
Reference in New Issue Copy Permalink