Liquid Stack 主题现已开源:一套完整的 Hugo 个人网站起步模板

我已将本博客当前视觉方向对应的 Liquid Stack 主题完整开源。仓库提供双语内容结构、主页小组件、管理工具、演示站和安装说明,可作为个人网站的起步框架。

作者: 小景

文章来源: https://jingyuan-zheng.github.io/zh/p/liquid-stack-open-source-release/

本博客当前的视觉方向,现在已经以开源项目 Liquid Stack 的形式发布。

查看 GitHub 仓库 · 查看项目介绍页 · 打开在线演示

Liquid Stack 基于 Hugo Theme Stack v4.0.3 制作。它保留了 Stack 稳定的写作、归档与阅读体验,并补充了一套受 Liquid Glass 启发的视觉设计、双语页面、主页小组件、内容工具和可替换的示例素材,形成一套更完整的个人网站起步框架。

为什么选择开源

有不少读者告诉我,他们喜欢这个博客的设计。我希望把这份喜欢变成更实际的东西:让大家可以拿到一套真正能开始使用的框架,了解它、修改它,并做成自己的作品。

Liquid Stack 也远不只是对 Stack 做一点简单修改。它是一整套围绕统一设计语言搭建的网站体系,主页小组件、评论系统、友链申请、邮件模板、管理工具和双语发布在同一个框架中被一起考虑。

开源版本已经移除了私人内容、个人凭据和特定服务设置。示例文字、头像、链接、照片、评论和表单只用于展示各个模块如何配合,均可安全替换。

主题包含什么

Liquid Stack 在 Stack 的博客基础上增加了以下模块:

  • 统一视觉系统: 受 Liquid Glass 启发的表面、背景模糊、圆角卡片层级、Lucide 线性图标,以及对应的浅色和深色模式。
  • 主页小组件: 个人介绍、功能快捷卡片、归档和分类入口、双时区世界时钟,以及启动台、照片墙和仪表盘的可视化入口。
  • 阅读与双语发布: 对应的英文和简体中文页面、语言感知切换、双语网站地图、XML sitemap、搜索和 404 入口。
  • 项目与个人网站页面: 可配置启动台、可拖动照片墙、完整关于页面排版和内容数据仪表盘。
  • 管理与互动: 网站管理菜单、Sveltia CMS、主题匹配的 Waline 评论、友链申请流程、部署和数据分析入口,以及可复用的邮件模板。

如何开始使用

  1. 在 GitHub 选择 Use this template,创建自己的仓库。
  2. hugo.yaml 中修改站点名称、网址、侧栏文案、社交链接和语言设置。
  3. 替换 static/img/liquid-stack/ 下的示例身份素材,再按需要更新启动台、照片墙和友链数据。
  4. 使用 hugo server -D 在本地预览。
  5. 使用 hugo --minify --cleanDestinationDir --ignoreCache 构建生产版本,再将生成的 public 目录部署到你选择的平台。

项目介绍页 放有视觉截图和功能概览;在线演示 则适合在修改前先体验完整的页面与交互流程。

发布前需要注意

在正式使用前,请替换所有示例姓名、图片、公开链接和占位内容。不要把访问令牌、API 密钥、邮箱凭据、私有网址或个人联系方式提交到公开仓库。

评论、CMS 编辑、表单、分析和部署服务都需要单独配置。演示站中的评论区和表单流程仅用于展示,不会保存访客填写的内容。启用 Waline 或邮件通知前,请接入自己的服务地址,并先阅读仓库中的配置示例。

一套起步框架,而不是一份固定身份

Liquid Stack 希望替你节省搭建框架的时间,同时把关键决定留给你自己:写什么、怎样介绍自己、接入哪些工具、以及用什么素材来表达你的空间。

如果你也用它搭建了一个网站,希望它能给你一个安静、完整的起点,并留下足够的空间让它变成真正属于你的作品。

隐私政策 网站地图 仪表盘
Hugo & Stack v4.0.3
本站已运行 0