Shortcodes

The theme bundles some handy shortcodes that tries to cover common situations.

Buttons are styled links that can lead to local page or external link.

{{< button relref="/" [class="...", size="large|regular"] >}}Get Home{{< /button >}}
{{< button href="https://github.com/thegeeklab/hugo-geekblog" >}}Contribute{{< /button >}}

class optional list

List of space-separated CSS class names to apply.

Default: none

href optional string

The URL to use as target of the button.

Default: none

relref optional string

Executes the relref Hugo function to resolve the relative permalink of the specified page. The result is set as the target of the button.

Default: none

size optional string

Preset of different button sizes. Supported values are regular|large.

Default: none

Get Home Contribute

The Columns shortcode can be used to organize content side-by-side (horizontally) for better readability.

{{< columns [size="small|regular|large"] >}} <!-- begin columns block -->
# Left Content
Dolor sit, sumo unique argument um no ...

<---> <!-- magic sparator, between columns -->

# Mid Content
Dolor sit, sumo unique argument um no ...

<---> <!-- magic sparator, between columns -->

# Right Content
Dolor sit, sumo unique argument um no ...
{{< /columns >}}

size optional string

Preset of different sizes for the first column. Supported values are small|regular|large.

Default: regular

Emoji can be enabled in a Hugo project in a number of ways.

The emojify function can be called directly in templates or Inline Shortcodes. To enable emoji globally, set enableEmoji to true in your site’s configuration and then you can type emoji shorthand codes directly in content files.

The Emoji cheat sheet is a useful reference for emoji shorthand codes.

The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack.

1
2
3

.emoji {
  font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
}

Expand shortcode can help to decrease clutter on screen by hiding part of text. Expand content by clicking on it.

{{< expand >}}
### Markdown content
Dolor sit, sumo unique ...
{{< /expand >}}

It is also possible to use a custom label and symbol.

{{< expand "Custom Label" "..." >}}
### More markdown
Dolor sit, sumo unique ...
{{< /expand >}}

Hint shortcode can be used as hint/alerts/notification block.

{{< hint type=[note|tip|important|caution|warning] (icon=gblog_github) (title=GitHub) >}}
**Markdown content**\
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
 Ornateness bland it ex enc, est yeti am bongo detract re.
{{< /hint >}}

icon optional string

Icon to use. The value need to be an icon from an SVG sprite.

Default: none

title optional string

Title text of the hint.

Default: none

type optional string

Type of the hint. Supported values are note|tip|important|caution|warning.

Default: note

Markdown content
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re.

Markdown content
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re.

Markdown content
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re.

Markdown content
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re.

Markdown content
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re.

Romanesque acclimates investiture.

Example with a custom icon and title:

GitHub

Markdown content
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re.

Simple shortcode to include icons from SVG sprites outside of menus.

{{< icon "thumbs-up" >}}

Tabs let you organize content by context, for example installation instructions for each supported platform.

{{< tabs "uniqueid" >}}
{{< tab "macOS" >}} # macOS Content {{< /tab >}}
{{< tab "Linux" >}} # Linux Content {{< /tab >}}
{{< tab "Windows" >}} # Windows Content {{< /tab >}}
{{< /tabs >}}

Boxes can be used to create a simple grid.

{{< boxes "contact" >}}
{{< box size=large [title=E-Mail icon=gblog_email] >}}mail@example.com{{< /box >}}
{{< box size=large title=Matrix icon=gblog_matrix >}}@john:example.com{{< /box >}}
{{< box size=large title=XMPP icon=gblog_xmpp >}}john@example.com{{< /box >}}
{{< box size=large title=Others >}}You can also find us on the Fediverse.{{< /box >}}
{{< /boxes >}}

icon optional string

Icon to use. The value need to be an icon from an SVG sprite.

Default: none

size optional string

Size of each box. Supported values are regular|large.

Default: none

title optional string

Title text of the hint.

Default: none

Mermaid is library for generating SVG charts and diagrams from text.

{{< mermaid class="text-center" >}}
sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end
{{< /mermaid >}}

class optional list

List of space-separated CSS class names to apply.

Default: none

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end

As an alternative to shortcodes, code blocks can be used for markdown as well.

```mermaid
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```

flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

KaTeX shortcode let you render math typesetting in markdown document.

{{< katex [display] [class="text-center"] >}}
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
{{< /katex >}}

class optional list

List of space-separated CSS class names to apply.

Default: none

KaTeX can be used inline, for example \(\pi(x)\) or used with the display parameter as above.

{{< progress title=Eating value=65 icon=gblog_heart >}}

icon optional string

Icon to use. The value need to be an icon from an SVG sprite.

Default: none

title optional string

Title text of the progress bar.

Default: none

value optional integer

Progress value.

Default: 0

The property list shortcode creates a custom HTML description list that can be used to display properties or variables and general dependent information. The shortcode requires a data file in data/properties/, e.g. data/properties/demo.yaml.

{{< propertylist name=demo (sort=name) (order=[asc|desc]) >}}

The supported attributes can be taken from the following example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

---
properties:
  - name: prop1
    type: string
    description: Dummy description of the prop1 string property.
    required: true

  - name: prop2
    type: int
    defaultValue: 10
    description: Another description for the integer property called prop2.
    required: false
    tags:
      - tag1
      - tag2

  - name: prop3
    type: bool
    defaultValue: false
    description: |
      A `bool` property with a complex multiline description and embedded Markdown:

      - List item 1
      - List item 2

      More description how to use this property.      
    required: false

  - name: a-prop
    type: string
    description: Property to demonstrate sorting.
    required: true

name required string

Name of the file from the data/properties/ directory.

Default: none

order optional string

Sort order, only applied if sort is set. Supported values are asc|desc.

Default: asc

sort optional string

Field name to use for sorting.

Default: none

a-prop required string

Property to demonstrate sorting.

Default: none

prop1 required string

Dummy description of the prop1 string property.

Default: none

prop2 optional int tag1 tag2

Another description for the integer property called prop2.

Default: 10

prop3 optional bool

A bool property with a complex multiline description and embedded Markdown:

• List item 1
• List item 2

More description how to use this property.

Default: false