blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-09-03 04:02:40 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
e622dc3cf43b302f5e3cec92c8debdcdf3f49486
FixIt/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md
T

12 KiB
Raw Blame History

weight, title, date, draft, author, authorLink, description, resources, tags, categories, lightgallery, menu
weight title date draft author authorLink description resources tags categories lightgallery menu
4 Theme Documentation - Extended Shortcodes 2021-12-19T16:15:22+08:00 false Lruihao https://lruihao.cn FixIt theme provides multiple shortcodes on top of built-in ones in Hugo.
name src
featured-image featured-image.jpg
name src
featured-image-preview featured-image-preview.jpg
shortcodes
documentation
true
main
name title parent pre
Extended Shortcodes FixIt theme provides multiple shortcodes on top of built-in ones in Hugo. documentation <i class='fa-brands fa-readme fa-fw fa-sm'></i>

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

1 style

{{< version 0.2.0 changed >}}

{{< admonition >}} Hugo extended version is necessary for style shortcode. {{< /admonition >}}

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 :(fa-brands fa-sass fa-fw): 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:

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

The rendered output looks like this:

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

2 link

{{< version 0.2.0 >}}

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

{{< version 0.2.10 >}} 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) {{< version 0.2.12 >}}

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

  • download [optional] {{< version 0.2.12 >}}

    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] {{< version 0.2.14 >}}

    whether to add external Icon for external links automatically

Example link input:

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

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

{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}

Example link input for card type:

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

The rendered output looks like this:

{{< link "https://github.com/Lruihao/FixIt" "FixIt Theme" "source of FixIt Theme" true >}}

Example link input with download attribute:

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

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

3 image

{{< version 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.

{{< version 0.2.10 >}} 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:

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

{{< image src="/images/lighthouse.jpg" caption="Lighthouse (image)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" >}}

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.

{{< admonition >}} A note banner {{< /admonition >}}

{{< admonition abstract >}} An abstract banner {{< /admonition >}}

{{< admonition info >}} A info banner {{< /admonition >}}

{{< admonition tip >}} A tip banner {{< /admonition >}}

{{< admonition success >}} A success banner {{< /admonition >}}

{{< admonition question >}} A question banner {{< /admonition >}}

{{< admonition warning >}} A warning banner {{< /admonition >}}

{{< admonition failure >}} A failure banner {{< /admonition >}}

{{< admonition danger >}} A danger banner {{< /admonition >}}

{{< admonition bug >}} A bug banner {{< /admonition >}}

{{< admonition example >}} An example banner {{< /admonition >}}

{{< admonition quote >}} A quote banner {{< /admonition >}}

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) {{< version 0.2.14 changed >}}

  • open [optional] (third positional parameter) {{< version 0.2.0 changed >}}

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

Example admonition input:

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

{{< admonition tip "This is a tip" false >}} A tip banner {{< /admonition >}}

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

{{< version 0.2.8 >}}

script is a shortcode to insert custom :(fa-brands fa-js fa-fw): Javascript in your post.

{{< admonition >}} 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. {{< /admonition >}}

Example script input:

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

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

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

12 details

{{< version 0.2.13 >}} {{< version 0.2.14 changed >}}

details is a shortcode to insert :(fa-brands fa-html5 fa-fw): 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:

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

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

13 center-quote

{{< version 0.2.13 >}} {{< version 0.2.14 changed >}}

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

Example center-quote input:

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

The rendered output looks like this:

{{% center-quote %}} hello world
this is a center-quote shortcode example. {{% /center-quote %}}

14 fixit-encryptor

{{< version 0.2.15 >}}

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

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

{{< admonition quote "Thanks" >}} Thanks to the original author Dillon for preparing and revising the content before version v0.2.10 in this documentation. {{< /admonition >}}

Reference in New Issue View Git Blame Copy Permalink