Theme Documentation - Extended Shortcodes

Dillon included in Documentation

2020-03-03 3012 words 15 minutes views

/posts/theme-documentation-extended-shortcodes/featured-image.jpg

LoveIt theme provides multiple shortcodes on top of built-in ones in Hugo.

1 style

Note

Hugo extended version is necessary for style shortcode.

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 SASS 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:

1{{< style "text-align:right; strong{color:#00b1ff;}" >}}
2This is a **right-aligned** paragraph.
3{{< /style >}}

The rendered output looks like this:

This is a right-aligned paragraph.

2 link

link shortcode is an alternative to Markdown link syntax. link shortcode can provide some other features and can be used in code blocks.

The complete usage of local resource references 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:

 1{{< link "https://assemble.io" >}}
 2Or
 3{{< link href="https://assemble.io" >}}
 4
 5{{< link "mailto:contact@revolunet.com" >}}
 6Or
 7{{< link href="mailto:contact@revolunet.com" >}}
 8
 9{{< link "https://assemble.io" Assemble >}}
10Or
11{{< link href="https://assemble.io" content=Assemble >}}

The rendered output looks like this:

Example link input with a title:

1{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
2Or
3{{< 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):

Upstage

3 image

image shortcode is an alternative to figure shortcode. image shortcode can take full advantage of the dependent libraries of lazysizes and lightgallery.js.

The complete usage of local resource references 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:

1{{< 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:

/images/lighthouse.jpg — Lighthouse (`image`)

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.

Note

A note banner

Abstract

An abstract banner

Info

A info banner

Tip

A tip banner

Success

A success banner

Question

A question banner

Warning

A warning banner

Failure

A failure banner

Danger

A danger banner

Bug

A bug banner

Example

An example banner

Quote

A quote banner

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:

1{{< admonition type=tip title="This is a tip" open=false >}}
2A **tip** banner
3{{< /admonition >}}
4Or
5{{< admonition tip "This is a tip" false >}}
6A **tip** banner
7{{< /admonition >}}

The rendered output looks like this:

This is a tip

A tip banner

5 mermaid

mermaid 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

Example flowchart mermaid input:

1{{< mermaid >}}
2graph LR;
3    A[Hard edge] -->|Link text| B(Round edge)
4    B --> C{Decision}
5    C -->|One| D[Result one]
6    C -->|Two| E[Result two]
7{{< /mermaid >}}

The rendered output looks like this:

5.2 Sequence Diagram

Example sequence diagram mermaid input:

 1{{< mermaid >}}
 2sequenceDiagram
 3    participant Alice
 4    participant Bob
 5    Alice->>John: Hello John, how are you?
 6    loop Healthcheck
 7        John->John: Fight against hypochondria
 8    end
 9    Note right of John: Rational thoughts <br/>prevail...
10    John-->Alice: Great!
11    John->Bob: How about you?
12    Bob-->John: Jolly good!
13{{< /mermaid >}}

The rendered output looks like this:

5.3 GANTT

Example GANTT mermaid input:

 1{{< mermaid >}}
 2gantt
 3    dateFormat  YYYY-MM-DD
 4    title Adding GANTT diagram functionality to mermaid
 5    section A section
 6    Completed task            :done,    des1, 2014-01-06,2014-01-08
 7    Active task               :active,  des2, 2014-01-09, 3d
 8    Future task               :         des3, after des2, 5d
 9    Future task2               :         des4, after des3, 5d
10    section Critical tasks
11    Completed task in the critical line :crit, done, 2014-01-06,24h
12    Implement parser and jison          :crit, done, after des1, 2d
13    Create tests for parser             :crit, active, 3d
14    Future task in critical line        :crit, 5d
15    Create tests for renderer           :2d
16    Add to mermaid                      :1d
17{{< /mermaid >}}

The rendered output looks like this:

5.4 Class Diagram

Example class diagram mermaid input:

 1{{< mermaid >}}
 2classDiagram
 3    Class01 <|-- AveryLongClass : Cool
 4    Class03 *-- Class04
 5    Class05 o-- Class06
 6    Class07 .. Class08
 7    Class09 --> C2 : Where am i?
 8    Class09 --* C3
 9    Class09 --|> Class07
10    Class07 : equals()
11    Class07 : Object[] elementData
12    Class01 : size()
13    Class01 : int chimp
14    Class01 : int gorilla
15    Class08 <--> C2: Cool label
16{{< /mermaid >}}

The rendered output looks like this:

5.5 State Diagram

Example state diagram mermaid input:

1{{< mermaid >}}
2stateDiagram
3    [*] --> Still
4    Still --> [*]
5    Still --> Moving
6    Moving --> Still
7    Moving --> Crash
8    Crash --> [*]
9{{< /mermaid >}}

The rendered output looks like this:

5.6 Git Graph

Example git graph mermaid input:

 1{{< mermaid >}}
 2gitGraph:
 3options
 4{
 5    "nodeSpacing": 100,
 6    "nodeRadius": 10
 7}
 8end
 9    commit
10    branch newbranch
11    checkout newbranch
12    commit
13    commit
14    checkout master
15    commit
16    commit
17    merge newbranch
18{{< /mermaid >}}

The rendered output looks like this:

5.7 Pie

Example pie mermaid input:

1{{< mermaid >}}
2pie
3    "Dogs" : 386
4    "Cats" : 85
5    "Rats" : 15
6{{< /mermaid >}}

The rendered output looks like this:

6 echarts

ECharts is a library helping you to generate interactive data visualization.

The basic chart types ECharts supports include line series, bar series, scatter series, pie charts, candle-stick series, boxplot series for statistics, map series, heatmap series, lines series for directional information, graph series for relationships, treemap series, sunburst series, parallel series for multi-dimensional data, funnel series, gauge series. 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:

 1{{< echarts >}}
 2{
 3  "title": {
 4    "text": "Summary Line Chart",
 5    "top": "2%",
 6    "left": "center"
 7  },
 8  "tooltip": {
 9    "trigger": "axis"
10  },
11  "legend": {
12    "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"],
13    "top": "10%"
14  },
15  "grid": {
16    "left": "5%",
17    "right": "5%",
18    "bottom": "5%",
19    "top": "20%",
20    "containLabel": true
21  },
22  "toolbox": {
23    "feature": {
24      "saveAsImage": {
25        "title": "Save as Image"
26      }
27    }
28  },
29  "xAxis": {
30    "type": "category",
31    "boundaryGap": false,
32    "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
33  },
34  "yAxis": {
35    "type": "value"
36  },
37  "series": [
38    {
39      "name": "Email Marketing",
40      "type": "line",
41      "stack": "Total",
42      "data": [120, 132, 101, 134, 90, 230, 210]
43    },
44    {
45      "name": "Affiliate Advertising",
46      "type": "line",
47      "stack": "Total",
48      "data": [220, 182, 191, 234, 290, 330, 310]
49    },
50    {
51      "name": "Video Advertising",
52      "type": "line",
53      "stack": "Total",
54      "data": [150, 232, 201, 154, 190, 330, 410]
55    },
56    {
57      "name": "Direct View",
58      "type": "line",
59      "stack": "Total",
60      "data": [320, 332, 301, 334, 390, 330, 320]
61    },
62    {
63      "name": "Search Engine",
64      "type": "line",
65      "stack": "Total",
66      "data": [820, 932, 901, 934, 1290, 1330, 1320]
67    }
68  ]
69}
70{{< /echarts >}}

The same in YAML format:

 1{{< echarts >}}
 2title:
 3    text: Summary Line Chart
 4    top: 2%
 5    left: center
 6tooltip:
 7    trigger: axis
 8legend:
 9    data:
10        - Email Marketing
11        - Affiliate Advertising
12        - Video Advertising
13        - Direct View
14        - Search Engine
15    top: 10%
16grid:
17    left: 5%
18    right: 5%
19    bottom: 5%
20    top: 20%
21    containLabel: true
22toolbox:
23    feature:
24        saveAsImage:
25            title: Save as Image
26xAxis:
27    type: category
28    boundaryGap: false
29    data:
30        - Monday
31        - Tuesday
32        - Wednesday
33        - Thursday
34        - Friday
35        - Saturday
36        - Sunday
37yAxis:
38    type: value
39series:
40    - name: Email Marketing
41      type: line
42      stack: Total
43      data:
44          - 120
45          - 132
46          - 101
47          - 134
48          - 90
49          - 230
50          - 210
51    - name: Affiliate Advertising
52      type: line
53      stack: Total
54      data:
55          - 220
56          - 182
57          - 191
58          - 234
59          - 290
60          - 330
61          - 310
62    - name: Video Advertising
63      type: line
64      stack: Total
65      data:
66          - 150
67          - 232
68          - 201
69          - 154
70          - 190
71          - 330
72          - 410
73    - name: Direct View
74      type: line
75      stack: Total
76      data:
77          - 320
78          - 332
79          - 301
80          - 334
81          - 390
82          - 330
83          - 320
84    - name: Search Engine
85      type: line
86      stack: Total
87      data:
88          - 820
89          - 932
90          - 901
91          - 934
92          - 1290
93          - 1330
94          - 1320
95{{< /echarts >}}

The same in TOML format:

  1{{< echarts >}}
  2[title]
  3text = "Summary Line Chart"
  4top = "2%"
  5left = "center"
  6
  7[tooltip]
  8trigger = "axis"
  9
 10[legend]
 11data = [
 12  "Email Marketing",
 13  "Affiliate Advertising",
 14  "Video Advertising",
 15  "Direct View",
 16  "Search Engine"
 17]
 18top = "10%"
 19
 20[grid]
 21left = "5%"
 22right = "5%"
 23bottom = "5%"
 24top = "20%"
 25containLabel = true
 26
 27[toolbox]
 28[toolbox.feature]
 29[toolbox.feature.saveAsImage]
 30title = "Save as Image"
 31
 32[xAxis]
 33type = "category"
 34boundaryGap = false
 35data = [
 36  "Monday",
 37  "Tuesday",
 38  "Wednesday",
 39  "Thursday",
 40  "Friday",
 41  "Saturday",
 42  "Sunday"
 43]
 44
 45[yAxis]
 46type = "value"
 47
 48[[series]]
 49name = "Email Marketing"
 50type = "line"
 51stack = "Total"
 52data = [
 53  120.0,
 54  132.0,
 55  101.0,
 56  134.0,
 57  90.0,
 58  230.0,
 59  210.0
 60]
 61
 62[[series]]
 63name = "Affiliate Advertising"
 64type = "line"
 65stack = "Total"
 66data = [
 67  220.0,
 68  182.0,
 69  191.0,
 70  234.0,
 71  290.0,
 72  330.0,
 73  310.0
 74]
 75
 76[[series]]
 77name = "Video Advertising"
 78type = "line"
 79stack = "Total"
 80data = [
 81  150.0,
 82  232.0,
 83  201.0,
 84  154.0,
 85  190.0,
 86  330.0,
 87  410.0
 88]
 89
 90[[series]]
 91name = "Direct View"
 92type = "line"
 93stack = "Total"
 94data = [
 95  320.0,
 96  332.0,
 97  301.0,
 98  334.0,
 99  390.0,
100  330.0,
101  320.0
102]
103
104[[series]]
105name = "Search Engine"
106type = "line"
107stack = "Total"
108data = [
109  820.0,
110  932.0,
111  901.0,
112  934.0,
113  1290.0,
114  1330.0,
115  1320.0
116]
117{{< /echarts >}}

The rendered output looks like this:

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 is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles.

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 or the site configuration.
dark-style [optional] (sixth positional parameter)

Style for the dark theme, default value is the value set in the front matter or the site configuration.
navigation [optional]

Whether to add NavigationControl, default value is the value set in the front matter or the site configuration.
geolocate [optional]

Whether to add GeolocateControl, default value is the value set in the front matter or the site configuration.
scale [optional]

Whether to add ScaleControl, default value is the value set in the front matter or the site configuration.
fullscreen [optional]

Whether to add FullscreenControl, default value is the value set in the front matter or the 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:

1{{< mapbox 121.485 31.233 12 >}}
2Or
3{{< mapbox lng=121.485 lat=31.233 zoom=12 >}}

The rendered output looks like this:

Example mapbox input with the custom style:

1{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4" "mapbox://styles/mapbox/navigation-preview-night-v4" >}}
2Or
3{{< 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:

8 music

The music shortcode embeds a responsive music player based on APlayer and MetingJS.

There are three ways to use it the music shortcode.

8.1 Custom Music URL

The complete usage of local resource references 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:

1{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}

The rendered output looks like this:

8.2 Music Platform URL 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:

1{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
2Or
3{{< music "https://music.163.com/#/playlist?id=60198" >}}

The rendered output looks like this:

8.3 Custom Server, Type and ID

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:

1{{< music server="netease" type="song" id="1868553" >}}
2Or
3{{< music netease song 1868553 >}}

The rendered output looks like this:

8.4 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.:

https://www.bilibili.com/video/BV1Sx411T7QQ

Example bilibili input:

1{{< bilibili BV1Sx411T7QQ >}}
2Or
3{{< bilibili id=BV1Sx411T7QQ >}}

The rendered output looks like this:

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.:

https://www.bilibili.com/video/BV1TJ411C7An?p=3

Example bilibili input with p:

1{{< bilibili BV1TJ411C7An 3 >}}
2Or
3{{< bilibili id=BV1TJ411C7An p=3 >}}

The rendered output looks like this:

10 typeit

The typeit shortcode provides typing animation based on TypeIt.

Just insert your content in the typeit shortcode and that’s it.

10.1 Simple Content

Simple content is allowed in Markdown format and without rich block content such as images and more…

Example typeit input:

1{{< typeit >}}
2This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
3{{< /typeit >}}

The rendered output looks like this:

Alternatively, you can use custom HTML tags.

Example typeit input with h4 tag:

1{{< typeit tag=h4 >}}
2This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
3{{< /typeit >}}

The rendered output looks like this:

10.2 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:

1{{< typeit code=java >}}
2public class HelloWorld {
3    public static void main(String []args) {
4        System.out.println("Hello World");
5    }
6}
7{{< /typeit >}}

The rendered output looks like this:

10.3 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:

1{{< typeit group=paragraph >}}
2**First** this paragraph begins
3{{< /typeit >}}
4
5{{< typeit group=paragraph >}}
6**Then** this paragraph begins
7{{< /typeit >}}

The rendered output looks like this:

11 script

script is a shortcode to insert custom Javascript in your post.

Note

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.

Example script input:

1{{< script >}}
2console.log('Hello LoveIt!');
3{{< /script >}}

You can see the output in the console of the developer tool.

Contents

Theme Documentation - Extended Shortcodes

1 style

2 link

3 image

4 admonition

5 mermaid

5.1 Flowchart

5.2 Sequence Diagram

5.3 GANTT

5.4 Class Diagram

5.5 State Diagram

5.6 Git Graph

5.7 Pie

6 echarts

7 mapbox

8 music

8.1 Custom Music URL

8.2 Music Platform URL Automatic Identification

8.3 Custom Server, Type and ID

8.4 Other Parameters

9 bilibili

10 typeit

10.1 Simple Content

10.2 Code Content

10.3 Group Content

11 script