Theme Documentation - Extended Shortcodes

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

1 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 the 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:

2 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, the 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.

• class [optional]

  class attribute of the HTML a tag.

• rel [optional]

  Additional rel attributes of the HTML a tag.

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:

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

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

3 image

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

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, the default value is the value of the 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, the default value is true.

• rel [optional]

  Additional rel attributes of the HTML a tag, if linked parameter is set to true.

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

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

The rendered output looks like this:

4 admonition

The admonition shortcode supports 12 types of banners to help you put a notice on 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, the default value is note.

• title [optional] (second positional parameter)

  Title of the admonition banner, the default value is the value of the type parameter.

• open [optional] (third positional parameter)

  Whether the content will be expandable by default, the 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:

5 mermaid

mermaid is a library helping you to generate diagrams and flowcharts from text, in a similar manner as Markdown.

Just insert your mermaid code in the mermaid shortcode and that’s it.

5.1 Flowchart

Example flowchart mermaid input:

{{< mermaid >}}graph LR;
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
{{< /mermaid >}}

The rendered output looks like this:

graph LR;
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

5.2 Sequence Diagram

Example sequence diagram mermaid input:

{{< mermaid >}}sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
{{< /mermaid >}}

The rendered output looks like this:

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!

5.3 GANTT

Example GANTT mermaid input:

{{< mermaid >}}gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid
    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2               :         des4, after des3, 5d
    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
{{< /mermaid >}}

The rendered output looks like this:

gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid
    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2               :         des4, after des3, 5d
    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d

5.4 Class Diagram

Example class diagram mermaid input:

{{< mermaid >}}classDiagram
    Class01 <|-- AveryLongClass : Cool
    Class03 *-- Class04
    Class05 o-- Class06
    Class07 .. Class08
    Class09 --> C2 : Where am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    Class08 <--> C2: Cool label
{{< /mermaid >}}

The rendered output looks like this:

classDiagram
    Class01 <|-- AveryLongClass : Cool
    Class03 *-- Class04
    Class05 o-- Class06
    Class07 .. Class08
    Class09 --> C2 : Where am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    Class08 <--> C2: Cool label

5.5 State Diagram

Example state diagram mermaid input:

{{< mermaid >}}stateDiagram
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
{{< /mermaid >}}

The rendered output looks like this:

stateDiagram
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

5.6 Git Graph

Example git graph mermaid input:

{{< mermaid >}}gitGraph
    commit
    branch hotfix
    checkout hotfix
    commit
    branch develop
    checkout develop
    commit id:"ash" tag:"abc"
    branch featureB
    checkout featureB
    commit type:HIGHLIGHT
    checkout main
    checkout hotfix
    commit type:NORMAL
    checkout develop
    commit type:REVERSE
    checkout featureB
    commit
    checkout main
    merge hotfix
    checkout featureB
    commit
    checkout develop
    branch featureA
    commit
    checkout develop
    merge hotfix
    checkout featureA
    commit
    checkout featureB
    commit
    checkout develop
    merge featureA
    branch release
    checkout release
    commit
    checkout main
    commit
    checkout release
    merge main
    checkout develop
    merge release
{{< /mermaid >}}

The rendered output looks like this:

gitGraph
    commit
    branch hotfix
    checkout hotfix
    commit
    branch develop
    checkout develop
    commit id:"ash" tag:"abc"
    branch featureB
    checkout featureB
    commit type:HIGHLIGHT
    checkout main
    checkout hotfix
    commit type:NORMAL
    checkout develop
    commit type:REVERSE
    checkout featureB
    commit
    checkout main
    merge hotfix
    checkout featureB
    commit
    checkout develop
    branch featureA
    commit
    checkout develop
    merge hotfix
    checkout featureA
    commit
    checkout featureB
    commit
    checkout develop
    merge featureA
    branch release
    checkout release
    commit
    checkout main
    commit
    checkout release
    merge main
    checkout develop
    merge release

5.7 Pie

Example pie mermaid input:

{{< mermaid >}}pie
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
{{< /mermaid >}}

The rendered output looks like this:

pie
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

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

