Home on My New Hugo Site

Theme Guide

Sun, 26 Oct 2025 00:00:00 +0000

This post walks through what hugo-trainsh can render — headings, code, tables, diagrams, math, images, and more.

Three Theme Modes
Writing
Code
Tables
Diagrams
Math
Images
Tags

Three Theme Modes

Click the toggle in the header to cycle through:

Retro (gamepad) — NES deep-blue background, pixel font headings, 8-bit dialog borders
Light (sun) — clean, modern light palette
Dark (moon) — comfortable for night reading

Writing

Regular Markdown works as expected. Bold text stands out in gold under retro mode, and italic text stays readable. You can link to any page and the style adapts per theme.

Code Samples

Sun, 19 Oct 2025 00:00:00 +0000

JavaScript

 
export function hasFeature(name) {
 return ['shortcodes', 'mermaid', 'math', 'lightbox', 'i18n'].includes(name);
}
console.log(hasFeature('shortcodes'));

Python

 
from dataclasses import dataclass
from datetime import date

@dataclass
class DemoFeature:
 name: str
 enabled: bool

features = ["codeblock-enhanced", "search", "tag-filter", "i18n"]
status = [DemoFeature(name=feature, enabled=True) for feature in features]

print(date.today().isoformat(), status[:2], f"total={len(status)}")

Images and Lightbox

Sun, 12 Oct 2025 00:00:00 +0000

External image

Click the image to open in a lightbox.

Open full size

Local image note

For page bundles, put images beside index.md and reference by filename only to get dimensions.

Mermaid and Math Demo

Sun, 05 Oct 2025 00:00:00 +0000

Mermaid

 sequenceDiagram
 participant U as User
 participant H as Hugo
 participant T as Theme runtime
 U->>H: Save content
 H->>T: Render with templates
 T-->>U: Live reload

Math

Inline math: $a^2 + b^2 = c^2$.

Block math:

\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}

Archive and Tags

Sun, 28 Sep 2025 00:00:00 +0000

Table Test

Fri, 26 Sep 2025 00:00:00 +0000

Left	Center	Right
a	b	c
`code`	em	bold

Engineering Principles 2024

Mon, 22 Apr 2024 00:00:00 +0000

Principles

Ship small, ship often.
Prefer boring tech for critical paths.
Tests document intent; keep them readable.
Make rollback easy before adding features.

Notes

These principles are intentionally concise so they can be memorized and debated.

Demo Feature Walkthrough

Thu, 18 Mar 2021 00:00:00 +0000

Why this article exists

This demo post now tracks what should be verified after updating to a newer theme release.

Verification flow

Confirm multilingual pages can be reached from the language switcher.
Confirm listing pages support search and tag filtering.
Confirm shortcodes on content (toc, tags, recent-posts) render correctly.
Confirm interactive features: copy/soft-wrap on code blocks, Mermaid, KaTeX, and PhotoSwipe.
Confirm three-way theme toggle works: Light (sun) → Dark (moon) → Retro (gamepad) → Light. Retro mode should show NES pixel styling with deep-blue background and pixel font headings.

Expected config

params.mainSections includes your publishing section (demo uses posts).
outputs.home includes JSON for search indexing.

Optional checks

Use translationKey on related pages to keep language variants linked.
Keep tags concise; they power tag filtering in list views.

Reference

https://gohugo.io/content-management/multilingual/