Hugo Shortcodes are snippets inside your content files calling built-in or custom templates.

Trigo provides a collection of shortcodes to enhance your content. Additional shortcodes are provided directly by Hugo (see the last ones).

Details shortcode

Trigo shortcode to display a collapsible content.

Example

Usage

{{< details summary="Details" >}}

This is the content of the details.

Markdown is **supported**.

{{< /details >}}

{{< details summary="Click me to reveal" open="false" >}}

This will be hidden by default.

{{< /details >}}

Tabs shortcode

Trigo shortcode to display content is several tabs.

Example

{ "hello": "world" }

hello: world

hello = "world"

Usage

{{< tabs >}}

  {{< tab JSON >}}
  **JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.
  ```json
  { "hello": "world" }
  ```
  {{< /tab >}}
  {{< tab YAML >}}
  **YAML**: YAML is a human-readable data serialization language.
  ```yaml
  hello: world
  ```
  {{< /tab >}}
  {{< tab TOML >}}
  **TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.
  ```toml
  hello = "world"
  ```
  {{< /tab >}}

{{< /tabs >}}

Steps shortcode

Trigo shortcode to display a series of steps.

You can use the Markdown attribute {class="no-step"} to prevent a heading from being counted as a step.

Example

Usage

{{% steps %}}

#### Step 1

This is the first step.

#### Step 2

This is the second step.

###### Step subheading {class="no-step"}

This will not be counted as a step.

{{% /steps %}}

Tree shortcode

Trigo shortcode to display a filetree with branches and leaves.

Example

• content
  • _index.md
  • docs
    • _index.md
    • introduction.md
    • introduction.fr.md
• hugo.toml
• Example

Usage

{{< tree name="example" style="border: var(--border);" >}}
  {{< branch name="content" >}}
    {{< leaf name="_index.md" >}}
    {{< branch name="docs" state="closed" >}}
      {{< leaf name="_index.md" style="color: red;" >}}
      {{< leaf name="introduction.md" >}}
      {{< leaf name="introduction.fr.md" >}}
    {{< /branch >}}
  {{< /branch >}}
  {{< leaf name="hugo.toml" >}}
{{< /tree >}}

Options

branch

Carousel

Trigo shortcode to display a carousel of images with drag, scroll support and optional automatic mode.

Example

Usage

Specify a directory where all image resources are used for the carousel:

{{< carousel dir="path/to/directory" mode="auto" >}}

Specify a list of images to use with an images parameter:

{{< carousel images="1.webp, 2.webp, 3.webp" >}}

Specify a list of images to use:

{{< carousel "1.webp" "2.webp" "3.webp" >}}

The path is relative to the current page bundle. To use resources in the static or assets directories of the site, prefix the path with a / slash. The URL of an external image can be use as well.

Compare

Trigo shortcode to display two stacked images with a movable vertical clipping path.

Example

Usage

Specify two image paths:

{{< compare "1.webp" "2.webp" >}}

The path is relative to the current page bundle. To use resources in the static directory of the site, prefix the path with a / slash. The URL of an external image can be use as well.

PDF

Trigo shortcode to display a PDF file.

Example

Usage

{{< pdf "https://example.com/sample.pdf" >}}

The PDF file can also be located in the project directory and use the relative path.

{{< pdf "path/to/file.pdf" >}}

YouTube

Embed a YouTube video.

Example

Usage

{{< youtube id="VIDEO_ID" loading="lazy" >}}

For more information, see Hugo’s YouTube Shortcode.