欢迎使用 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 创建自己的副本。

Stack V4 on Liquid Stack