Theme Documentation - Shortcodes
Contents
Contents
LoveIt theme provides multiple shortcodes on top of built-in ones in Hugo.
Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
To avoid this limitations, Hugo created shortcodes . A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown’s design philosophy.
Hugo’s Built-in Shortcodes
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
Example figure
Input:
|
|
The rendered output looks like this:
The HTML looks like this:
|
|
gist
Example gist
Input:
|
|
The rendered output looks like this:
The HTML looks like this:
|
|
highlight
Example highlight
Input:
|
|
The rendered output looks like this:
|
|
instagram
Example instagram
Input:
|
|
The rendered output looks like this:
param
Example param
Input:
|
|
The rendered output looks like this:
LoveIt theme provides multiple shortcodes on top of built-in ones in Hugo.ref
and relref
Documentation of ref
and relref
tweet
Example tweet
Input:
|
|
The rendered output looks like this:
Hugo 0.24 Released: Big archetype update + @Netlify _redirects etc. file supporthttps://t.co/X94FmYDEZJ #gohugo #golang @spf13 @bepsays
— GoHugo.io (@GoHugoIO) June 21, 2017
vimeo
Example vimeo
Input:
|
|
The rendered output looks like this:
youtube
Example youtube
Input:
|
|
The rendered output looks like this:
LoveIt Shortcodes
LoveIt provides multiple shortcodes on top of existing ones.
style
style
is a shortcode to insert custom style in your post.
The style
shortcode can use two parameters. The first is the custom style content and the second is the HTML tag around the content you want to change style, and whose default value is p
.
Example style
Input:
|
|
The rendered output looks like this:
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 image
shortcode can use the following named parameters:
-
src
URL of the image to be displayed.
-
description
Image description.
-
title
Image title.
-
class
class
attribute of the HTMLfigure
tag. -
src_s
URL of the image thumbnail, used for lightgallery.
-
src_l
URL of the HD image, used for lightgallery.
Example image
Input:
|
|
The rendered output looks like this:
admonition
The admonition
shortcode supports 12 types of banners to help you put notice in your page and Markdown
format is supported.
Note
Abstract
Info
Tip
Success
Question
Warning
Failure
Danger
Bug
Example
Quote
The admonition
shortcode can use the following named parameters:
-
type
Type of the
admonition
banner, default is note -
title
Title of the
admonition
banner, default is the type name of the banner -
details
if
true
, the content will be expandable/collapsible.
You can also use the positional parameters in the order of type, title and details.
Example admonition
Input:
|
|
The rendered output looks like this:
This is a tip
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.
Flowchart
Example flowchart mermaid
Input:
|
|
The rendered output looks like this:
Sequence Diagram
Example sequence diagram mermaid
Input:
|
|
The rendered output looks like this:
GANTT
Example GANTT mermaid
Input:
|
|
The rendered output looks like this:
Class Diagram
Example class diagram mermaid
Input:
|
|
The rendered output looks like this:
State Diagram
Example state diagram mermaid
Input:
|
|
The rendered output looks like this:
Git Graph
Example git graph mermaid
Input:
|
|
The rendered output looks like this:
Pie
Example pie mermaid
Input:
|
|
The rendered output looks like this:
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:
music
The music
shortcode embeds a responsive music player based on APlayer
and MetingJS
.
The music
shortcode can use the following named parameters:
parameter | default | description |
---|---|---|
url | require | music URL |
name | options | music name |
artist | options | music artist |
cover | options | music cover URL |
server | require | music platform: netease , tencent , kugou , xiami , baidu |
type | require | song , playlist , album , search , artist |
id | require | song id / playlist id / album id / search keyword |
auto | options | music link, support: netease , tencent , xiami |
fixed | false |
enable fixed mode |
mini | false |
enable mini mode |
autoplay | false |
audio autoplay |
theme | #a9a9b3 |
main color |
loop | all |
player loop play, values: ‘all’, ‘one’, ‘none’ |
order | list |
player play order, values: ‘list’, ‘random’ |
volume | 0.7 |
default volume, notice that player will remember user setting, default volume will not work after user set volume themselves |
mutex | true |
prevent to play multiple player at the same time, pause other players when this player start play |
list-folded | false |
indicate whether list should folded at first |
list-max-height | 340px |
list max height |
Custom Music URL
Example music
Input:
|
|
The rendered output looks like this:
Music Platform URL Automatic Identification
Example music
Input:
|
|
The rendered output looks like this:
Custom Server, Type and ID
Example music
Input:
|
|
The rendered output looks like this:
bilibili
The bilibili
shortcode embeds a responsive video player for bilibili videos.
When the video only has one part, only the av
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 av
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:
typeit
The typeit
shortcode provides typing animation based on TypeIt
.
Just insert your content in the typeit
shortcode and that’s it.
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:
Alternatively, you can use custom HTML tags.
Example typeit
Input with h4
tag:
|
|
The rendered output looks like this:
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:
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: