https://caed2eb5.hugo-theme-liquid-demo.pages.dev/categories/development/A privacy-safe demo of Hugo Theme Liquid for layout, typography, and progressive glass surfaces.Hugo -- gohugo.iozh-CNhttps://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/basic-markdown-test/Fri, 28 Aug 2026 00:00:00 +0000https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/basic-markdown-test/An H1 Inside the Article This page is a deliberately ordinary Markdown document. It gives a theme a dependable baseline: a short sentence, a paragraph with enough texture to wrap across several lines, and a longer paragraph that lets us see whether the measure remains comfortable as the viewport changes. A good reading surface should make simple content feel unremarkable. Here is a normal paragraph with bold text, italic text, bold italic text, struck-through text, and inline code. The code is not decoration: it should sit on the same baseline as the words around it without making the line jump or becoming impossible to select. https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/designing-software-for-humans/Thu, 27 Aug 2026 00:00:00 +0000https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/designing-software-for-humans/Introduction Software is often described as a machine: inputs go in, outputs come out, and the interesting work happens somewhere behind an interface. That metaphor is useful for reasoning about reliability, but it leaves out the person who has to decide what the input means, notice whether the output is trustworthy, and recover when something goes wrong. Most software is not used by a perfectly attentive operator. It is used by someone carrying a question, a deadline, a half-remembered instruction, or a cup of coffee that has already gone cold. https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/code-highlighting-showcase/Tue, 25 Aug 2026 00:00:00 +0000https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/code-highlighting-showcase/How to Read This Page The examples are intentionally small. Their purpose is to reveal whether code blocks have the right font, padding, contrast, border, and scroll behavior—not to teach each language. Inline tokens such as hugo, content/posts/example.md, --accent-color, and npm run build should sit naturally inside paragraphs. HTML <article class="post-card"> <h2>Readable by default</h2> <p>Structure gives the stylesheet something meaningful to style.</p> </article> CSS .prose-article { max-width: 70ch; margin-inline: auto; overflow-wrap: anywhere; } @media (prefers-color-scheme: dark) { .prose-article { color: #edf4f1; } } JavaScript const headings = document.querySelectorAll('article h2, article h3'); headings.forEach((heading) => { heading.dataset.ready = 'true'; }); TypeScript type Article = { title: string; tags: string[]; published: Date }; function label(article: Article): string { return `${article.title} · ${article.tags.length} tags`; } Go package main import "fmt" func main() { for _, word := range []string{"calm", "clear", "useful"} { fmt.Println(word) } } Python from dataclasses import dataclass @dataclass class Note: title: str published: bool = True print(Note("A small content model")) Rust fn main() { let pages = ["home", "posts", "about"]; for page in pages { println!("/{page}/"); } } Bash #!/usr/bin/env bash set -euo pipefail hugo --gc --minify JSON { "title": "Code Showcase", "draft": false, "features": ["highlighting", "overflow", "contrast"] } YAML params: codeTheme: quiet showLineNumbers: false allowHorizontalScroll: true TOML baseURL = "https://example.test/" title = "A small documentation site" enableRobotsTXT = true Markdown ## A heading Write a paragraph with **emphasis** and `inline code`. SQL SELECT category, COUNT(*) AS post_count FROM content_index WHERE published_at <= CURRENT_DATE GROUP BY category ORDER BY post_count DESC; Long Code Line The next line is intentionally unreasonable. It should scroll inside the code block rather than widen the page or create horizontal overflow on the document itself. https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/table-rendering-showcase/Fri, 21 Aug 2026 00:00:00 +0000https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/table-rendering-showcase/Small Table Feature Status Notes Typography Ready Uses real prose Taxonomy Ready Shared terms are intentional Pagination Ready Six cards per page Medium Table The medium table has enough columns to test a normal desktop layout without becoming an artificial spreadsheet. Component Owner Input Output Mobile behavior Review date Risk Article card Theme Front matter Linked preview Stack content 2026-08-21 Low TOC Browser Headings Anchored links Collapse or scroll 2026-08-22 Medium Code block Goldmark Fence language Highlighted code Local scroll 2026-08-23 Medium Taxonomy Hugo Tags and categories Term pages Wrap links 2026-08-24 Low RSS Hugo Published pages XML feed N/A 2026-08-25 Low Wide Table This table intentionally has twelve columns. On a small viewport, the table itself may scroll horizontally, but it should not push the entire page beyond the viewport. https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/typography-showcase/Wed, 19 Aug 2026 00:00:00 +0000https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/typography-showcase/Typography at a Glance Short Heading A very short heading is useful because it reveals whether the heading has too much padding or an awkward minimum width. Understanding How a Long Heading Behaves When It Needs to Wrap Across Several Lines in a Narrow Reading Column This paragraph follows a long heading so that the relationship between heading width, line height, and following content is easy to inspect. The Six Heading Levels Heading Four Heading Five Heading Six The visual steps between levels should feel intentional. The smallest heading should not become indistinguishable from bold body text, and the largest should not dominate the article merely because the viewport is wide. https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/table-of-contents-stress-test/Mon, 17 Aug 2026 00:00:00 +0000https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/table-of-contents-stress-test/Section 1: Orientation Section 1.1: What This Fixture Measures The heading tree is intentionally uneven so that indentation and active-link behavior can be inspected without relying on a perfectly regular outline. Section 1.2: The First Long Heading for a Narrow Panel This heading is long enough to wrap in a compact table-of-contents column. Section 2: Architecture Section 2.1: A Small Structural Decision Every level should remain identifiable even when the text is short. https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/categories-and-tags-test/Sat, 15 Aug 2026 00:00:00 +0000https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/categories-and-tags-test/Shared Terms Are the Test This article deliberately shares terms with several other test posts. A taxonomy page is more useful when it contains a small population with different counts, not when every term appears exactly once. The primary categories for this dataset are Development, Design, and Hugo. The post also uses tags for Hugo, CSS, Typography, Testing, and Static Site. What to Inspect Category links should remain readable when several appear together. Tag chips should wrap without widening the page. Taxonomy pages should show more than one post for shared terms. A term with a space, such as Web Development, should receive a stable URL. Counts and chronological order should make sense after new posts are added. A Small Editorial Note Taxonomy is metadata, but it still participates in the reading experience. It tells a visitor how a collection is shaped: a few broad shelves, a few recurring interests, and enough overlap to make exploration worthwhile. The everything showcase reuses this vocabulary so the aggregate pages feel like a real site rather than a set of isolated fixtures. https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/content-edge-cases/Thu, 13 Aug 2026 00:00:00 +0000https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/content-edge-cases/Very Long Word ThisIsAnExtremelyLongUnbrokenStringDesignedToTestWhetherTheThemeCanPreventHorizontalPageOverflowOnVerySmallMobileDevicesWithoutDestroyingTheEntireLayout The string above has no natural break opportunities. The page should remain usable, and any wrapping strategy should preserve the fact that it is one token. Long URL Here is a long URL text for checking link boundaries: https://example.com/documentation/typography/responsive-layout/overflow-testing/very-long-resource-name-that-needs-a-safe-break-point. Long Inline Code The following token is intentionally too long for a narrow phone: someExtremelyLongFunctionNameWithManyArgumentsAndNoNaturalLineBreakOpportunities({primaryColor: "#d97b5f", secondaryColor: "#c8dbd4", enableLiquidGlass: true, preserveWhitespace: false}). A Heading That Is More Than One Hundred Characters Long and Should Wrap Without Creating a Horizontal Scrollbar for the Entire Article Only a short sentence follows this heading. That combination helps reveal whether heading margins and line-height remain proportional when a title occupies several lines. https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/%E4%B8%AD%E6%96%87%E4%B8%8E-cjk-%E6%8E%92%E7%89%88%E6%B5%8B%E8%AF%95/Tue, 11 Aug 2026 00:00:00 +0000https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/%E4%B8%AD%E6%96%87%E4%B8%8E-cjk-%E6%8E%92%E7%89%88%E6%B5%8B%E8%AF%95/为什么需要中文排版测试 中文文章的阅读节奏，和英文文章并不完全相同。汉字通常没有空格作为天然的分词边界，标点符号也有自己的全角宽度与避头尾规则。当一个主题只用英文短句测试时，很多问题不会出现；一旦标题变长、段落变密，或者中英文术语同时出现，字体、行高、字距和容器宽度之间的关系就会变得明显。 https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/everything-showcase/Fri, 07 Aug 2026 00:00:00 +0000https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/everything-showcase/The Surface of a Modern Hugo Theme A modern Hugo theme begins with an old-fashioned question: what should this page help a person do? The answer might be read a careful essay, find a related note, understand when something was published, or decide whether a link is worth opening. Visual polish matters, especially when a theme uses soft translucency and layered surfaces, but polish is most convincing when it follows a clear content structure.