Documentation on Hugo Theme Stack

Image Gallery

Mon, 26 Jan 2026 00:00:00 +0000

Stack theme has a built-in support for image galleries. It allows you to create a beautiful gallery by simply placing multiple images side-by-side.

Sample Gallery

How it works

The gallery is powered by Photoswipe and a custom internal script. It automatically calculates the best layout for your images based on their aspect ratios.

To create a gallery, you just need to put multiple images in the same line (or paragraph).

Syntax

1
2
3

![Image 1](image1.jpg)  ![Image 2](image2.jpg)

![Image 3](image3.jpg)  ![Image 4](image4.jpg)

Note: There should be two spaces between the images to ensure they stay in the same line in Markdown

Gallery Syntax inspired by Typlog

Shortcodes

Mon, 26 Jan 2026 00:00:00 +0000

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
― A famous person, The book they wrote

Usage

1
2
3

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

Your browser doesn't support HTML5 video. Here is a link to the video instead.

Usage

`1`	`{{< video src="https://example.com/video.mp4" >}}`

Bilibili

Embed videos from Bilibili. Supports both av and bv IDs.

Usage

`1`	`{{< bilibili "BV1634y1t7xR" >}}`

YouTube

Hugo’s built-in YouTube shortcode.

Usage

`1`	`{{< youtube ZJthWmvUzzc >}}`

Tencent Video

Embed videos from Tencent Video.

Usage

`1`	`{{< tencent "u00306ng962" >}}`

GitLab Snippet

Embed snippets from GitLab.

Usage

`1`	`{{< 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;
```

Math Typesetting

Sat, 24 Jan 2026 00:00:00 +0000

The Stack theme supports rendering mathematical notation using KaTeX.

Enabling KaTeX

Per-page basis

To enable KaTeX for a specific post, include math: true in the post’s frontmatter:

---
title: "My Math Post"
math: true
---

Globally

To enable KaTeX for all posts, set article.math to true in your site configuration (params.yaml or params.toml):

1
2

article:
    math: true

Examples

Inline Math

You can include math inline by wrapping the expression in single dollar signs $.

For example: $ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $ renders as $ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $

Block Math

For larger equations, use double dollar signs $$ to create a math block.

$$ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } $$

More Complex Formula

$$ f(a) = \frac{1}{2\pi i} \oint_\gamma \frac{f(z)}{z-a} dz $$

Note: For a full list of supported TeX functions, refer to the KaTeX documentation.