Extended Shortcodes Overview

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

style

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
2
3

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

The rendered output looks like this:

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.

• card [optional] (fourth positional parameter)

  Whether to display as a card link, whose default value is false.

• download [optional]

  optional attribute of the HTML a tag.

• class [optional]

  class attribute of the HTML a tag.

• rel [optional]

  Additional rel attributes of the HTML a tag.

• external-icon [optional]

  Whether to automatically display the external link icon.

• noreferrer [optional]

  Whether to add noreferrer to the rel attribute, default: true.

Example link input:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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

• https://assemble.io
• mailto:contact@revolunet.com
• Assemble

Example link input with a title:

1
2
3

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

Example link input for card type:

1
2
3

{{< link "https://github.com/hugo-fixit/FixIt" "FixIt Theme" "source of FixIt Theme" true >}}
Or
{{< link href="https://github.com/hugo-fixit/FixIt" content="FixIt Theme" title="source of FixIt Theme" card=true >}}

The rendered output looks like this:

Example link input with download attribute:

1
2
3

{{< link href="/music/Wavelength.mp3" content="Wavelength.mp3" title="Download Wavelength.mp3" download="Wavelength.mp3" >}}

{{< link href="/music/Wavelength.mp3" content="Wavelength.mp3" title="Download Wavelength.mp3" download="Wavelength.mp3" card=true >}}

The rendered output looks like this:

image

image shortcode is an alternative to figure shortcode. image shortcode can take full advantage of the dependent library of lightgallery.

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.

• loading [optional]

  Additional loading attribute of the HTML a tag, optional values: eager, lazy, default value is lazy.

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:

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 is note.

• title [optional] (second positional parameter)

  Title of the admonition banner, default value is the value of type parameter. (markdown support)

• open [optional] (third positional parameter)

  Whether the content will be expandable by default, default value is true.

Example admonition input:

1
2
3
4
5
6
7

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

mermaid

The mermaid shortcode supports diagrams in Hugo with Mermaid library.

The full documentation is provided in Extended Shortcode - mermaid.

echarts

The echarts shortcode supports data visualization in Hugo with ECharts library.

The full documentation is provided in Extended Shortcode - echarts.

mapbox

The mapbox shortcode supports interactive maps in Hugo with Mapbox GL JS library.

The full documentation is provided in Extended Shortcode - mapbox.

music

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

The full documentation is provided in Extended Shortcode - music.

bilibili

The bilibili shortcode embeds a responsive video player for bilibili videos.

The full documentation is provided in Extended Shortcode - bilibili.

typeit

The typeit shortcode provides typing animation based on TypeIt.

The full documentation is provided in Extended Shortcode - typeit.

script

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

Example script input:

1
2
3

{{< script >}}
console.log('Hello FixIt!');
{{< /script >}}

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

details

details is a shortcode to insert  HTML5 tag details and summary in your post.

The details shortcode has only one parameter:

• summary [optional] (first positional parameter)

  summary of details. (markdown support)

Example details input:

1
2
3
4
5
6
7

{{< details "**Copyright** 2022." >}}
*All pages and graphics on this web site are the property of FixIt.*
{{< /details >}}
Or
{{< details summary="**Copyright** 2022." >}}
*All pages and graphics on this web site are the property of FixIt.*
{{< /details >}}

The rendered output looks like this:

center-quote

center-quote is a shortcode to insert centered text blockquote tag in your post.

Example center-quote input:

1
2
3
4

{{< center-quote >}}
**hello** *world*  
this is a center-quote shortcode example.
{{< /center-quote >}}

The rendered output looks like this:

hello world
this is a center-quote shortcode example.

fixit-encryptor

You can use fixit-encryptor shortcode to encrypt partial content.

The full documentation is provided in Content Encryption.

raw

raw is a shortcode to insert raw  HTML content in your post. This is useful when you want to include some Markdown content to avoid being rendered or escaped by Hugo.

The raw shortcode has only one parameter:

• tag [optional] (first positional parameter)

  The tag name of the wrapper HTML element, whose default value is div.

Example raw input:

1
2
3
4
5
6
7
8

{{< raw >}}Inline Formula: \(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{< /raw >}}

{{< raw >}}
Block Formula:
\[ a=b+c \\ d+e=f \]
{{< /raw >}}

Raw content using Markdown and HTML syntax: {{< raw "span" >}}**Hello** <strong>FixIt</strong>{{< /raw >}}

The rendered output looks like this:

Raw content using Markdown and HTML syntax: **Hello** FixIt

reward

The reward shortcode has the following named parameters:

• wechatpay [optional] (first positional parameter)

• alipay [optional] (second positional parameter)

• paypal [optional] (third positional parameter)

• bitcoin [optional] (fourth positional parameter)

• author [optional] (fifth positional parameter)

• comment [optional] (sixth positional parameter)

• mode [optional] (seventh positional parameter)

  display mode of QR code images, optional values: [“static”, “fixed”], default: static

Example reward input:

1

{{< reward wechatpay="/images/wechatpay.gif" alipay="/images/wechatpay.gif" comment="Buy me a coffee~" >}}

The rendered output looks like this:

Buy me a coffee~

Donate

Alipay

WeChat Pay