Posts on Liquid Stack

Welcome to Liquid Stack: New Theme Features

Sun, 02 Aug 2026 19:40:00 +0200

Liquid Stack is built on Hugo Theme Stack v4.0.3. It keeps Stack’s blogging foundation and expands it through a visual system, homepage widgets, presentation pages, and management tools into a complete personal-site starter.

Select Use this template on GitHub, replace the sample identity and content, and start from a working framework.

Get started

Replace the site identity

Update the site title, URL, sidebar copy, and social links in hugo.yaml, then replace the sample avatar, logo, and social-preview image under static/img/liquid-stack/ with your own assets.

Store each article in its own directory under content/post/. English posts use index.md, with a Simplified Chinese translation in index.zh.md beside it. Keep the slug stable after publishing so existing links continue to work.

Connect services when needed

The public starter is not connected to personal comment, analytics, or deployment accounts. Sveltia CMS, Waline, page views, and management links keep their complete framework and can be enabled with your own repository, service endpoints, and public URLs.

Visual design

Liquid Glass inspiration

Liquid Stack’s largest update is its visual design. Inspired by Apple’s Liquid Glass design language, it adopts the ideas that translate well to the web, including translucent material, clear content layers, light and dark adaptation, and gentle transformation.

Management overlays and focused photo views use translucency and background blur. Navigation, shortcuts, and controls form a functional layer above the content. Soft shadows and subtle tonal changes define card boundaries, while light and dark modes tune the canvas, surfaces, and text independently. Hover, expansion, and entrance motion keep attention on the active content.

Rounded-corner hierarchy

Different corner sizes communicate the scale and role of each element.

28-pixel large corners appear on homepage widgets, article cards, dashboard panels, the launchpad, and photo-wall content
24 to 25-pixel medium corners appear on the management menu, compact information panels, and mobile cards
18 to 19-pixel small corners appear on application previews, icon containers, and smaller content modules
Pill corners appear on selected sidebar items, tags, buttons, language controls, and the dark-mode switch
Circular outlines are used for avatars, the emoji badge, and world clocks

This hierarchy keeps large surfaces soft and complete while small controls remain precise.

Icon theme

The sidebar, homepage widgets, management menu, article actions, and dashboard use Lucide as their shared lightweight line-icon system. Related actions use consistent stroke weight, sizing, and spacing, while selected states rely on background and colour changes throughout the site.

Main colours

Light mode uses a pale grey-lavender canvas #f5f5fa, white cards, deep blue-grey accents #34495e, and soft grey body text #707070
Dark mode uses a deep grey canvas #303030, charcoal cards #424242, and an off-white accent #ecf0f1
Functional accents use small amounts of orange, blue, purple, and green in the world clock and dashboard statuses without changing the neutral foundation

Homepage widgets

A profile widget at the top of the homepage presents the avatar, greeting, site description, and social links. Its text, image, and links can be replaced while keeping the component structure.

Feature shortcut cards

Shortcut cards lead to the launchpad, About page, dashboard, and photo wall while previewing application icons or gallery content. Replacing their source data automatically updates the previews, and the complete blog feed remains below them.

Stack’s search, archives, categories, and tag-cloud widgets remain available with Liquid Stack’s card, icon, and spacing treatment.

World clocks

Two analogue world clocks show the visitor’s local time and the configured site time, calculate the difference automatically, and allow the site time zone to be changed. The browser supplies the visitor’s local zone without requiring manual selection.

Content and reading

Blog content structure

Articles, archives, categories, tags, related posts, the table of contents, and full-text search continue to use Stack’s content model, so existing Hugo posts remain compatible. Liquid Stack gives article cards, taxonomy labels, metadata, and the table of contents a consistent visual treatment.

Localized dates

Post lists, article pages, and archive lists format dates using the visitor’s browser region. Systems using year-month-day, day-month-year, or month-day-year therefore see their familiar order while the page retains a standard machine-readable date.

Article pages add print, copy-link, and system-share actions. Chinese pages support Weibo, QQ, and X; English pages support X, Reddit, LinkedIn, WhatsApp, and email. Printed articles include author and source attribution.

Automatic language switching

English and Simplified Chinese share the same homepage, sidebar, articles, launchpad, photo wall, About page, and dashboard layouts.

On a first visit, the site reads the browser’s preferred language. A Chinese-language browser opens the matching Chinese page automatically. A manual choice in the sidebar is saved for later visits, and switching language from an article opens the translation of that same article whenever it is available.

Visitors using another browser language receive a small translation suggestion. Code blocks and other technical text are protected from automatic translation so commands and examples remain intact.

Search, 404, and sitemaps

The 404 page converts an invalid path into a search query and presents the search interface instead of stopping at an error message.

Human-readable English and Chinese sitemaps are included alongside multilingual XML sitemaps, helping both visitors and search engines discover content.

Projects, photos, and the About page

Project launchpad

