Theme Documentation - Extended Shortcodes
LoveIt theme provides multiple shortcodes on top of built-in ones in Hugo.
1 style
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:
|
|
The rendered output looks like this:
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 HTMLa
tag, which will be shown when hovering on the link. -
class [optional]
class
attribute of the HTMLa
tag. -
rel [optional]
Additional
rel
attributes of the HTMLa
tag.
Example link
input:
|
|
The rendered output looks like this:
Example link
input with a title:
|
|
The rendered output looks like this (hover over the link, there should be a tooltip):
Upstage3 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 HTMLfigure
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 HTMLa
tag, if linked parameter is set totrue
.
Example image
input:
|
|
The rendered output looks like this:
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.
The admonition
shortcode has the following named parameters:
-
type [optional] (first positional parameter)
Type of the
admonition
banner, default value isnote
. -
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:
|
|
The rendered output looks like this:
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:
|
|
The rendered output looks like this:
graph LR; A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two]graph LR; A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two]
5.2 Sequence Diagram
Example sequence diagram mermaid
input:
|
|
The rendered output looks like this:
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 thoughtssequenceDiagram 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!
prevail... John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good!
5.3 GANTT
Example GANTT mermaid
input:
|
|
The rendered output looks like this:
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 :1dgantt 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
5.4 Class Diagram
Example class diagram mermaid
input:
|
|
The rendered output looks like this:
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 labelclassDiagram 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
5.5 State Diagram
Example state diagram mermaid
input:
|
|
The rendered output looks like this:
stateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]stateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
5.6 Git Graph
Example git graph mermaid
input:
|
|
The rendered output looks like this:
gitGraph: options { "nodeSpacing": 100, "nodeRadius": 10 } end commit branch newbranch checkout newbranch commit commit checkout master commit commit merge newbranchgitGraph: options { "nodeSpacing": 100, "nodeRadius": 10 } end commit branch newbranch checkout newbranch commit commit checkout master commit commit merge newbranch
5.7 Pie
Example pie mermaid
input:
|
|
The rendered output looks like this:
pie "Dogs" : 386 "Cats" : 85 "Rats" : 15pie "Dogs" : 386 "Cats" : 85 "Rats" : 15
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:
|
|
The same in YAML
format:
|
|
The same in TOML
format:
|
|
The rendered output looks like this:
{"grid":{"bottom":"5%","containLabel":true,"left":"5%","right":"5%","top":"20%"},"legend":{"data":["Email Marketing","Affiliate Advertising","Video Advertising","Direct View","Search Engine"],"top":"10%"},"series":[{"data":[120,132,101,134,90,230,210],"name":"Email Marketing","stack":"Total","type":"line"},{"data":[220,182,191,234,290,330,310],"name":"Affiliate Advertising","stack":"Total","type":"line"},{"data":[150,232,201,154,190,330,410],"name":"Video Advertising","stack":"Total","type":"line"},{"data":[320,332,301,334,390,330,320],"name":"Direct View","stack":"Total","type":"line"},{"data":[820,932,901,934,1290,1330,1320],"name":"Search Engine","stack":"Total","type":"line"}],"title":{"left":"center","text":"Summary Line Chart","top":"2%"},"toolbox":{"feature":{"saveAsImage":{"title":"Save as Image"}}},"tooltip":{"trigger":"axis"},"xAxis":{"boundaryGap":false,"data":["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],"type":"category"},"yAxis":{"type":"value"}}The echarts
shortcode has also the following named parameters:
-
width [optional] (first positional parameter)
-
height [optional] (second positional parameter)
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:
|
|
The rendered output looks like this:
Example mapbox
input with the custom style:
|
|
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:
|
|
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
andxiami
music platform.
Example music
input by music platform URL automatic identification:
|
|
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:
|
|
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]
-
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.:
|
|
Example bilibili
input:
|
|
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.:
|
|
Example bilibili
input with p
:
|
|
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:
|
|
The rendered output looks like this:
This is a paragraph with typing animation based on TypeIt…
Alternatively, you can use custom HTML tags.
Example typeit
input with h4
tag:
|
|
The rendered output looks like this:
This is a paragraph with typing animation based on TypeIt…
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
:
|
|
The rendered output looks like this:
public class HelloWorld { public static void main(String []args) { System.out.println("Hello World"); } }
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
:
|
|
The rendered output looks like this:
First this paragraph begins
Then this paragraph begins
11 script
script
is a shortcode to insert custom Javascript in your post.
Example script
input:
|
|
You can see the output in the console of the developer tool.