{{< echarts >}}
{
  "title": {
    "text": "Summary Line Chart",
    "top": "2%",
    "left": "center"
  },
  "tooltip": {
    "trigger": "axis"
  },
  "legend": {
    "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"],
    "top": "10%"
  },
  "grid": {
    "left": "5%",
    "right": "5%",
    "bottom": "5%",
    "top": "20%",
    "containLabel": true
  },
  "toolbox": {
    "feature": {
      "saveAsImage": {
        "title": "Save as Image"
      }
    }
  },
  "xAxis": {
    "type": "category",
    "boundaryGap": false,
    "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
  },
  "yAxis": {
    "type": "value"
  },
  "series": [
    {
      "name": "Email Marketing",
      "type": "line",
      "stack": "Total",
      "data": [120, 132, 101, 134, 90, 230, 210]
    },
    {
      "name": "Affiliate Advertising",
      "type": "line",
      "stack": "Total",
      "data": [220, 182, 191, 234, 290, 330, 310]
    },
    {
      "name": "Video Advertising",
      "type": "line",
      "stack": "Total",
      "data": [150, 232, 201, 154, 190, 330, 410]
    },
    {
      "name": "Direct View",
      "type": "line",
      "stack": "Total",
      "data": [320, 332, 301, 334, 390, 330, 320]
    },
    {
      "name": "Search Engine",
      "type": "line",
      "stack": "Total",
      "data": [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
}
{{< /echarts >}}

The same in YAML format:

{{< echarts >}}
title:
    text: Summary Line Chart
    top: 2%
    left: center
tooltip:
    trigger: axis
legend:
    data:
        - Email Marketing
        - Affiliate Advertising
        - Video Advertising
        - Direct View
        - Search Engine
    top: 10%
grid:
    left: 5%
    right: 5%
    bottom: 5%
    top: 20%
    containLabel: true
toolbox:
    feature:
        saveAsImage:
            title: Save as Image
xAxis:
    type: category
    boundaryGap: false
    data:
        - Monday
        - Tuesday
        - Wednesday
        - Thursday
        - Friday
        - Saturday
        - Sunday
yAxis:
    type: value
series:
    - name: Email Marketing
      type: line
      stack: Total
      data:
          - 120
          - 132
          - 101
          - 134
          - 90
          - 230
          - 210
    - name: Affiliate Advertising
      type: line
      stack: Total
      data:
          - 220
          - 182
          - 191
          - 234
          - 290
          - 330
          - 310
    - name: Video Advertising
      type: line
      stack: Total
      data:
          - 150
          - 232
          - 201
          - 154
          - 190
          - 330
          - 410
    - name: Direct View
      type: line
      stack: Total
      data:
          - 320
          - 332
          - 301
          - 334
          - 390
          - 330
          - 320
    - name: Search Engine
      type: line
      stack: Total
      data:
          - 820
          - 932
          - 901
          - 934
          - 1290
          - 1330
          - 1320
{{< /echarts >}}

The same in TOML format:

{{< echarts >}}
[title]
text = "Summary Line Chart"
top = "2%"
left = "center"

[tooltip]
trigger = "axis"

[legend]
data = [
  "Email Marketing",
  "Affiliate Advertising",
  "Video Advertising",
  "Direct View",
  "Search Engine"
]
top = "10%"

[grid]
left = "5%"
right = "5%"
bottom = "5%"
top = "20%"
containLabel = true

[toolbox]
[toolbox.feature]
[toolbox.feature.saveAsImage]
title = "Save as Image"

[xAxis]
type = "category"
boundaryGap = false
data = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday"
]

[yAxis]
type = "value"

[[series]]
name = "Email Marketing"
type = "line"
stack = "Total"
data = [
  120.0,
  132.0,
  101.0,
  134.0,
  90.0,
  230.0,
  210.0
]

[[series]]
name = "Affiliate Advertising"
type = "line"
stack = "Total"
data = [
  220.0,
  182.0,
  191.0,
  234.0,
  290.0,
  330.0,
  310.0
]

[[series]]
name = "Video Advertising"
type = "line"
stack = "Total"
data = [
  150.0,
  232.0,
  201.0,
  154.0,
  190.0,
  330.0,
  410.0
]

[[series]]
name = "Direct View"
type = "line"
stack = "Total"
data = [
  320.0,
  332.0,
  301.0,
  334.0,
  390.0,
  330.0,
  320.0
]

[[series]]
name = "Search Engine"
type = "line"
stack = "Total"
data = [
  820.0,
  932.0,
  901.0,
  934.0,
  1290.0,
  1330.0,
  1320.0
]
{{< /echarts >}}

The rendered output looks like this:

The echarts shortcode has also the following named parameters:

• width [optional] (first positional parameter)

  Width of the data visualization, default value is 100%.

• height [optional] (second positional parameter)

  Height of the data visualization, default value is 30rem.

7 mapbox

Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles.

The mapbox shortcode has the following named parameters to use Mapbox GL JS:

• lng [required] (first positional parameter)

  Longitude of the initial centerpoint of the map, measured in degrees.

• lat [required] (second positional parameter)

  Latitude of the initial centerpoint of the map, measured in degrees.

• zoom [optional] (third positional parameter)

  The initial zoom level of the map, the default value is 10.

• marked [optional] (fourth positional parameter)

  Whether to add a marker at the initial centerpoint of the map, the default value is true.

• light-style [optional] (fifth positional parameter)

  Style for the light theme, default value is the value set in the front matter or the site configuration.

• dark-style [optional] (sixth positional parameter)

  Style for the dark theme, default value is the value set in the front matter or the site configuration.

• navigation [optional]

  Whether to add NavigationControl, default value is the value set in the front matter or the site configuration.

• geolocate [optional]

  Whether to add GeolocateControl, default value is the value set in the front matter or the site configuration.

• scale [optional]

  Whether to add ScaleControl, default value is the value set in the front matter or the site configuration.

• fullscreen [optional]

  Whether to add FullscreenControl, default value is the value set in the front matter or the site configuration.

• width [optional]

  Width of the map, the default value is 100%.

• height [optional]

  Height of the map, the default value is 20rem.

Example simple mapbox input:

{{< mapbox 121.485 31.233 12 >}}
Or
{{< mapbox lng=121.485 lat=31.233 zoom=12 >}}

The rendered output looks like this:

Example mapbox input with the custom style:

{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4" "mapbox://styles/mapbox/navigation-preview-night-v4" >}}
Or
{{< mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/navigation-preview-day-v4" dark-style="mapbox://styles/mapbox/navigation-preview-night-v4" >}}

The rendered output looks like this:

8 music

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

There are three ways to use the music shortcode.

8.1 Custom Music URL

The complete usage of local resource references is supported.

The music shortcode has the following named parameters by custom music URL:

• server [required]

  URL of the custom music.

• name [optional]

  Name of the custom music.

• artist [optional]

  Artist of the custom music.

• cover [required]

  URL of the custom music cover.

Example music input by custom music URL:

{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.webp" >}}

The rendered output looks like this:

8.2 Music Platform URL Automatic Identification

The music shortcode has one named parameter by music platform URL automatic identification:

• auto [required] (first positional parameter)

  URL of the music platform URL for automatic identification, which supports netease, tencent and xiami music platforms.

Example music input by music platform URL automatic identification:

{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
Or
{{< music "https://music.163.com/#/playlist?id=60198" >}}

The rendered output looks like this:

8.3 Custom Server, Type and ID

The music shortcode has the following named parameters by custom music platform:

• server [required] (first positional parameter)

  [netease, tencent, kugou, xiami, baidu]

  Music platform.

• type [required] (second positional parameter)

  [song, playlist, album, search, artist]

  Type of the music.

• id [required] (third positional parameter)

  Song ID, or playlist ID, or album ID, or search keyword, or artist ID.

Example music input by custom music platform:

{{< music server="netease" type="song" id="1868553" >}}
Or
{{< music netease song 1868553 >}}

The rendered output looks like this:

8.4 Other Parameters

The music shortcode has other named parameters applying to the above three ways:

• theme [optional]

  the Main colour of the music player, the default value is #448aff.

• fixed [optional]

  Whether to enable fixed mode, the default value is false.

• mini [optional]

  Whether to enable mini mode, the default value is false.

• autoplay [optional]

  Whether to autoplay music, the default value is false.

• volume [optional]

  Default volume when the player is first opened, which will be remembered in the browser, the default value is 0.7.

• mutex [optional]

  Whether to pause other players when this player starts playing, the default value is true.

The music shortcode has the following named parameters only applying to the type of music list:

• loop [optional]

  [all, one, none]

  Loop mode of the music list, the default value is none.

• order [optional]

  [list, random]

  Play order of the music list, the default value is list.

• list-folded [optional]

  Whether the music list should be folded at first, the default value is false.

• list-max-height [optional]

  Max height of the music list, the default value is 340px.

9 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 aplayer shortcode is used to create an APlayer instance, and the audio shortcode is used to store data about each music file. Please refer to APlayer.js documentation for all options.

Example aplayer and audio input:

{{< aplayer fixed=false mini=false autoplay=false theme="#b7daff" loop="all" order="list" preload="auto" volume=0.7 mutex=true lrcType=1 listFolded=false listMaxHeight="" storageName="aplayer-setting" >}}
    {{< audio name="Wavelength" artist="oldmanyoung" url="/music/Wavelength.mp3" cover="/images/Wavelength.webp" />}}
    {{< audio name="Wavelength" artist="oldmanyoung" url="/music/Wavelength.mp3" cover="/images/Wavelength.webp" >}}
        [00:00.00]APlayer audio1
        [00:04.01]is
        [00:08.02]amazing
    {{< /audio >}}
{{< /aplayer >}}

Example aplayer and audio output:

Note that these shortcodes cannot be used separately and only named parameters are supported.

If you place the LRC inside the audio shortcode, it is passed to the APlayer as a JS string, so the lrcType needs to be set to 1. If you set the link to the LRC file through the lrc parameter, it will be passed as an LRC file, so the lrcType needs to be set to 3.

10 bilibili

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

When the video only has one part, only the BV id of the video is required, e.g.:

https://www.bilibili.com/video/BV1Sx411T7QQ

Example bilibili input:

{{< bilibili BV1Sx411T7QQ >}}
Or
{{< bilibili id=BV1Sx411T7QQ >}}

The rendered output looks like this:

When the video has multiple parts, in addition to the BV id of the video, p is also required, whose default value is 1, e.g.:

https://www.bilibili.com/video/BV1TJ411C7An?p=3

Example bilibili input with p:

{{< bilibili BV1TJ411C7An 3 >}}
Or
{{< bilibili id=BV1TJ411C7An p=3 >}}

The rendered output looks like this:

10.1 Advanced Usage

The bilibili shortcode supports all named parameters shown in this blog post

Here is a list of all named parameters:

The following options seems not to work, but these are still added to the shortcode in case if they work in the future:

Example bilibili input with all named parameters:

{{< bilibili BV1TJ411C7An 3 0 0 1 30 0 1 1 1 1 >}}
or
{{< bilibili id=BV1TJ411C7An p=3 autoplay=0 danmaku=0 muted=1 t=30 hasMuteButton=0 hideCoverInfo=1 hideDanmakuButton=1 noFullScreenButton=1 fjw=1 >}}

The rendered output looks like this:

11 typeit

The typeit shortcode provides typing animation based on TypeIt.

Just insert your content in the typeit shortcode and that’s it.

11.1 Simple Content

Simple content is allowed in Markdown format and without rich block content such as images and more…

Example typeit input:

{{< typeit >}}
This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
{{< /typeit >}}

The rendered output looks like this:

Alternatively, you can use custom HTML tags.

Example typeit input with h4 tag:

{{< typeit tag=h4 >}}
This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
{{< /typeit >}}

The rendered output looks like this:

11.2 Code Content

Code content is allowed and will be highlighted by the named parameter code for the type of code language.

Example typeit input with code:

{{< typeit code=java >}}
public class HelloWorld {
    public static void main(String []args) {
        System.out.println("Hello World");
    }
}
{{< /typeit >}}

The rendered output looks like this:

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

{{< typeit group=paragraph >}}
**First** this paragraph begins
{{< /typeit >}}

{{< typeit group=paragraph >}}
**Then** this paragraph begins
{{< /typeit >}}

The rendered output looks like this:

12 script

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

Example script input:

{{< script >}}
console.log('Just DoIt!');
{{< /script >}}

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

13 friend

friend is a shortcode to insert a friend link to your friend’s site in your post.

The friend shortcode has the following named parameters:

• name [required] (first positional parameter)

  Your friend site’s name.

• url [required] (second positional parameter)

  The link to your friend site.

• avatar [required] (third positional parameter)

  Your friend site’s avatar.

• bio [required] (fourth positional parameter)

  A short bio of your friend site.

Example friend input:

{{< friend "PCloud" "https://github.com/HEIGE-PCloud/" "https://avatars.githubusercontent.com/u/52968553?v=4" "This is PCloud~💤" >}}
Or
{{< friend name="PCloud" url="https://github.com/HEIGE-PCloud/" avatar="https://avatars.githubusercontent.com/u/52968553?v=4" bio="This is PCloud~💤" >}}

The rendered output looks like this:

PCloud

This is PCloud~💤

14 showcase

showcase is a shortcode to insert a showcase of your project in the post.

The showcase shortcode has the following named parameters:

• title [required] (first positional parameter)

  The title of your showcase.

• summary [required] (second positional parameter)

  A brief introduction to your project.

• image [required] (third positional parameter)

  The url to the preview image.

• link [required] (fourth positional parameter)

  The url to your project page.

• column [optional] (fifth positional parameter)

  This parameter defines how many showcases are in each row. The default value is 2, which means there will have two showcases in each row. You can change it to 1, 2 or 3. It’s important to note that when a user visits the website on a small screen, the number of the column may be auto-adjusted to provide the best experience.

Example showcase input:

{{< showcase title="Theme Documentation - Basics" summary="Discover what the Hugo - DoIt theme is all about and the core-concepts behind it." image="/theme-documentation-basics/featured-image.webp" link="/theme-documentation-basics" >}}
Or
{{< showcase "Theme Documentation - Basics" "Discover what the Hugo - DoIt theme is all about and the core-concepts behind it." "/theme-documentation-basics/featured-image.webp" "/theme-documentation-basics" >}}

The rendered output looks like this:

Theme Documentation - Basics

Discover what the Hugo - DoIt theme is all about and the core-concepts behind it.

Read more...

15 tabs and tab

tabs and tab are two shortcodes, when used together, can create a tab component for your content.

Example tabs and tab input:

{{< tabs >}}

{{% tab title="Tab 1" %}}

### Title 1

Hi there!

#### Title 2

```py
print("Hello world!")
```

{{% /tab %}}

{{% tab title="Tab 2" %}}

Yet another tab

{{% /tab %}}

{{< /tabs >}}

The rendered output looks like this:

print("Hello world!")

Due to limitations in the Hugo shortcode system, nested tabs may not work as expected.

16 fa-icon

fa-icon shortcode is used to insert Font Awesome 5 icons.

A fa-icon example:

{{< fa-icon regular smile >}}

The rendered output looks like this:

17 person

person is a shortcode to insert a link to a personal webpage marked up as h-card.

The person shortcode has the following named parameters:

• url [required] (first positional parameter)

  URL of the personal page.

• name [required] (second positional parameter)

  Name of the person.

• text [optional] (third positional parameter)

  Text to display as hover tooltip of the link.

• picture [optional] (fourth positional parameter)

  A picture to use as person’s avatar.

• nick [optional]

  Nickame of the person.

Example person input:

{{< person url="https://evgenykuznetsov.org" name="Evgeny Kuznetsov" nick="nekr0z" text="author of this shortcode" picture="https://evgenykuznetsov.org/img/avatar.jpg" >}}

This renders as   Evgeny Kuznetsov (nekr0z).

Without an explicitly given picture, a generic icon is used. This input:

{{< person "https://dillonzq.com/" Dillon "author of the LoveIt theme" >}}

This renders as  Dillon.