Posts on Liquid Stack

欢迎使用 Liquid Stack：主题新增功能

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

Liquid Stack 基于 Hugo Theme Stack v4.0.3 制作。它保留 Stack 原有的博客功能，再从视觉、主页组件、内容展示和网站管理几个模块，将博客扩展成一套完整的个人网站模板。

通过 GitHub 的 Use this template 创建仓库后，只需替换站点名称、头像、介绍和示例内容，就可以从现成框架开始使用。

开始使用

替换站点信息

在 hugo.yaml 中修改站点名称、网址、侧栏文案和社交链接，再用自己的素材替换 static/img/liquid-stack/ 中的示例头像、Logo 与社交分享图。

每篇文章存放在 content/post/ 下的独立目录。英文文章使用 index.md，简体中文译文使用同一目录下的 index.zh.md。文章发布后应保留稳定的 slug，避免已有链接失效。

按需连接服务

开源示例没有绑定个人评论、分析或部署账号。Sveltia CMS、Waline、访问统计与管理入口均保留完整框架，使用时填写自己的仓库、服务地址和公开链接即可。

视觉设计

Liquid Glass 灵感

Liquid Stack 最大的更新是整套视觉设计。主题以苹果的 Liquid Glass 设计语言为灵感，吸收了半透明材质、清晰内容层级、环境明暗适配和柔和形变等特点。

管理弹层和照片聚焦背景加入半透明与模糊效果，导航、快捷入口和按钮形成浮在内容之上的功能层。卡片使用轻柔阴影与细微明暗变化保持边界，页面在浅色与深色模式下分别调整背景、卡片和文字。悬停、展开与页面进入动画使用平滑过渡，让视觉变化始终围绕当前内容展开。

圆角层级

主题用不同大小的圆角区分页面层级。

28 像素大圆角 用于主页组件、文章卡片、仪表盘面板、启动台主体和照片墙内容
24 至 25 像素中圆角 用于管理菜单、较紧凑的信息面板和移动端卡片
18 至 19 像素小圆角 用于应用预览、图标容器和较小的内容模块
胶囊圆角 用于侧栏选中状态、标签、按钮、语言切换和深色模式开关
圆形轮廓 用于头像、表情角标和世界时钟

这套层级让大卡片保持柔和完整，小控件仍然清楚利落。

图标主题

侧栏、主页组件、管理菜单、文章操作和仪表盘以 Lucide 作为统一的轻量线性图标体系。相近功能使用一致的线宽、尺寸和留白，选中状态通过背景与颜色变化表达，整个网站的功能图标保持同一种视觉语言。

主要配色

浅色模式 使用浅灰紫页面背景 #f5f5fa、白色卡片和深蓝灰强调色 #34495e，正文使用柔和灰色 #707070
深色模式 使用深灰页面背景 #303030、炭灰卡片 #424242 和偏白强调色 #ecf0f1
功能点缀 在世界时钟和仪表盘状态中少量使用橙色、蓝色、紫色与绿色，帮助识别信息，不改变整体的中性色基调

主页组件

个人信息组件

主页顶部加入个人信息组件，用来展示头像、欢迎语、网站介绍和社交链接。使用者可以替换文字、图片和链接，组件结构会继续保留。

功能快捷卡片

快捷卡片连接启动台、关于页面、仪表盘和照片墙，并直接预览应用图标或照片内容。替换对应数据后，首页预览会自动更新。卡片之后继续显示完整的博客文章列表。

内容导航组件

搜索、归档、分类和标签云等 Stack 小组件继续保留，并统一换成 Liquid Stack 的卡片、图标和间距样式。

世界时钟

世界时钟使用两只模拟时钟显示访客所在地时间与站点设置的时间，自动计算时差，并支持替换站点时区。访客不需要手动选择地区，浏览器会自动提供本地时区。

内容与阅读体验

博客内容结构

文章、归档、分类、标签、相关文章、目录和全文搜索仍然使用 Stack 的内容结构，因此原有 Hugo 文章可以继续使用。Liquid Stack 重新统一了文章卡片、分类标签、目录和元信息的视觉样式。

