Theme Documentation - Extended Shortcodes

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

1 style

FixIt 0.2.0 | CHANGED
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
2
3
{{< style "text-align:right; strong{color:#00b1ff;}" >}}
This is a **right-aligned** paragraph.
{{< /style >}}

The rendered output looks like this:

This is a right-aligned paragraph.
FixIt 0.2.0 | NEW

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

FixIt 0.2.10 | NEW 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) FixIt 0.2.12 | NEW

    是否显示为卡片式链接,默认值 false

  • download [optional] FixIt 0.2.12 | NEW

    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] FixIt 0.2.14 | NEW

    whether to add external Icon for external links automatically

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:

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

Upstage

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:

FixIt Theme https://github.com/hugo-fixit/FixIt

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:

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

3 image

FixIt 0.2.0 | CHANGED

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

FixIt 0.2.10 | NEW 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. (markdown support) FixIt 0.2.14 | CHANGED

  • open [optional] (third positional parameter) FixIt 0.2.0 | CHANGED

    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:

This is a tip
A tip banner

5 mermaid

The mermaid shortcode supports diagrams in Hugo with Mermaid library.

The full documentation is provided in Extended Shortcode - mermaid.

6 echarts

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

The full documentation is provided in Extended Shortcode - echarts.

7 mapbox

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

The full documentation is provided in Extended Shortcode - mapbox.

8 music

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

The full documentation is provided in Extended Shortcode - music.

9 bilibili

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

The full documentation is provided in Extended Shortcode - bilibili.

10 typeit

The typeit shortcode provides typing animation based on TypeIt.

The full documentation is provided in Extended Shortcode - typeit.

11 script

FixIt 0.2.8 | NEW

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
2
3
{{< script >}}
console.log('Hello FixIt!');
{{< /script >}}

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

12 details

FixIt 0.2.13 | NEW FixIt 0.2.14 | CHANGED

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:

Copyright 2022. All pages and graphics on this web site are the property of FixIt.

13 center-quote

FixIt 0.2.13 | NEW FixIt 0.2.14 | CHANGED

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.

14 fixit-encryptor

FixIt 0.2.15 | NEW

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

The full documentation is provided in Theme Documentation - Content Encryption.


Thanks
Thanks to the original author Dillon for preparing and revising the content before version v0.2.10 in this documentation.