ଧମ୍ମପଥ – Shortcodes

Callout Component

Mon, 01 Jan 0001 00:00:00 +0000

A built-in component to show important information to the reader.

Note

GitHub-style alerts are supported since v0.9.0. It leverages Markdown syntax to render the callout which ensures better portability and readability of the content.

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.

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

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

Warning

⚠️

This API will be deprecated in the next version.

{{< callout type="warning" >}}
  A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}

Error

🚫

Something went wrong and it’s going to explode.

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

Cards Component

Mon, 01 Jan 0001 00:00:00 +0000

Example

Callout Card with tag

custom tag

No Icon

Image Card

Internet Image

Local Image

Raw image under static directory.

Local Image

Image under assets directory, processed by Hugo.

Usage

{{< cards >}}
  {{< card link="../callout" title="Callout" icon="warning" >}}
  {{< card link="../callout" title="Card with tag" icon="tag" tag= "A custom tag" >}}
  {{< 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.
`tag`	Text in tag.
`tagColor`	Color of the tag: `gray` (default), `yellow`, `red` and `blue`.

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.

Columns

You can specify the maximum number of columns for cards to span by passing the cols parameter to the cards shortcode. Note that columns will still be collapsed on smaller screens.

Top Card Bottom Card

Left Card Right Card

{{< cards cols="1" >}}
  {{< card link="/" title="Top Card" >}}
  {{< card link="/" title="Bottom Card" >}}
{{< /cards >}}

{{< cards cols="2" >}}
  {{< card link="/" title="Left Card" >}}
  {{< card link="/" title="Right Card" >}}
{{< /cards >}}

Details

Mon, 01 Jan 0001 00:00:00 +0000

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

{{% 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 Component

Mon, 01 Jan 0001 00:00:00 +0000

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

Icon

Mon, 01 Jan 0001 00:00:00 +0000

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.

Jupyter Notebook Component

Mon, 01 Jan 0001 00:00:00 +0000

Experimental feature to include Jupyter Notebooks via a shortcode. Note that not all cell types are supported.

Jupyter Notebook is a language-agnostic HTML notebook application for Project Jupyter. It allows you to create and share documents that contain live code, equations, visualizations, and narrative text.

How to use

Using a local notebook

To use the Jupyter Notebook shortcode, you need to have a Jupyter Notebook file in your project. Similar to how you would add images to the project, you can add Jupyter Notebooks to the assets folder.

notebook.ipynb

- my-page.md

Include the Jupyter Notebook in the page using the jupyter shortcode:

content/docs/my-page.md

---
title: My Page
math: true
---

{{% jupyter "notebook.ipynb" %}}

Alternatively, you can utilize the page bundles feature of Hugo to organize the Jupyter Notebooks together with the Markdown file.

- - index.md
  - notebook.ipynb

content/docs/my-page/index.md

---
title: My Page
math: true
---

{{% jupyter "notebook.ipynb" %}}

Using a remote notebook

You can also use a remote notebook by providing the URL to the notebook file. For example, to include What is the Jupyter Notebook notebook in the page, you can use the following shortcode:

{{% jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" %}}

Example Notebook

ℹ️

The following is an example of a notebook file that is included in the project assets folder.

What is the Jupyter Notebook?

The Jupyter Notebook is an interactive computing environment that enables users to author notebook documents that include:

Live code
Interactive widgets
Plots
Narrative text
Equations
Images
Video

These documents provide a complete and self-contained record of a computation that can be converted to various formats and shared with others using email, version control systems (like Git/GitHub) or nbviewer.jupyter.org.

Data Visualization

Below is an example of a simple data visualization using the Seaborn library.

# Import seaborn
import seaborn as sns

# Apply the default theme
sns.set_theme()

# Load an example dataset
tips = sns.load_dataset("tips")

# Create a visualization
sns.relplot(
    data=tips,
    x="total_bill", y="tip", col="time",
    hue="smoker", style="smoker", size="size",
)

Matplotlib is building the font cache; this may take a moment.

<seaborn.axisgrid.FacetGrid at 0x12830caa0>

tips.head()

   total_bill   tip     sex smoker  day    time  size
0       16.99  1.01  Female     No  Sun  Dinner     2
1       10.34  1.66    Male     No  Sun  Dinner     3
2       21.01  3.50    Male     No  Sun  Dinner     3
3       23.68  3.31    Male     No  Sun  Dinner     2
4       24.59  3.61  Female     No  Sun  Dinner     4

	total_bill	tip	sex	smoker	day	time	size
0	16.99	1.01	Female	No	Sun	Dinner	2
1	10.34	1.66	Male	No	Sun	Dinner	3
2	21.01	3.50	Male	No	Sun	Dinner	3
3	23.68	3.31	Male	No	Sun	Dinner	2
4	24.59	3.61	Female	No	Sun	Dinner	4

Equations

The following is an example of a simple equation using LaTeX.

E = mc^2

Other Shortcodes

Mon, 01 Jan 0001 00:00:00 +0000

ℹ️

Some of these are Hugo built-in shortcodes. These shortcodes are considered less stable and may be changed anytime.

Badge

{{< badge "Badge" >}}

Result:

Badge

Variants:

{{< badge content="info" type="info" >}}
{{< badge content="warning" type="warning" >}}
{{< badge content="error" type="error" >}}

Result:

info

warning

error

With link and icon:

{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}

Result:

Releases

YouTube

Embed a YouTube video.

{{< youtube VIDEO_ID >}}

Result:

For more information, see Hugo’s YouTube Shortcode.

PDF

With PDF shortcode, you can embed a PDF file in your content.

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

You can also place the PDF file in your project directory and use the relative path.

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

Example:

Steps

Mon, 01 Jan 0001 00:00:00 +0000

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

ℹ️

Please note that this shortcode is intended only for Markdown content. If you put HTML content or other shortcodes as step content, it may not render as expected.

Put Markdown h3 header within steps shortcode.

{{% steps %}}

### Step 1

This is the first step.

### Step 2

This is the second step.

{{% /steps %}}

Tabs

Mon, 01 Jan 0001 00:00:00 +0000

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.

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"

ଧମ୍ମପଥ – Shortcodes

Callout Component

Example

Usage

Default

Info

Warning

Error

Cards Component

Example

Usage

Card Parameters

Image Card

Tags

Columns

Details

Example

Usage

FileTree Component

Example

Usage

Icon

Example

Usage

How to add your own icons

Jupyter Notebook Component

How to use

Using a local notebook

Using a remote notebook

Example Notebook

What is the Jupyter Notebook?

Data Visualization

Equations

Other Shortcodes

Badge

YouTube

PDF

Steps

Example

Step 1

Step 2

Step 3

Usage

Tabs

Example

Usage

Default

Specify Selected Index

Use Markdown