Shortcodes

exported by ox-hugo on Org_Mode & Emacs

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

Hextra provides a collection of beautiful shortcodes to enhance your content.

Callout Cards Details FileTree Icon Steps Tabs

Icon

exported by ox-hugo on Org_Mode & Emacs To use this shortcode inline, inline shortcode needs to be enabled in the config:

hugo.yaml

enableInlineShortcodes: true

List of available icons can be found in data/icons.yaml.

Example

Usage

{{< icon "github" >}}

Heroicons v1 outline icons are available out of the box.

How to add your own icons

Create data/icons.yaml file, then add your own SVG icons in the following format:

data/icons.yaml

your-icon: <svg>your icon svg content</svg>

It then can be used in the shortcode like this:

{{< icon "your-icon" >}}

{{< card icon="your-icon" >}}

Tip: Iconify Design is a great place to find SVG icons for your site.

Cards

exported by ox-hugo on Org_Mode & Emacs

Example

Raw image under static directory.

Local Image

Image under assets directory, processed by Hugo.

Usage

Org-Mode (FIXME)

Org-Mode

#+begin_cards
  {{< card link="../callout" title="Callout" icon="warning" >}}
  {{< card link="/" title="No Icon" >}}
#+end_cards

Org-Mode

#+begin_cards
  {{< card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" >}}
  {{< card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." >}}
  {{< card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" >}}
#+end_cards

Markdown

{{< cards >}}
  {{< card link="../callout" title="Callout" icon="warning" >}}
  {{< card link="/" title="No Icon" >}}
{{< /cards >}}

{{< cards >}}
  {{< card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" >}}
  {{< card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." >}}
  {{< card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" >}}
{{< /cards >}}

Card Parameters

Parameter	Description
`link`	URL (internal or external).
`title`	Title heading for the card.
`subtitle`	Subtitle heading (supports Markdown).
`icon`	Name of the icon.

Image Card

Additionally, the card supports adding image and processing through these parameters:

Parameter	Description
`image`	Specifies the image URL for the card.
`method`	Sets Hugo’s image processing method.
`options`	Configures Hugo’s image processing options.

Card supports three kinds of images:

Remote image: the full URL in the image parameter.
Static image: use the relative path in Hugo’s static/ directory.
Processed image: use the relative path in Hugo’s assets/ directory.

Hextra auto-detects if image processing is needed during build and applies the options parameter or default settings (Resize, 800x, Quality 80, WebP Format). It currently supports these method: Resize, Fit, Fill and Crop.

For more on Hugo’s built in image processing commands, methods, and options see their Image Processing Documentation.

Tabs

exported by ox-hugo on Org_Mode & Emacs

Example

JSON: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.

YAML: YAML is a human-readable data serialization language.

TOML: TOML aims to be a minimal configuration file format that’s easy to read due to obvious semantics.

테스트 중 입니다.

{{< tab >}} ****JSON****: {{< /tab >}} {{< tab >}} ****YAML****: {{< /tab >}} {{< tab >}} ****TOML****: {{< /tab >}}

Usage

Default

{{< tabs items="JSON,YAML,TOML" >}}

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

{{< /tabs >}}

Specify Selected Index

Use defaultIndex property to specify the selected tab. The index starts from 0.

{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}

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

{{< /tabs >}}

The YAML tab will be selected by default.

JSON: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.

YAML: YAML is a human-readable data serialization language.

TOML: TOML aims to be a minimal configuration file format that’s easy to read due to obvious semantics.

Use Markdown

Markdown syntax including code block is also supported:

{{< tabs items="JSON,YAML,TOML" >}}

  {{< tab >}}
  ```json
  { "hello": "world" }
  ```
  {{< /tab >}}

  ... add other tabs similarly

{{< /tabs >}}

{ "hello": "world" }

hello: world

hello = "world"

Callout

exported by ox-hugo on Org_Mode & Emacs A built-in component to show important information to the reader.

Example

👾

A callout is a short piece of text intended to attract attention.

ℹ️

A callout is a short piece of text intended to attract attention.

⚠️

A callout is a short piece of text intended to attract attention.

🚫

A callout is a short piece of text intended to attract attention.

Usage

Default

🌐

Hugo can be used to create a wide variety of websites, including blogs, portfolios, documentation sites, and more.

Org-Mode

#+attr_shortcode: emoji="🌐"
#+begin_callout
Hugo can be used to create a wide variety of websites, including blogs,
portfolios, documentation sites, and more.
#+end_callout

{{< callout emoji="🌐" >}}
  Hugo can be used to create a wide variety of websites, including blogs, portfolios, documentation sites, and more.
{{< /callout >}}

Info

ℹ️

Please visit GitHub to see the latest releases.

Org-Mode

#+attr_shortcode: type="info"
#+begin_callout
Please visit GitHub to see the latest releases.
#+end_callout

{{< callout type="info" >}}
Please visit GitHub to see the latest releases.
{{< /callout >}}

Warning

⚠️

This API will be deprecated in the next version.

Org-Mode

#+attr_shortcode: type="warning"
#+begin_callout
This API will be deprecated in the next version.
#+end_callout

{{< callout type="warning" >}}
This API will be deprecated in the next version.
{{< /callout >}}

Error

🚫

Something went wrong and it’s going to explode.

Org-Mode

#+attr_shortcode: type="error"
#+begin_callout
Something went wrong and it's going to explode.
#+end_callout

{{< callout type="error" >}}
Something went wrong and it's going to explode.
{{< /callout >}}

Details

exported by ox-hugo on Org_Mode & Emacs A built-in component to display a collapsible content.

Example

Details

This is the content of the details.

Markdown is supported.

Click me to reveal

This will be hidden by default.

Usage

Org-Mode

#+attr_shortcode: title="Details"
#+begin_details
This is the content of the details.

Markdown is *supported*.
#+end_details

Org-Mode

#+attr_shortcode: title="Click me to reveal" closed="true"
#+begin_details
This will be hidden by default.
#+end_details

Markdown

{{% details title="Details" %}}

This is the content of the details.

Markdown is **supported**.

{{% /details %}}

{{% details title="Click me to reveal" closed="true" %}}

This will be hidden by default.

{{% /details %}}

Filetree

exported by ox-hugo on Org_Mode & Emacs

Example

_index.md
- _index.md
- introduction.md
- introduction.fr.md

hugo.toml

Usage

Markdown

{{< filetree/container >}}
  {{< filetree/folder name="content" >}}
    {{< filetree/file name="_index.md" >}}
    {{< filetree/folder name="docs" state="closed" >}}
      {{< filetree/file name="_index.md" >}}
      {{< filetree/file name="introduction.md" >}}
      {{< filetree/file name="introduction.fr.md" >}}
    {{< /filetree/folder >}}
  {{< /filetree/folder >}}
  {{< filetree/file name="hugo.toml" >}}
{{< /filetree/container >}}

Steps

exported by ox-hugo on Org_Mode & Emacs A built-in component to display a series of steps.

Example

Step 1

This is the first step.

Step 2

This is the second step.

Step 3

This is the third step.

Usage

Put Markdown h3 header within steps shortcode.

{{% steps %}}

### Step 1

This is the first step.

### Step 2

This is the second step.

{{% /steps %}}

마지막 수정일자 2024-09-30