1.9 KiB
| title | date | description | categories | tags | |||
|---|---|---|---|---|---|---|---|
| Shortcodes | 2026-01-26 | Sample article showcasing various shortcodes supported by Stack theme. |
|
|
Stack theme also provides some custom shortcodes to enhance your content.
Quote
The quote shortcode allows you to display a quote with an author, source, and URL.
{{< quote author="A famous person" source="The book they wrote" url="https://en.wikipedia.org/wiki/Book">}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. {{< /quote >}}
Usage
{{</* quote author="Author Name" source="Source Title" url="https://example.com" */>}}
Quote content here.
{{</* /quote */>}}
Video
The video shortcode allows you to embed self-hosted or remote video files.
{{< video src="https://www.w3schools.com/html/mov_bbb.mp4" >}}
Usage
{{</* video src="https://example.com/video.mp4" */>}}
Bilibili
Embed videos from Bilibili. Supports both av and bv IDs.
{{< bilibili "BV1634y1t7xR" >}}
Usage
{{</* bilibili "BV1634y1t7xR" */>}}
YouTube
Hugo's built-in YouTube shortcode.
{{< youtube ZJthWmvUzzc >}}
Usage
{{</* youtube ZJthWmvUzzc */>}}
Tencent Video
Embed videos from Tencent Video.
{{< tencent "u00306ng962" >}}
Usage
{{</* tencent "u00306ng962" */>}}
GitLab Snippet
Embed snippets from GitLab.
{{< gitlab 2349278 >}}
Usage
{{</* gitlab 2349278 */>}}
Diagrams
Stack supports Mermaid diagrams out of the box.
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
Usage
Wrap your Mermaid code in a code block with the language set to mermaid.
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```