Content - Pocket Hugo https://theme.leftn.com/tags/content/ Content Hugo -- gohugo.io en Mon, 20 Apr 2026 02:51:39 +0000 Shortcodes Demo https://theme.leftn.com/article/shortcodes-demo/ Fri, 06 Mar 2026 01:00:00 +0000 https://theme.leftn.com/article/shortcodes-demo/ A sample page that groups together several practical shortcodes for content-heavy Hugo sites. This page groups together several practical shortcodes that work well in a content-first Hugo theme. They are intentionally simple, easy to copy, and suitable for essays, notes, and documentation pages.

Fold

Use fold when a section should stay readable without taking too much vertical space.

{{< fold "Why this shortcode exists" >}}
This hidden block is rendered inside a native `<details>` element.
{{< /fold >}}
Why this shortcode exists This hidden block is rendered inside a native <details> element, so it works without JavaScript and still feels natural in long-form writing.

Note

Use note for callouts such as tips, warnings, or side remarks.

{{< note type="info" title="Content-first" >}}
Pocket Hugo Theme keeps callouts readable without making them look like app UI.
{{< /note >}}
Content-first
Pocket Hugo Theme keeps callouts readable without making them look like app UI.
Tip
Shortcodes like this are useful for tutorials, changelogs, and writing guides.
Experimental
If you add custom shortcodes, keep them small and easy to understand. Readers should not need to decode the layout before reading the content.

Badge

Badges are useful for compact status labels inside paragraphs.

{{< badge "Stable" >}}
{{< badge text="Optional" type="info" >}}
{{< badge text="Experimental" type="warn" >}}

Stable Optional Experimental

Button

Use button when you want a stronger inline call to action than a normal text link.

{{< button href="https://theme.leftn.com/guide/" label="Open the Guide" >}}
{{< button href="https://theme.leftn.com/links/" label="Browse Links" style="ghost" >}}

Open the Guide Browse Links

Video and audio

These shortcodes keep common media embeds consistent with the rest of the theme.

{{< video src="https://theme.leftn.com/media/demo.mp4" title="Local video" >}}Caption{{< /video >}}
{{< audio src="https://theme.leftn.com/media/demo.mp3" title="Audio clip" >}}Caption{{< /audio >}}
{{< youtube id="rdwz7QiG0lk" >}}YouTube embed{{< /youtube >}}
{{< bilibili bvid="BV1xx411c7mu" >}}Bilibili embed{{< /bilibili >}}
A plain HTML5 video wrapper with the theme’s default radius and spacing.
HTML5 audio
A matching audio player for short clips, podcasts, or spoken notes.
A YouTube embed wrapped in the same media style.
A Bilibili embed using the same responsive frame.

Timeline

Use timeline when you want a process, update log, or historical sequence.

{{< timeline >}}
{{< timeline-item date="2026-01" title="Planning" >}}Outline the scope.{{< /timeline-item >}}
{{< timeline-item date="2026-02" title="Build" >}}Ship the first version.{{< /timeline-item >}}
{{< /timeline >}}
2026-01
Planning
Outline the first version of the feature and keep the data format small.
2026-02
Build
Add a simple implementation that fits long-form content rather than app-like UI.
2026-03
Polish
Tighten copy, spacing, and multilingual examples.

Columns

Use columns when two ideas need to be compared side by side.

{{< columns >}}
{{< column >}}Left side{{< /column >}}
{{< column >}}Right side{{< /column >}}
{{< /columns >}}

Better for

  • short comparisons
  • feature summaries
  • before/after notes

Avoid for

  • long essay paragraphs
  • deeply nested lists
  • content that must stay linear

Use gallery when one article needs a compact image grid without writing a separate Markdown image block for every file.

{{< gallery pattern="sample*.webp" columns="3" >}}

The shortcode reads matching image files from the current page bundle, renders them as a responsive grid, and reuses the built-in lightbox when you click a photo.

sample1.webp
sample2.webp
sample3.webp
sample4.webp
sample5.webp
sample6.webp

Why this matters

These shortcodes are not meant to turn the theme into a component library. They simply give writers a few reusable building blocks that fit the theme without adding a framework layer.

]]>