日期本地化

文章列表、文章页面和归档列表会按照访客浏览器的地区设置显示日期。使用年月日、日月年或月日年的系统环境会看到对应顺序，同时页面继续保留标准日期数据供搜索引擎读取。

打印与文章分享

文章页增加打印、复制链接和系统分享。中文页面支持微博、QQ 和 X。英文页面支持 X、Reddit、LinkedIn、WhatsApp 与邮件。打印文章时会自动附上作者与文章来源，便于保存或转发。

语言自动切换

英文与简体中文使用同一套首页、侧栏、文章、启动台、照片墙、关于页面和仪表盘结构。

首次访问时，网站会读取浏览器的首选语言。中文浏览器会自动进入当前页面对应的中文版。访客在侧栏手动选择语言后，网站会保存这一偏好，之后继续使用所选语言。访客从文章页切换语言时，网站会优先打开同一篇文章的译文。

使用其他语言的访客会看到简洁的网页翻译提示。代码块和技术文字会受到保护，避免浏览器翻译修改命令与示例。

搜索、404 与站点地图

若访客进入错误地址，404 页面会把路径转换成搜索关键词，并直接显示搜索入口，帮助访客继续寻找内容。

主题还提供面向读者的中英文网站地图，以及供搜索引擎使用的多语言 XML sitemap，让普通访客和搜索引擎都能找到站内内容。

项目、照片与关于页面

项目启动台

启动台用于展示软件、作品、研究项目或常用链接。每个项目可以设置中英文名称、图标、预览图、介绍文章和仓库地址。点击图标后先查看应用预览，再进入对应文章。

开源版保留完整示例。替换项目数据与图片后，启动台和首页中的启动台小组件都会同步更新。

可交互照片墙

照片墙支持横图与竖图，不会把所有照片强制裁成同一种比例。访客可以拖动照片改变排列，也可以点击放大查看，排列结果会保存在当前浏览器中。

它既可以展示摄影与旅行记录，也适合作品、活动照片和项目截图。替换照片墙数据后，首页照片预览也会自动变化。

关于页面

关于页面保留进入动画、时间线、浮动菜单和分区结构。开源版采用虚构简历作为排版示例，但页面并不限制用途。

使用者可以把它改成个人介绍、网站故事、团队页面、作品经历或正式简历，无需重新制作布局与动画。

管理、统计与互动

网站管理菜单

头像旁的表情角标可以打开网站管理菜单，集中进入内容后台、评论管理、友链申请、Cloudflare Pages、搜索控制台、数据分析与部署平台。菜单项目通过数据文件配置，可以替换成自己的工具和地址。

Sveltia CMS 内容后台

/admin/ 保留 Sveltia CMS。连接自己的 GitHub 仓库后，可以直接在网页中创建和编辑双语文章、分类、启动台项目和照片墙内容。

开源版只提供后台框架与通用配置，不会连接原作者的私人服务或凭据。

网站仪表盘

仪表盘会根据 Hugo 内容自动生成文章数、总字数、运行天数、分类分布、热门标签、发布时间习惯和年度发布热力图，并显示 Hugo、Stack、部署、评论与 CMS 状态。

这些数据来自网站内容本身，不要求先接入外部分析平台。

Waline 评论

评论继续使用 Stack 支持的 Waline，并换成与主题一致的卡片、字体和深色模式样式。评论区同时显示评论提示、浏览量、评论数、回复通知和文章反应，页脚也可以显示全站浏览量。

使用者只需替换自己的 Waline 服务地址。开源演示不会绑定个人评论数据库。

友链与申请

友链模块将普通链接列表扩展成站点卡片、交换规则、申请入口、联系入口和可选的嵌入式表单。个人平台区域则可以放置 GitHub、作品主页或其他公开账号。

开源模板与自定义

保留 Stack 博客基础

Liquid Stack 仍然使用官方 Stack v4.0.3 作为博客基础。主题更新通过 Hugo 的项目覆盖方式维护，没有直接修改 themes/hugo-theme-stack/ 中的官方文件，因此 Stack 原有结构与 Liquid Stack 扩展可以分别维护。

