Kuan: A Chinese-first Hugo Theme

Thu, 08 Oct 2026 00:00:00 +0000

Kuan is a Hugo theme designed for writing and reading in Chinese, suitable for personal blogs, columns, and long-form sites. You can view the demo site.

Six theme color palettes, with light, dark, and system display modes.
Article table of contents, progress indicators, image lightboxes, covers, syntax highlighting, full-screen reading, and saved reading positions.
Optional custom fonts, KaTeX math, and Giscus comments.
Filters for long posts, short posts, and posts with images, with navigation by content or format.

GlimpseContent: A Clean Table of Contents Plugin

Tue, 06 Oct 2026 00:00:00 +0000

I packaged the table of contents feature in the bottom-left corner of this site as GlimpseContent. It normally appears as a column of short horizontal lines, showing headings when needed. You can view the formatting example.

Only one JavaScript file and one CSS file are needed.
Lists only second- and third-level headings; shows the corresponding heading on hover and highlights the current section as you scroll.
By default, appears when the page is wider than 800px and the article has more than five headings in total.
Fades in after the page has fully loaded, with support for dark mode and reduced motion preferences.
Smooth scrolling on click; the container, header, and display threshold are configurable.

A Casual Note

Mon, 05 Oct 2026 00:00:00 +0000

Today, I opened the window and noticed that the wind had blown the papers on my desk to the other side. I put a cup on top of them and carried on with what I was doing.

The website is gradually taking shape too. First, make sure the pages can be opened; then slowly write down what I want to say. I don’t have a particularly complete plan yet, so I’ll start with this short piece.

title: A Casual Note
date: 2026-10-05
typora-root-url: ./

Three Small Things to Remember

Drank a cup of warm water.
Tidied my desk.
Added an article to the website.

If I think of something new tomorrow, I’ll come back and add a few more lines.

Emphasis and Pauses

Plain text explains things clearly, bold text emphasizes key points, and italics work well for additional remarks. They can also be combined into bold italics, or you can use ~~strikethrough~~ to leave a trace of an edit.

This sentence is followed by a manual line break.
The next sentence is still in the same paragraph.

A Third-level Heading

Subheadings divide a piece into topics; there is no need to turn every short paragraph into a separate section.

A Fourth-level Heading

Finer levels can be reserved for supporting material.

A Fifth-level Heading

For example, a brief additional note.

A Sixth-level Heading

This is a heading too, though everyday writing rarely needs to go this deep.

Lists, Sequences, and Tasks

An unordered list can contain another level:

Reading
- A chapter of a book
- A paper I haven’t finished reading yet
Notes
- A new idea
- A passage worth keeping

Some things are better written in order:

Open the window to let some fresh air into the room.
Clear the desk, keeping only what I am currently using.
Write down what I most want to remember today.

Not every item on a task list needs to be completed right away:

Write a sample article for the website
Add equations and images
Add a few paragraphs of real notes next time

A Quotation

Simplicity doesn’t mean removing everything; it means making every part easy to read.

White space gives sentences a little room to breathe.

A quotation can contain another short quotation, but there is no need to nest them too deeply.

Organizing a Week in a Table

The data below is fictional and used only to demonstrate formatting; it does not represent real records.

Day	Reading Time (minutes)	A Quick Note
Monday	5	A sentence
Tuesday	8	Two small questions
Wednesday	7	An excerpt
Thursday	12	A new idea
Friday	15	A page of notes
Total	47	Five days of small progress

Markdown: A plain-text format for writing headings, lists, links, and more.
LaTeX: The mathematical markup syntax used for the equations in this article.

Bringing Equations into the Text

Inline equations fit naturally into a sentence, such as $E = mc^2$, or with another pair of delimiters, $a^2 + b^2 = c^2$.

Display equations are useful for slightly longer expressions:

$$ \int_0^1 x^2\,dx = \left[\frac{x^3}{3}\right]_0^1 = \frac{1}{3} $$

A matrix can also be displayed on its own:

\[ A = \begin{pmatrix} 1 & 2 \\ 3 & 4 \end{pmatrix}, \qquad \det(A) = 1 \times 4 - 2 \times 3 = -2 \]

The following multi-line equation calculates the average reading time from the table:

$$ \begin{aligned} T &= 5 + 8 + 7 + 12 + 15 = 47 \\ \bar{t} &= \frac{T}{5} = 9.4\text{ minutes} \end{aligned} $$

Code Needs a Little White Space Too

This Python code produces the same result:

minutes = [5, 8, 7, 12, 15]

total = sum(minutes)
average = total / len(minutes)

print(f"Total time: {total} minutes")
print(f"Daily average: {average:.1f} minutes")

Change the language, and the syntax highlighting changes with it:

const minutes = [5, 8, 7, 12, 15];
const total = minutes.reduce((sum, value) => sum + value, 0);

console.log({
 total,
 average: total / minutes.length
});

A text block without a language label is displayed as written. Dollar signs inside code are not treated as equations:

$This is a piece of text displayed as written$
First line: Reading
Second line: Notes
Third line: Organizing

A Single Image

The image you uploaded is used as an example below. A single image keeps its original proportions and scales with the article width.

Two Images in the Same Paragraph

Two images written consecutively in the same paragraph appear side by side. The same photo is repeated here only to demonstrate the layout.

Five Images in the Same Paragraph

Five images are also written consecutively in the same paragraph, without blank lines between them:

On desktop, they form a row of three followed by a row of two. As the screen narrows, the number of columns decreases automatically. All images keep their original proportions.

A Little Extra Context

Footnotes keep secondary information out of the main text so it does not interrupt reading.¹

Formatting exists to make reading easier. Write what needs to be said clearly, then let headings, paragraphs, images, and equations find their places.

This article demonstrates Markdown formatting. The reading data in the table is fictional, and the images use the uploaded sample photo. ↩︎

KuanZZZ