本博客当前的视觉方向,现在已经以开源项目 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 评论、友链申请流程、部署和数据分析入口,以及可复用的邮件模板。
如何开始使用
- 在 GitHub 选择 Use this template,创建自己的仓库。
- 在
hugo.yaml中修改站点名称、网址、侧栏文案、社交链接和语言设置。 - 替换
static/img/liquid-stack/下的示例身份素材,再按需要更新启动台、照片墙和友链数据。 - 使用
hugo server -D在本地预览。 - 使用
hugo --minify --cleanDestinationDir --ignoreCache构建生产版本,再将生成的public目录部署到你选择的平台。
项目介绍页 放有视觉截图和功能概览;在线演示 则适合在修改前先体验完整的页面与交互流程。
发布前需要注意
在正式使用前,请替换所有示例姓名、图片、公开链接和占位内容。不要把访问令牌、API 密钥、邮箱凭据、私有网址或个人联系方式提交到公开仓库。
评论、CMS 编辑、表单、分析和部署服务都需要单独配置。演示站中的评论区和表单流程仅用于展示,不会保存访客填写的内容。启用 Waline 或邮件通知前,请接入自己的服务地址,并先阅读仓库中的配置示例。
一套起步框架,而不是一份固定身份
Liquid Stack 希望替你节省搭建框架的时间,同时把关键决定留给你自己:写什么、怎样介绍自己、接入哪些工具、以及用什么素材来表达你的空间。
如果你也用它搭建了一个网站,希望它能给你一个安静、完整的起点,并留下足够的空间让它变成真正属于你的作品。