通用示例与隐私处理

开源版保留完整页面、主页组件、管理工具和双语示例，但不会包含原作者的私人文章、真实简历、个人头像或服务密钥。示例项目、图片、Logo、评论和管理地址都可以替换成自己的内容。

使用场景

这套模板适合个人博客、数字花园、开发者或设计师作品集、项目展示、摄影记录，以及需要网页管理后台的双语网站。可以先查看在线 Demo，再使用 GitHub 的 Use this template 创建自己的副本。

配置评论、友链申请与邮件模板

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

本文介绍 Liquid Stack 提供的评论演示、友链申请表单与双语邮件模板，并说明如何把这些示例连接到自己的服务。

评论区演示模式

开源 Demo 默认启用评论演示模式。文章底部会显示评论输入框、互动数字和四条示例评论，页面不会连接 Waline 后端数据库。

主页页脚显示带有演示说明的全站浏览量静态数值，所有页面同时显示 365 天示意运行时间。接入 Waline 并将 demoMode 改为 false 后，主页可以从自己的 Waline 服务读取真实全站浏览量。添加 params.footer.launchDate 后，页脚会计算实际运行天数。

在演示框中输入的内容不会被本站提交或记录。请勿在演示页面填写真实邮箱、联系方式或其他敏感信息。

演示模式由 hugo.yaml 控制。

1
2
3
4
5
6
7


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

接入自己的 Waline

先按照 Waline 官方文档部署服务端，再完成下面两项配置。

将 serverURL 替换为自己的 Waline 服务地址
将 demoMode 改为 false

完成后，Liquid Stack 会加载真实评论、浏览量、评论数、回复通知和文章反应。服务端凭据、管理员令牌和邮件密钥应保存在部署平台的环境变量中。

更基础的评论接入步骤可继续阅读配置 Waline 评论区。

友链申请系统

Demo 的链接页面已经接入一份 Microsoft Forms 友链申请示例。

演示表单仅供参考。Demo 网站不会保存这里的填写内容，也不会将其用于正式友链审核。Microsoft Forms 由微软提供，打开外部表单前仍应查看其隐私说明，并避免提交真实敏感信息。

喜欢这套申请结构时，可以使用复制链接创建自己的表单，再替换标题、站点资料、隐私提示、通知规则和审核流程。

友链页面的按钮与嵌入地址位于 content/page/links/，网站管理菜单中的入口位于 data/management_links.yaml。

双语邮件模板

仓库在 examples/email-templates 中提供五份已去敏的响应式 HTML 邮件和一份 Waline 通知主题文件。

中文读者来信回复
英文读者来信回复
中文友链申请通过通知
英文友链申请通过通知

Waline 评论回复通知

waline-comment-reply-bilingual.html 是一份可直接改用的 Waline 中英双语回复通知正文，waline-comment-reply-subject.txt 提供对应主题。模板会根据文章 URL 是否包含 /zh/ 选择简体中文，其余页面显示英文。

模板保留评论者、回复者、回复内容和文章链接所需的 Waline 变量。将 [SITE NAME] 与 [站点名称] 替换为自己的公开站点名称后，再把正文和主题粘贴到 Waline 邮件配置中。不要替换 self、parent 与 site 变量。

模板已经移除真实姓名、个人网站和身份信息，统一改成方括号占位符。发送前需要替换网站名称、品牌、网址、收件人称呼、回复正文和署名。

这些 HTML 可以用于 Waline 邮件工作流、人工回复、自动化邮件服务或友链审核通知。不同邮件服务对 HTML 和变量语法的要求不同，接入前应先发送测试邮件，检查移动端布局、链接和深色模式显示。

上线前检查

关闭 demoMode 后再测试真实评论提交与通知
将友链表单复制到自己的 Microsoft 账户
更新表单中的隐私说明和审核规则
替换邮件模板中的全部方括号占位符
不要把访问令牌、管理员地址和邮件密钥提交到公开仓库

完成这些设置后，评论、友链申请与通知邮件就会进入自己的服务流程，主题界面和双语结构可以继续保留。

