Extended Shortcodes Overview

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

Use these FixIt’s embedded shortcodes as needed.

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.

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:

auto-dark

auto-dark shortcode wraps content and adapts it for dark mode by inverting color/hue automatically.

Example auto-dark input:

1
2
3

{{< auto-dark >}}
<img src="/images/logo.svg" alt="logo" />
{{< /auto-dark >}}

You can paste the above snippet into your content to test the effect in your own site.

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.

• card-icon [optional] (fifth positional parameter)

  Icon of the card link, support Font Awesome class name or image URL. If not specified, try to fetch the favicon from link.

• 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 >}}
{{< link "https://lruihao.cn" "Lruihao Blog" "Lruihao Blog" true "https://lruihao.cn/images/avatar.jpg" >}}
{{< link "https://lruihao.cn" "Lruihao Blog" "Lruihao Blog" true "fa-solid fa-blog" >}}

The rendered output looks like this:

FixIt Theme github.com/hugo-fixit/FixIt Lruihao Blog lruihao.cn Lruihao Blog lruihao.cn

Example link input with download attribute:

1
2

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

Wavelength.mp3 Wavelength.mp3 /music/Wavelength.mp3

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.

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

• optimise [optional]

  Whether to optimise the image, override the site configuration.

• cacheRemote [optional]

  Whether to cache the remote image, override the site configuration.

Example image input:

1

{{< image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" >}}

The rendered output looks like this:

details

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

The details shortcode has the following named parameters:

• summary [optional] (first positional parameter)

  The content of the child summary element rendered from Markdown to HTML. Default is Details.

• open [optional] (second positional parameter)

  Whether to initially display the content of the details element. Default is false.

• class [optional] (third positional parameter)

  The value of the element’s class attribute.

• name [optional]

  The value of the element’s name attribute.

• title [optional]

  The value of the element’s title attribute.

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

The center-quote shortcode inserts a centered blockquote element into your content.

1
2

> [!center]
> This paragraph is **center-aligned**.

1
2

> This paragraph is **center-aligned**.
> {.blockquote-center}

1
2
3

{{< center-quote >}}
This paragraph is **center-aligned**.
{{< /center-quote >}}

All three approaches produce the same result:

This paragraph is center-aligned.

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

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

version

The version shortcode has the following positional parameters:

• first positional parameter [required] release tag
• second positional parameter [optional] type，optional values: [“new”, “changed”, “deleted”, “deprecated”], default: new
• third positional parameter [optional] URL prefix for the release tag, default: https://github.com/hugo-fixit/FixIt/releases/tag/v
• fourth positional parameter [optional] project name, default: FixIt

Example version input:

1
2
3
4

{{< version 0.3.15 >}}
{{< version 0.3.15 changed >}}
{{< version 0.3.15 deleted >}}
{{< version 0.3.15 deprecated >}}

The rendered output looks like this:

env

The env shortcode is used to conditionally render content based on the current Hugo environment.

In regions with restricted networks, loading YouTube, Twitter, etc. locally slows development; render them only in production and skip in dev to speed things up.

Example env input:

1
2
3
4
5
6

{{< env "development" >}}
This content is only rendered in the **development** environment.
{{< /env >}}
{{< env "production" >}}
This content is only rendered in the **production** environment.
{{< /env >}}

The rendered output looks like this:

This content is only rendered in the production environment.

admonition

The admonition shortcode allows you to add types of callout boxes to your content.

The full documentation is provided in Extended Shortcode - admonition.

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.js and MetingJS library.

The full documentation is provided in Extended Shortcode - music.

aplayer and audio

If you need more advanced controls (custom playlist, mini mode, custom audio type…) over the music player, you can use the aplayer shortcode along with the audio shortcode to reach full power of APlayer.js.

The full documentation is provided in Extended Shortcode - aplayer.

spotify

The spotify shortcode embeds a responsive music player for Spotify music.

The full documentation is provided in Extended Shortcode - spotify.

bilibili

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

The full documentation is provided in Extended Shortcode - bilibili.

douyin

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

The full documentation is provided in Extended Shortcode - douyin.

typeit

The typeit shortcode provides typing animation based on TypeIt.

The full documentation is provided in Extended Shortcode - typeit.

timeline

The timeline shortcode allows you to create a timeline.

The full documentation is provided in Extended Shortcode - timeline.

fixit-encryptor

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

The full documentation is provided in Content Encryption.

bluesky

The bluesky shortcode embeds a post from Bluesky.

The full documentation is provided in Extended Shortcode - bluesky.

gist

The gist shortcode embeds a GitHub Gist in your content.

The full documentation is provided in Extended Shortcode - gist.

tabs and tab

The tabs and tab shortcodes allow you to create tabbed content with various styles and layouts.

The full documentation is provided in Extended Shortcode - tabs.

file-tree

The file-tree shortcode is used to render an interactive file tree structure.

The full documentation is provided in Extended Shortcode - File Tree.