The launchpad presents software, creative work, research projects, or useful links. Each entry can define bilingual names, an icon, preview image, related article, and repository. Selecting an icon opens an application preview before the full article.

The public starter includes complete examples. Replacing project data and images updates both the launchpad and its homepage widget.

Interactive photo wall

The photo wall supports portrait and landscape images without forcing one crop. Visitors can rearrange photos by dragging them and open a focused view; the arrangement is stored in the current browser.

It works for photography, travel, design work, events, and project screenshots. Replacing photo-wall data also updates the homepage gallery preview.

About page

The About page keeps its entrance animation, timeline, floating menu, and section layout. A fictional résumé demonstrates the design without limiting how the page can be used.

It can become a personal introduction, site story, team page, portfolio history, or formal résumé without rebuilding the layout and motion.

Management, statistics, and interaction

The emoji badge beside the avatar opens a management menu for the CMS, comment moderation, backlink applications, Cloudflare Pages, search consoles, analytics, and deployment platforms. Its entries come from a data file and can be replaced with other tools and addresses.

Sveltia CMS

Sveltia CMS remains available at /admin/. After connecting a GitHub repository, it can create and edit bilingual posts, categories, launchpad projects, and photo-wall content from the browser.

The public starter includes the CMS framework and generic configuration without connecting the original author’s private services or credentials.

Site dashboard

The dashboard derives post counts, total words, days online, category distribution, popular tags, publishing habits, and an annual heatmap from Hugo content. It also presents the configured Hugo, Stack, deployment, comments, and CMS status.

These summaries work without an external analytics platform.

Waline comments

Comments continue to use Stack’s Waline support with theme-matched cards, typography, and dark mode. The section adds guidance, page-view and comment totals, reply notifications, and reactions, while the footer can show site-wide views.

Users only need to provide their own Waline endpoint; the demo does not connect to a personal comment database.

Friend links and applications

The friend-link module expands the compact link list into site cards, exchange rules, application and contact actions, and an optional embedded form. A separate platform section can link to GitHub, portfolios, or other public profiles.

Open-source template and customization

Stack remains the foundation

Liquid Stack continues to use the official Stack v4.0.3 release as its blog foundation. Project-level Hugo overrides maintain the additions without editing the official files under themes/hugo-theme-stack/, keeping the upstream structure and Liquid Stack extensions separate.

Generic examples and privacy

The public starter keeps the pages, homepage widgets, management tools, and bilingual examples without publishing the original author’s private posts, real résumé, avatar, or service credentials. Sample projects, images, logos, comments, and management links can all be replaced.

Suitable sites

Liquid Stack is suitable for personal blogs, digital gardens, developer or designer portfolios, project showcases, photography journals, and bilingual sites that need a browser-based CMS. Explore the live demo, then select Use this template on GitHub to create your own copy.

Configure Comments, Backlink Forms, and Email Templates

Sun, 02 Aug 2026 00:00:00 +0000

This guide introduces Liquid Stack’s comment demonstration, backlink application form, and bilingual email templates, then explains how to connect each example to your own services.

Comment demo mode

The public Demo enables comment demo mode by default. Article pages show a comment composer, engagement totals, and four sample comments without connecting to a Waline backend database.

The homepage footer shows a static site-view count marked as a demo value. Every page also shows a sample runtime of 365 days. After connecting Waline and changing demoMode to false, the homepage can read the real site-wide count from your Waline service. Add params.footer.launchDate to calculate the real runtime.

Text entered in the demo composer is not submitted or recorded by this site. Do not enter a real email address, contact details, or other sensitive information.

Demo mode is controlled in hugo.yaml.

1
2
3
4
5
6
7


params:
 comments:
 enabled: true
 provider: waline
 waline:
 serverURL: https://example.com/waline
 demoMode: true

Connect your own Waline service

Deploy a server by following the official Waline guide, then update two values.

Replace serverURL with your Waline endpoint
Change demoMode to false

Liquid Stack will then load real comments, page views, comment totals, reply notifications, and reactions. Keep server credentials, administrator tokens, and mail secrets in deployment environment variables.

For the basic integration steps, continue with Configure Waline Comments.

Backlink application system

The Demo links page includes a Microsoft Forms backlink application example.

The demo form is provided for reference. The Demo site does not retain the entries or use them for a formal backlink review. Microsoft provides the external form, so review its privacy information and avoid submitting real sensitive information.

If the structure suits your site, use the copy link to create your own form, then replace the title, site details, privacy notice, notification rules, and review flow.

The links-page buttons and embed URL live under content/page/links/. The management-menu entry is configured in data/management_links.yaml.

Bilingual email templates

Five sanitized responsive HTML email files and a Waline notification subject file are available under examples/email-templates.

Reader reply in English
Reader reply in Simplified Chinese
Backlink approval in English
Backlink approval in Simplified Chinese

Waline reply notification

waline-comment-reply-bilingual.html is a ready-to-adapt bilingual reply-notification body for Waline. waline-comment-reply-subject.txt provides the matching subject line. The template detects /zh/ in the post URL to select Simplified Chinese; other pages use English.