设计双语发布工作流

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

将不同语言版本放进同一个页面包，能让译文更易于校对，也能复用图片，并让 Hugo 自动提供语言切换。

样式自定义指南

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

本指南介绍如何在不破坏主题升级与响应式布局的前提下，调整 Liquid Stack 的视觉风格。

从配置开始

先在 hugo.yaml 修改标题、侧栏简介、头像和颜色方案。内容层的改动应优先放在页面前置数据或 data/ 文件中，而不是直接改主题源文件。

添加局部样式

站点级样式位于 assets/scss/custom.scss。为新组件使用明确的类名，并避免覆盖通用 HTML 标签；这样可以减少对文章、菜单和移动端布局的连带影响。

每次改动都预览

每次修改颜色、间距或字体后，都检查首页、文章、相册、启动台以及深色模式。完成后运行完整 Hugo 构建，确保没有遗漏的资源或模板错误。

Shortcodes 使用指南

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

Shortcodes 是 Hugo 在 Markdown 中插入可复用结构的方式，适合提示框、嵌入内容和重复版式。

先看现有 Shortcodes

浏览 layouts/shortcodes/，了解主题已经提供的能力。优先复用现有组件，避免为一次性排版复制大段 HTML。

什么时候使用

当一段内容需要固定结构、会在多篇文章中重复，或必须渲染为 HTML 时，Shortcode 比手写重复代码更合适。普通段落、列表和代码块仍然直接使用 Markdown。

测试渲染结果

加入 Shortcode 后用本地预览检查桌面与移动端。若它依赖图片、视频或外部链接，也要检查资源路径与加载失败时的表现。

开始写博客：Markdown 与双语文章

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

Liquid Stack 使用 Hugo 的多语言内容结构：同一篇文章的中英文版本放在同一个目录。

创建文章目录

在 content/post/文章-slug/ 新建 index.md 和 index.zh.md。两个文件使用同一个 slug，这样语言切换器能识别它们是一对翻译文章。

写好前置数据

每篇文章至少应有标题、简介、日期、分类和标签。中文与英文应分别本地化标题和简介，而不是逐字翻译；产品名、命令和代码保持原样。

保持可维护

文章图片放在 static/img/文章-slug/，并用 /img/文章-slug/featured.png 一类的站点绝对路径引用。发布前检查两种语言是否都有正确链接、图片和分类。

配置 Waline 评论区

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

Liquid Stack 已保留 Waline 评论组件；示例地址不会连接到任何真实后端。

准备服务端

先按照 Waline 官方文档部署自己的服务端。获得服务地址后，在 hugo.yaml 的 params.comments.waline.serverURL 中替换示例 URL。

启用与关闭

将 params.comments.enabled 设为 true 可启用评论。单篇文章也可以在前置数据中设为 comments: false，例如隐私页、说明页或不希望讨论的公告。

发布前测试

本地预览时检查文章底部是否出现评论框；发布后再测试提交、审核和邮件通知。服务器地址、访问令牌和管理员配置应放在自己的部署环境中，不应保留在公开主题示例里。

快速开始：部署 Liquid Stack

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

本文介绍如何把 Liquid Stack 作为自己的博客起点，并发布第一个可访问的版本。

复制项目

使用 GitHub 的模板功能或复制本仓库。随后在 hugo.yaml 中修改站点标题、简介、头像路径和 GitHub 链接。不要编辑 public/ 或 resources/，它们会在构建时重新生成。

本地预览

安装 Hugo Extended 后，在项目根目录运行 hugo server -D。浏览器打开终端显示的本地地址；保存 Markdown、配置或样式后，预览会自动刷新。

发布前检查

运行 hugo --minify --cleanDestinationDir --ignoreCache。确认首页、文章、相册、启动台和管理页都能打开，再把源文件推送到自己的仓库。生成的 public/ 目录可以发布到 Cloudflare Pages 或其他静态托管平台。

下一步

先替换 hugo.yaml 中的示例信息，再开始写第一篇文章。启动台、相册、链接和评论配置都保留在项目中，可逐项改成自己的内容。