mirror of
https://github.com/dillonzq/LoveIt.git
synced 2025-03-30 19:08:13 +02:00
chore(docs): update shortcodes docs
This commit is contained in:
Dillon
parent
4191e046d8
commit
a0d222a1ce
8 changed files with 132 additions and 114 deletions
exampleSite
|
|
@ -28,7 +28,7 @@ A shortcode is a simple snippet that can generate reasonable HTML code and confo
|
|||
|
||||
Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
|
||||
|
||||
## figure {#figure}
|
||||
## 1 figure {#figure}
|
||||
|
||||
[Documentation of `figure`](https://gohugo.io/content-management/shortcodes#figure)
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ The HTML looks like this:
|
|||
</figure>
|
||||
```
|
||||
|
||||
## gist
|
||||
## 2 gist
|
||||
|
||||
[Documentation of `gist`](https://gohugo.io/content-management/shortcodes#gist)
|
||||
|
||||
|
|
@ -73,7 +73,7 @@ The HTML looks like this:
|
|||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
## highlight
|
||||
## 3 highlight
|
||||
|
||||
[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes#instagram)
|
||||
|
||||
|
|
@ -105,7 +105,7 @@ The rendered output looks like this:
|
|||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
## instagram
|
||||
## 4 instagram
|
||||
|
||||
[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes#instagram)
|
||||
|
||||
|
|
@ -119,7 +119,7 @@ The rendered output looks like this:
|
|||
|
||||
{{< instagram BWNjjyYFxVx hidecaption >}}
|
||||
|
||||
## param
|
||||
## 5 param
|
||||
|
||||
[Documentation of `param`](https://gohugo.io/content-management/shortcodes#param)
|
||||
|
||||
|
|
@ -133,11 +133,11 @@ The rendered output looks like this:
|
|||
|
||||
{{< param description >}}
|
||||
|
||||
## ref and relref {#ref-and-relref}
|
||||
## 6 ref and relref {#ref-and-relref}
|
||||
|
||||
[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes#ref-and-relref)
|
||||
|
||||
## tweet
|
||||
## 7 tweet
|
||||
|
||||
[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes#tweet)
|
||||
|
||||
|
|
@ -151,7 +151,7 @@ The rendered output looks like this:
|
|||
|
||||
{{< tweet 877500564405444608 >}}
|
||||
|
||||
## vimeo
|
||||
## 8 vimeo
|
||||
|
||||
[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes#vimeo)
|
||||
|
||||
|
|
@ -165,7 +165,7 @@ The rendered output looks like this:
|
|||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
## youtube
|
||||
## 9 youtube
|
||||
|
||||
[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes#youtube)
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ A shortcode is a simple snippet that can generate reasonable HTML code and confo
|
|||
|
||||
Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
|
||||
|
||||
## figure {#figure}
|
||||
## 1 figure {#figure}
|
||||
|
||||
[Documentation of `figure`](https://gohugo.io/content-management/shortcodes#figure)
|
||||
|
||||
|
|
@ -58,7 +58,7 @@ The HTML looks like this:
|
|||
</figure>
|
||||
```
|
||||
|
||||
## gist
|
||||
## 2 gist
|
||||
|
||||
[Documentation of `gist`](https://gohugo.io/content-management/shortcodes#gist)
|
||||
|
||||
|
|
@ -78,7 +78,7 @@ The HTML looks like this:
|
|||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
## highlight
|
||||
## 3 highlight
|
||||
|
||||
[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes#instagram)
|
||||
|
||||
|
|
@ -110,7 +110,7 @@ The rendered output looks like this:
|
|||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
## instagram
|
||||
## 4 instagram
|
||||
|
||||
[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes#instagram)
|
||||
|
||||
|
|
@ -124,7 +124,7 @@ The rendered output looks like this:
|
|||
|
||||
{{< instagram BWNjjyYFxVx hidecaption >}}
|
||||
|
||||
## param
|
||||
## 5 param
|
||||
|
||||
[Documentation of `param`](https://gohugo.io/content-management/shortcodes#param)
|
||||
|
||||
|
|
@ -138,11 +138,11 @@ The rendered output looks like this:
|
|||
|
||||
{{< param description >}}
|
||||
|
||||
## ref and relref {#ref-and-relref}
|
||||
## 6 ref and relref {#ref-and-relref}
|
||||
|
||||
[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes#ref-and-relref)
|
||||
|
||||
## tweet
|
||||
## 7 tweet
|
||||
|
||||
[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes#tweet)
|
||||
|
||||
|
|
@ -156,7 +156,7 @@ The rendered output looks like this:
|
|||
|
||||
{{< tweet 877500564405444608 >}}
|
||||
|
||||
## vimeo
|
||||
## 8 vimeo
|
||||
|
||||
[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes#vimeo)
|
||||
|
||||
|
|
@ -170,7 +170,7 @@ The rendered output looks like this:
|
|||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
## youtube
|
||||
## 9 youtube
|
||||
|
||||
[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes#youtube)
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ shortcode 是一个简单代码段, 可以生成合理的 HTML 代码, 并且符
|
|||
Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见的用法.
|
||||
提供这些 shortcodes 是为了方便保持你的 Markdown 内容简洁.
|
||||
|
||||
## figure {#figure}
|
||||
## 1 figure {#figure}
|
||||
|
||||
[`figure` 的文档](https://gohugo.io/content-management/shortcodes#figure)
|
||||
|
||||
|
|
@ -54,7 +54,7 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见
|
|||
</figure>
|
||||
```
|
||||
|
||||
## gist
|
||||
## 2 gist
|
||||
|
||||
[`gist` 的文档](https://gohugo.io/content-management/shortcodes#gist)
|
||||
|
||||
|
|
@ -74,7 +74,7 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见
|
|||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
## highlight
|
||||
## 3 highlight
|
||||
|
||||
[`highlight` 的文档](https://gohugo.io/content-management/shortcodes#instagram)
|
||||
|
||||
|
|
@ -106,7 +106,7 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见
|
|||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
## instagram
|
||||
## 4 instagram
|
||||
|
||||
[`instagram` 的文档](https://gohugo.io/content-management/shortcodes#instagram)
|
||||
|
||||
|
|
@ -120,7 +120,7 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见
|
|||
|
||||
{{< instagram BWNjjyYFxVx hidecaption >}}
|
||||
|
||||
## param
|
||||
## 5 param
|
||||
|
||||
[`param` 的文档](https://gohugo.io/content-management/shortcodes#param)
|
||||
|
||||
|
|
@ -134,11 +134,11 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见
|
|||
|
||||
{{< param description >}}
|
||||
|
||||
## ref 和 relref {#ref-and-relref}
|
||||
## 6 ref 和 relref {#ref-and-relref}
|
||||
|
||||
[`ref` 和 `relref` 的文档](https://gohugo.io/content-management/shortcodes#ref-and-relref)
|
||||
|
||||
## tweet
|
||||
## 7 tweet
|
||||
|
||||
[`tweet` 的文档](https://gohugo.io/content-management/shortcodes#tweet)
|
||||
|
||||
|
|
@ -152,7 +152,7 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见
|
|||
|
||||
{{< tweet 877500564405444608 >}}
|
||||
|
||||
## vimeo
|
||||
## 8 vimeo
|
||||
|
||||
[`vimeo` 的文档](https://gohugo.io/content-management/shortcodes#vimeo)
|
||||
|
||||
|
|
@ -166,7 +166,7 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见
|
|||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
## youtube
|
||||
## 9 youtube
|
||||
|
||||
[`youtube` 的文档](https://gohugo.io/content-management/shortcodes#youtube)
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ lightgallery: true
|
|||
|
||||
<!--more-->
|
||||
|
||||
## style
|
||||
## 1 style
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ The rendered output looks like this:
|
|||
This is a **right-aligned** paragraph.
|
||||
{{< /style >}}
|
||||
|
||||
## link
|
||||
## 2 link
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
|
|
@ -112,7 +112,7 @@ The rendered output looks like this (hover over the link, there should be a tool
|
|||
|
||||
{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
|
||||
|
||||
## image
|
||||
## 3 image
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
|
|
@ -182,7 +182,7 @@ The rendered output looks like this:
|
|||
|
||||
{{< image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" >}}
|
||||
|
||||
## admonition
|
||||
## 4 admonition
|
||||
|
||||
The `admonition` shortcode supports **12** types of banners to help you put notice in your page.
|
||||
|
||||
|
|
@ -268,13 +268,13 @@ The rendered output looks like this:
|
|||
A **tip** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
## mermaid
|
||||
## 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.
|
||||
|
||||
### Flowchart {#flowchart}
|
||||
### 5.1 Flowchart {#flowchart}
|
||||
|
||||
Example **flowchart** `mermaid` input:
|
||||
|
||||
|
|
@ -298,7 +298,7 @@ graph LR;
|
|||
C -->|Two| E[Result two]
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Sequence Diagram {#sequence-diagram}
|
||||
### 5.2 Sequence Diagram {#sequence-diagram}
|
||||
|
||||
Example **sequence diagram** `mermaid` input:
|
||||
|
||||
|
|
@ -334,7 +334,7 @@ sequenceDiagram
|
|||
Bob-->John: Jolly good!
|
||||
{{< /mermaid >}}
|
||||
|
||||
### GANTT {#gantt}
|
||||
### 5.3 GANTT {#gantt}
|
||||
|
||||
Example **GANTT** `mermaid` input:
|
||||
|
||||
|
|
@ -378,7 +378,7 @@ gantt
|
|||
Add to mermaid :1d
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Class Diagram {#class-diagram}
|
||||
### 5.4 Class Diagram {#class-diagram}
|
||||
|
||||
Example **class diagram** `mermaid` input:
|
||||
|
||||
|
|
@ -420,7 +420,7 @@ classDiagram
|
|||
Class08 <--> C2: Cool label
|
||||
{{< /mermaid >}}
|
||||
|
||||
### State Diagram {#state-diagram}
|
||||
### 5.5 State Diagram {#state-diagram}
|
||||
|
||||
Example **state diagram** `mermaid` input:
|
||||
|
||||
|
|
@ -448,7 +448,7 @@ stateDiagram
|
|||
Crash --> [*]
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Git Graph {#git-graph}
|
||||
### 5.6 Git Graph {#git-graph}
|
||||
|
||||
Example **git graph** `mermaid` input:
|
||||
|
||||
|
|
@ -494,7 +494,7 @@ end
|
|||
merge newbranch
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Pie {#pie}
|
||||
### 5.7 Pie {#pie}
|
||||
|
||||
Example **pie** `mermaid` input:
|
||||
|
||||
|
|
@ -516,7 +516,7 @@ pie
|
|||
"Rats" : 15
|
||||
{{< /mermaid >}}
|
||||
|
||||
## echarts
|
||||
## 6 echarts
|
||||
|
||||
[ECharts](https://echarts.apache.org/) is a library helping you to generate interactive data visualization.
|
||||
|
||||
|
|
@ -904,7 +904,7 @@ The `echarts` shortcode has also the following named parameters:
|
|||
|
||||
{{< version 0.2.0 >}} Height of the data visualization, default value is `30rem`.
|
||||
|
||||
## mapbox
|
||||
## 7 mapbox
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
|
|
@ -960,13 +960,21 @@ The `mapbox` shortcode has the following named parameters to use Mapbox GL JS:
|
|||
|
||||
Height of the map, default value is `20rem`.
|
||||
|
||||
Example `mapbox` input:
|
||||
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" */>}}
|
||||
|
|
@ -974,17 +982,15 @@ Or
|
|||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mapbox 121.485 31.233 12 >}}
|
||||
|
||||
{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4?optimize=true" "mapbox://styles/mapbox/navigation-preview-night-v4?optimize=true" >}}
|
||||
|
||||
## music
|
||||
## 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.
|
||||
|
||||
### Custom Music URL {#custom-music-url}
|
||||
### 8.1 Custom Music URL {#custom-music-url}
|
||||
|
||||
The `music` shortcode has the following named parameters by custom music URL:
|
||||
|
||||
|
|
@ -1007,14 +1013,14 @@ The `music` shortcode has the following named parameters by custom music URL:
|
|||
Example `music` input by custom music URL:
|
||||
|
||||
```markdown
|
||||
{{</* music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" */>}}
|
||||
{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}}
|
||||
{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" >}}
|
||||
|
||||
### Music Platform URL Automatic Identification {#automatic-identification}
|
||||
### 8.2 Music Platform URL Automatic Identification {#automatic-identification}
|
||||
|
||||
The `music` shortcode has one named parameter by music platform URL automatic identification:
|
||||
|
||||
|
|
@ -1035,7 +1041,7 @@ The rendered output looks like this:
|
|||
|
||||
{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
|
||||
|
||||
### Custom Server, Type and ID {#custom-server}
|
||||
### 8.3 Custom Server, Type and ID {#custom-server}
|
||||
|
||||
The `music` shortcode has the following named parameters by custom music platform:
|
||||
|
||||
|
|
@ -1067,7 +1073,7 @@ The rendered output looks like this:
|
|||
|
||||
{{< music netease song 1868553 >}}
|
||||
|
||||
### Other Parameters {#other-parameters}
|
||||
### 8.4 Other Parameters {#other-parameters}
|
||||
|
||||
The `music` shortcode has other named parameters applying to the above three ways:
|
||||
|
||||
|
|
@ -1117,7 +1123,7 @@ The `music` shortcode has the following named parameters only applying to the ty
|
|||
|
||||
Max height of the music list, default value is `340px`.
|
||||
|
||||
## bilibili
|
||||
## 9 bilibili
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
|
|
@ -1160,13 +1166,13 @@ The rendered output looks like this:
|
|||
|
||||
{{< bilibili id=BV1TJ411C7An p=3 >}}
|
||||
|
||||
## typeit
|
||||
## 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.
|
||||
|
||||
### Simple Content {#simple-content}
|
||||
### 10.1 Simple Content {#simple-content}
|
||||
|
||||
Simple content is allowed in `Markdown` format and **without** rich block content such as images and more...
|
||||
|
||||
|
|
@ -1200,7 +1206,7 @@ The rendered output looks like this:
|
|||
This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
|
||||
{{< /typeit >}}
|
||||
|
||||
### Code Content {#code-content}
|
||||
### 10.2 Code Content {#code-content}
|
||||
|
||||
Code content is allowed and will be highlighted by named parameter `code` for the type of code language.
|
||||
|
||||
|
|
@ -1226,7 +1232,7 @@ public class HelloWorld {
|
|||
}
|
||||
{{< /typeit >}}
|
||||
|
||||
### Group Content {#group-content}
|
||||
### 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.
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ 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 >}}
|
||||
|
||||
## style
|
||||
## 1 style
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ The rendered output looks like this:
|
|||
This is a **right-aligned** paragraph.
|
||||
{{< /style >}}
|
||||
|
||||
## link
|
||||
## 2 link
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
|
|
@ -117,7 +117,7 @@ The rendered output looks like this (hover over the link, there should be a tool
|
|||
|
||||
{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
|
||||
|
||||
## image
|
||||
## 3 image
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
|
|
@ -187,7 +187,7 @@ The rendered output looks like this:
|
|||
|
||||
{{< image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" >}}
|
||||
|
||||
## admonition
|
||||
## 4 admonition
|
||||
|
||||
The `admonition` shortcode supports **12** types of banners to help you put notice in your page.
|
||||
|
||||
|
|
@ -273,13 +273,13 @@ The rendered output looks like this:
|
|||
A **tip** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
## mermaid
|
||||
## 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.
|
||||
|
||||
### Flowchart {#flowchart}
|
||||
### 5.1 Flowchart {#flowchart}
|
||||
|
||||
Example **flowchart** `mermaid` input:
|
||||
|
||||
|
|
@ -303,7 +303,7 @@ graph LR;
|
|||
C -->|Two| E[Result two]
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Sequence Diagram {#sequence-diagram}
|
||||
### 5.2 Sequence Diagram {#sequence-diagram}
|
||||
|
||||
Example **sequence diagram** `mermaid` input:
|
||||
|
||||
|
|
@ -339,7 +339,7 @@ sequenceDiagram
|
|||
Bob-->John: Jolly good!
|
||||
{{< /mermaid >}}
|
||||
|
||||
### GANTT {#gantt}
|
||||
### 5.3 GANTT {#gantt}
|
||||
|
||||
Example **GANTT** `mermaid` input:
|
||||
|
||||
|
|
@ -383,7 +383,7 @@ gantt
|
|||
Add to mermaid :1d
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Class Diagram {#class-diagram}
|
||||
### 5.4 Class Diagram {#class-diagram}
|
||||
|
||||
Example **class diagram** `mermaid` input:
|
||||
|
||||
|
|
@ -425,7 +425,7 @@ classDiagram
|
|||
Class08 <--> C2: Cool label
|
||||
{{< /mermaid >}}
|
||||
|
||||
### State Diagram {#state-diagram}
|
||||
### 5.5 State Diagram {#state-diagram}
|
||||
|
||||
Example **state diagram** `mermaid` input:
|
||||
|
||||
|
|
@ -453,7 +453,7 @@ stateDiagram
|
|||
Crash --> [*]
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Git Graph {#git-graph}
|
||||
### 5.6 Git Graph {#git-graph}
|
||||
|
||||
Example **git graph** `mermaid` input:
|
||||
|
||||
|
|
@ -499,7 +499,7 @@ end
|
|||
merge newbranch
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Pie {#pie}
|
||||
### 5.7 Pie {#pie}
|
||||
|
||||
Example **pie** `mermaid` input:
|
||||
|
||||
|
|
@ -521,7 +521,7 @@ pie
|
|||
"Rats" : 15
|
||||
{{< /mermaid >}}
|
||||
|
||||
## echarts
|
||||
## 6 echarts
|
||||
|
||||
[ECharts](https://echarts.apache.org/) is a library helping you to generate interactive data visualization.
|
||||
|
||||
|
|
@ -909,7 +909,7 @@ The `echarts` shortcode has also the following named parameters:
|
|||
|
||||
{{< version 0.2.0 >}} Height of the data visualization, default value is `30rem`.
|
||||
|
||||
## mapbox
|
||||
## 7 mapbox
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
|
|
@ -965,13 +965,21 @@ The `mapbox` shortcode has the following named parameters to use Mapbox GL JS:
|
|||
|
||||
Height of the map, default value is `20rem`.
|
||||
|
||||
Example `mapbox` input:
|
||||
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" */>}}
|
||||
|
|
@ -979,17 +987,15 @@ Or
|
|||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mapbox 121.485 31.233 12 >}}
|
||||
|
||||
{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4?optimize=true" "mapbox://styles/mapbox/navigation-preview-night-v4?optimize=true" >}}
|
||||
|
||||
## music
|
||||
## 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.
|
||||
|
||||
### Custom Music URL {#custom-music-url}
|
||||
### 8.1 Custom Music URL {#custom-music-url}
|
||||
|
||||
The `music` shortcode has the following named parameters by custom music URL:
|
||||
|
||||
|
|
@ -1012,14 +1018,14 @@ The `music` shortcode has the following named parameters by custom music URL:
|
|||
Example `music` input by custom music URL:
|
||||
|
||||
```markdown
|
||||
{{</* music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" */>}}
|
||||
{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}}
|
||||
{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" >}}
|
||||
|
||||
### Music Platform URL Automatic Identification {#automatic-identification}
|
||||
### 8.2 Music Platform URL Automatic Identification {#automatic-identification}
|
||||
|
||||
The `music` shortcode has one named parameter by music platform URL automatic identification:
|
||||
|
||||
|
|
@ -1040,7 +1046,7 @@ The rendered output looks like this:
|
|||
|
||||
{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
|
||||
|
||||
### Custom Server, Type and ID {#custom-server}
|
||||
### 8.3 Custom Server, Type and ID {#custom-server}
|
||||
|
||||
The `music` shortcode has the following named parameters by custom music platform:
|
||||
|
||||
|
|
@ -1072,7 +1078,7 @@ The rendered output looks like this:
|
|||
|
||||
{{< music netease song 1868553 >}}
|
||||
|
||||
### Other Parameters {#other-parameters}
|
||||
### 8.4 Other Parameters {#other-parameters}
|
||||
|
||||
The `music` shortcode has other named parameters applying to the above three ways:
|
||||
|
||||
|
|
@ -1122,7 +1128,7 @@ The `music` shortcode has the following named parameters only applying to the ty
|
|||
|
||||
Max height of the music list, default value is `340px`.
|
||||
|
||||
## bilibili
|
||||
## 9 bilibili
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
|
|
@ -1165,13 +1171,13 @@ The rendered output looks like this:
|
|||
|
||||
{{< bilibili id=BV1TJ411C7An p=3 >}}
|
||||
|
||||
## typeit
|
||||
## 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.
|
||||
|
||||
### Simple Content {#simple-content}
|
||||
### 10.1 Simple Content {#simple-content}
|
||||
|
||||
Simple content is allowed in `Markdown` format and **without** rich block content such as images and more...
|
||||
|
||||
|
|
@ -1205,7 +1211,7 @@ The rendered output looks like this:
|
|||
This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
|
||||
{{< /typeit >}}
|
||||
|
||||
### Code Content {#code-content}
|
||||
### 10.2 Code Content {#code-content}
|
||||
|
||||
Code content is allowed and will be highlighted by named parameter `code` for the type of code language.
|
||||
|
||||
|
|
@ -1231,7 +1237,7 @@ public class HelloWorld {
|
|||
}
|
||||
{{< /typeit >}}
|
||||
|
||||
### Group Content {#group-content}
|
||||
### 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.
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ mapbox:
|
|||
|
||||
<!--more-->
|
||||
|
||||
## style
|
||||
## 1 style
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
|
|
@ -50,7 +50,7 @@ This is a **right-aligned** paragraph.
|
|||
This is a **right-aligned** paragraph.
|
||||
{{< /style >}}
|
||||
|
||||
## link
|
||||
## 2 link
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
|
|
@ -115,7 +115,7 @@ This is a **right-aligned** paragraph.
|
|||
|
||||
{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
|
||||
|
||||
## image
|
||||
## 3 image
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
|
|
@ -185,7 +185,7 @@ This is a **right-aligned** paragraph.
|
|||
|
||||
{{< image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" >}}
|
||||
|
||||
## admonition
|
||||
## 4 admonition
|
||||
|
||||
`admonition` shortcode 支持 **12** 种 帮助你在页面中插入提示的横幅.
|
||||
|
||||
|
|
@ -271,13 +271,13 @@ This is a **right-aligned** paragraph.
|
|||
一个 **技巧** 横幅
|
||||
{{< /admonition >}}
|
||||
|
||||
## mermaid
|
||||
## 5 mermaid
|
||||
|
||||
[mermaid](https://mermaidjs.github.io/) 是一个可以帮助你在文章中生成图表和流程图的库, 类似 Markdown 的语法.
|
||||
|
||||
只需将你的 mermaid 代码插入 `mermaid` shortcode 中即可.
|
||||
|
||||
### 流程图 {#flowchart}
|
||||
### 5.1 流程图 {#flowchart}
|
||||
|
||||
一个 **流程图** `mermaid` 示例:
|
||||
|
||||
|
|
@ -301,7 +301,7 @@ graph LR;
|
|||
C -->|Two| E[Result two]
|
||||
{{< /mermaid >}}
|
||||
|
||||
### 时序图 {#sequence-diagram}
|
||||
### 5.2 时序图 {#sequence-diagram}
|
||||
|
||||
一个 **时序图** `mermaid` 示例:
|
||||
|
||||
|
|
@ -337,7 +337,7 @@ sequenceDiagram
|
|||
Bob-->John: Jolly good!
|
||||
{{< /mermaid >}}
|
||||
|
||||
### 甘特图 {#gantt}
|
||||
### 5.3 甘特图 {#gantt}
|
||||
|
||||
一个 **甘特图** `mermaid` 示例:
|
||||
|
||||
|
|
@ -381,7 +381,7 @@ gantt
|
|||
Add to mermaid :1d
|
||||
{{< /mermaid >}}
|
||||
|
||||
### 类图 {#class-diagram}
|
||||
### 5.4 类图 {#class-diagram}
|
||||
|
||||
一个 **类图** `mermaid` 示例:
|
||||
|
||||
|
|
@ -423,7 +423,7 @@ classDiagram
|
|||
Class08 <--> C2: Cool label
|
||||
{{< /mermaid >}}
|
||||
|
||||
### 状态图 {#state-diagram}
|
||||
### 5.5 状态图 {#state-diagram}
|
||||
|
||||
一个 **状态图** `mermaid` 示例:
|
||||
|
||||
|
|
@ -451,7 +451,7 @@ stateDiagram
|
|||
Crash --> [*]
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Git 图 {#git-graph}
|
||||
### 5.6 Git 图 {#git-graph}
|
||||
|
||||
一个 **Git 图** `mermaid` 示例:
|
||||
|
||||
|
|
@ -497,7 +497,7 @@ end
|
|||
merge newbranch
|
||||
{{< /mermaid >}}
|
||||
|
||||
### 饼图 {#pie}
|
||||
### 5.7 饼图 {#pie}
|
||||
|
||||
一个 **饼图** `mermaid` 示例:
|
||||
|
||||
|
|
@ -519,7 +519,7 @@ pie
|
|||
"Rats" : 15
|
||||
{{< /mermaid >}}
|
||||
|
||||
## echarts
|
||||
## 6 echarts
|
||||
|
||||
[ECharts](https://echarts.apache.org/) 是一个帮助你生成交互式数据可视化的库.
|
||||
|
||||
|
|
@ -907,7 +907,7 @@ data = [
|
|||
|
||||
{{< version 0.2.0 >}} 数据可视化的高度, 默认值是 `30rem`.
|
||||
|
||||
## mapbox
|
||||
## 7 mapbox
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
|
|
@ -963,13 +963,21 @@ data = [
|
|||
|
||||
地图的高度, 默认值是 `20rem`.
|
||||
|
||||
一个 `mapbox` 示例:
|
||||
一个简单的 `mapbox` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* mapbox 121.485 31.233 12 */>}}
|
||||
或者
|
||||
{{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< mapbox 121.485 31.233 12 >}}
|
||||
|
||||
一个带有自定义样式的 `mapbox` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1" */>}}
|
||||
或者
|
||||
{{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/streets-zh-v1" */>}}
|
||||
|
|
@ -977,17 +985,15 @@ data = [
|
|||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< mapbox 121.485 31.233 12 >}}
|
||||
|
||||
{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1?optimize=true" >}}
|
||||
|
||||
## music
|
||||
## 8 music
|
||||
|
||||
`music` shortcode 基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 提供了一个内嵌的响应式音乐播放器.
|
||||
|
||||
有三种方式使用 `music` shortcode.
|
||||
|
||||
### 自定义音乐 URL {#custom-music-url}
|
||||
### 8.1 自定义音乐 URL {#custom-music-url}
|
||||
|
||||
`music` shortcode 有以下命名参数来使用自定义音乐 URL:
|
||||
|
||||
|
|
@ -1010,14 +1016,14 @@ data = [
|
|||
一个使用自定义音乐 URL 的 `music` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" */>}}
|
||||
{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}}
|
||||
{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" >}}
|
||||
|
||||
### 音乐平台 URL 的自动识别 {#automatic-identification}
|
||||
### 8.2 音乐平台 URL 的自动识别 {#automatic-identification}
|
||||
|
||||
`music` shortcode 有一个命名参数来使用音乐平台 URL 的自动识别:
|
||||
|
||||
|
|
@ -1037,7 +1043,7 @@ data = [
|
|||
|
||||
{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
|
||||
|
||||
### 自定义音乐平台, 类型和 ID {#custom-server}
|
||||
### 8.3 自定义音乐平台, 类型和 ID {#custom-server}
|
||||
|
||||
`music` shortcode 有以下命名参数来使用自定义音乐平台:
|
||||
|
||||
|
|
@ -1069,7 +1075,7 @@ data = [
|
|||
|
||||
{{< music netease song 1868553 >}}
|
||||
|
||||
### 其它参数 {#other-parameters}
|
||||
### 8.4 其它参数 {#other-parameters}
|
||||
|
||||
`music` shortcode 有一些可以应用于以上三种方式的其它命名参数:
|
||||
|
||||
|
|
@ -1119,7 +1125,7 @@ data = [
|
|||
|
||||
音乐列表的最大高度, 默认值是 `340px`.
|
||||
|
||||
## bilibili
|
||||
## 9 bilibili
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
|
|
@ -1161,13 +1167,13 @@ https://www.bilibili.com/video/BV1TJ411C7An?p=3
|
|||
|
||||
{{< bilibili id=BV1TJ411C7An p=3 >}}
|
||||
|
||||
## typeit
|
||||
## 10 typeit
|
||||
|
||||
`typeit` shortcode 基于 [TypeIt](https://typeitjs.com/) 提供了打字动画.
|
||||
|
||||
只需将你需要打字动画的内容插入 `typeit` shortcode 中即可.
|
||||
|
||||
### 简单内容 {#simple-content}
|
||||
### 10.1 简单内容 {#simple-content}
|
||||
|
||||
允许使用 `Markdown` 格式的简单内容, 并且 **不包含** 富文本的块内容, 例如图像等等...
|
||||
|
||||
|
|
@ -1201,7 +1207,7 @@ https://www.bilibili.com/video/BV1TJ411C7An?p=3
|
|||
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*...
|
||||
{{< /typeit >}}
|
||||
|
||||
### 代码内容 {#code-content}
|
||||
### 10.2 代码内容 {#code-content}
|
||||
|
||||
代码内容也是允许的, 并且通过使用参数 `code` 指定语言类型可以实习语法高亮.
|
||||
|
||||
|
|
@ -1227,7 +1233,7 @@ public class HelloWorld {
|
|||
}
|
||||
{{< /typeit >}}
|
||||
|
||||
### 分组内容 {#code-content}
|
||||
### 10.3 分组内容 {#code-content}
|
||||
|
||||
默认情况下, 所有打字动画都是同时开始的.
|
||||
但是有时你可能需要按顺序开始一组 `typeit` 内容的打字动画.
|
||||
|
|
|
|||
Binary file not shown.
|
After 
(image error) Size: 97 KiB |
BIN
exampleSite/static/music/Wavelength.mp3
Normal file
BIN
exampleSite/static/music/Wavelength.mp3
Normal file
Binary file not shown.
Loading…
Add table
Reference in a new issue