It preserves the Waline variables for the original commenter, reply author, reply body, and post URL. Replace [SITE NAME] and [站点名称] with your own public site name, then paste the body and subject into your Waline mail configuration. Do not replace the self, parent, or site variables.

Personal names, private branding, and personal-site URLs have been removed and replaced with bracketed placeholders. Before sending, replace the site name, brand, URLs, recipient name, reply body, and signature.

The HTML can be adapted for Waline mail workflows, manual replies, email automation, or backlink-review notifications. Providers use different HTML and variable conventions, so send a test message and check mobile layout, links, and dark-mode rendering before production use.

Pre-launch checklist

Disable demoMode before testing real comment submission and notifications
Copy the backlink form into your own Microsoft account
Update the form privacy notice and review rules
Replace every bracketed placeholder in the email templates
Never commit access tokens, administrator URLs, or mail secrets to a public repository

Once these settings are complete, comments, backlink applications, and email notifications can run through your own services while preserving Liquid Stack’s interface and bilingual structure.

Designing a Bilingual Publishing Workflow

Tue, 28 Jul 2026 00:00:00 +0000

Keeping language variants in one page bundle makes translations easier to review, keeps shared images in one place, and lets Hugo expose language switching automatically.

Customize Liquid Stack Styles

Sat, 25 Jul 2026 00:00:00 +0000

This guide explains how to adjust Liquid Stack’s visual style without breaking upgrades or responsive layouts.

Start with configuration

Begin with the title, sidebar subtitle, avatar, and color settings in hugo.yaml. Prefer front matter and data/ files for content changes instead of editing theme source directly.

Add scoped styles

Site-level styles live in assets/scss/custom.scss. Give new components clear class names and avoid broad element overrides, which can unintentionally affect posts, menus, and mobile layouts.

Preview every change

After changing color, spacing, or type, check the home page, posts, photo wall, launchpad, and dark mode. Finish with a full Hugo build to catch missing resources and template errors.

A Guide to Hugo Shortcodes

Fri, 24 Jul 2026 00:00:00 +0000

Shortcodes are Hugo’s way to insert reusable structures into Markdown, making them useful for callouts, embeds, and repeated layouts.

Start with existing Shortcodes

Browse layouts/shortcodes/ to see what the theme already provides. Reuse existing components before adding one-off HTML for a single article.

When to use one

Use a Shortcode when content needs a fixed structure, recurs across posts, or must render as HTML. Keep ordinary paragraphs, lists, and code blocks in Markdown.

Test the result

Preview the post on desktop and mobile after adding a Shortcode. If it uses an image, video, or external URL, check the resource path and its failure state too.

Start Writing: Markdown and Bilingual Posts

Thu, 23 Jul 2026 00:00:00 +0000

Liquid Stack uses Hugo’s multilingual content structure: Chinese and English versions of one post live in the same directory.

Create a post directory

Create index.md and index.zh.md under content/post/your-slug/. Give both files the same slug so the language switcher recognises them as translations of one post.

Write useful front matter

Every post should have a title, description, date, category, and tags. Localise the title and description for each audience rather than translating word by word; keep product names, commands, and code unchanged.

Keep it maintainable

Store images in static/img/your-slug/ and use site-absolute paths such as /img/your-slug/featured.png. Before release, check links, images, and categories in both languages.

Configure Waline Comments

Wed, 22 Jul 2026 00:00:00 +0000

Liquid Stack keeps the Waline comment component, while its example URL is not connected to a real backend.

Prepare a server

Deploy your own service by following the official Waline documentation. When you have its URL, replace the sample value at params.comments.waline.serverURL in hugo.yaml.

Enable or disable comments

Set params.comments.enabled to true to enable comments. Individual posts can still use comments: false, which is useful for privacy pages, documentation, or announcements.

Test before release

Check that the comment box appears below a post locally, then test submission, moderation, and notifications after deployment. Keep server URLs, tokens, and administrator settings in your own environment rather than in a public theme example.

Quick Start: Deploy Liquid Stack

Mon, 20 Jul 2026 00:00:00 +0000

This guide shows how to use Liquid Stack as the starting point for your own site and publish a first version.

Copy the project

Use GitHub’s template flow or copy this repository. Then edit the title, subtitle, avatar path, and GitHub links in hugo.yaml. Do not edit public/ or resources/; Hugo regenerates them during a build.

Preview locally

Install Hugo Extended and run hugo server -D from the project root. Open the local address shown in the terminal. Markdown, configuration, and style changes refresh automatically.

Check before publishing

Run hugo --minify --cleanDestinationDir --ignoreCache. Confirm that the home page, posts, photo wall, launchpad, and admin page open correctly before pushing source files to your repository. The generated public/ directory can be published to Cloudflare Pages or another static host.

Next step

Replace the sample values in hugo.yaml, then write your first post. The launchpad, photo wall, links, and comment configuration are all kept for you to adapt.