FIT2CLOUD
Serenity-Grace 的图标

Serenity-Grace

7,204
2,733

Serenity 开发的 Halo 博客主题,简约优雅,支持亮色/暗色模式。


🌸 Serenity-Grace

简约优雅的 Halo 2.x 博客主题

以樱花粉与湖水蓝为主色调,支持亮暗模式自由切换


Release
  
License
  
Halo


🖼️ 预览截图 · ✨ 功能特性 · 📦 安装使用 · ⚙️ 页面配置 · 📖 使用文档 · 📝 更新日志



🌐 在线预览

在线预览

💡 建议使用无痕浏览模式访问,体验完整的欢迎页和首次访问效果


🤝 小伙伴站点

🏠 空白 Blog
www.guaike.top
🏠 Sopify Blog
www.lunarmc.cn
🏠 Fry酥条の博客
blog.fryfries13.cn
🏠 Zyx_2012
blog.zyx-2012.cn

💡 欢迎使用 Serenity 主题的站长提交自己的站点,PR 即可~


👑 特别鸣谢

Sopify

Sopify

GitHub
 
Blog
 
Docs

📖 Serenity 主题 使用文档 由 Sopify 编写,比作者写的还详细(没错,作者懒得写文档 🫠)

💡 主题活跃贡献者,持续提供功能建议与代码 PR,堪称编外产品经理 🧑‍💼

Serenity 主题文档

🖼️ 预览

🌙 暗色模式

暗色模式 · 首页

暗色模式 · 内容

暗色模式 · 更多

☀️ 亮色模式

亮色模式 · 首页

亮色模式 · 内容

亮色模式 · 更多

✨ 功能特性

🎨 视觉与交互

🌓 双色模式 — 暗色 / 亮色自由切换,支持跟随系统偏好,切换时带圆形扩散动画(View Transition API)
📱 全端适配 — 响应式布局,桌面端、平板、手机全面适配,移动端各页面独立优化
🧈 丝滑滚动 — Lenis 全局惯性缓动,锚点跳转和返回顶部均为平滑滚动
🎬 入场动画 — AOS 滚动入场动画 + 纯 CSS 交错入场,元素随滚动渐入视野
👋 欢迎页 — 首次访问全屏欢迎页,可配置吉祥物形象和自定义语录
过渡动画 — PJAX 无刷新导航,页面切换淡入淡出,浏览体验流畅自然

📄 页面模板

模板 功能亮点
🏠 首页 Hero 区域(头像、打字机标题、背景壁纸/视频)· 风向标导航 · 近期笔记 · 站点动态 · 随想碎片轮播 · 生活回想滑块 · 天气时钟
📖 文章详情 封面 Hero · 浮动目录导航 · 阅读进度条 · 相关文章推荐 · 版权声明 · 社交分享(微信/微博/QQ/复制链接)· 打赏组件 · 背景壁纸
🗂️ 归档 文章卡片列表 · 侧边栏(一言、热门文章、最新评论、标签云)· 置顶文章标识 · 分页
🏷️ 标签 数据面板(圆环统计图 + 柱状图)· 标签胶囊墙 · hover 联动高亮 · 颜色读取后台配置
📁 分类 卡片网格展示 · 每个分类显示自定义图标和文章数
👤 关于 个人信息 · 技能进度条 · 建站历程时间线 · 十年之约倒计时 · Steam 游戏卡片 · 爱发电赞助 · 吉祥物
💭 碎碎念 适配官方瞬间插件 · 时间线布局 · 支持图片灯箱
🔗 朋友们 友链卡片 · 友链申请(适配友链自助提交插件)· 信息一键复制
💬 留言板 弹幕式留言展示 · 评论组件
🚀 项目集 GitHub 项目卡片 · 区分"我的项目"和"收藏项目" · 版本详情弹窗(自动拉取 Releases)
🌐 朋友圈 订阅友链文章聚合展示
🖼️ 图库 照片瀑布流 · 内置灯箱
📝 便签墙 纪念日倒计时 · 便签卡片 · 适配便签墙插件
🔐 登录/注册 自定义登录注册页面 · 与主题风格统一

⚙️ 后台配置一览

主题提供完善的后台设置面板,所有内容均可在 Halo Console 中可视化配置:

📋 点击展开完整配置项
配置分组 可配置项
🔧 基本设置 站点标题 · 作者 · 描述 · Logo · Favicon · 默认主题模式 · 导航图标 · 分类图标 · 自定义 Head/Script 代码注入
🎯 首页头部 头像 · 名称 · 标语 · 个人简介 · 打字机效果 · 自定义颜色(名称/标语/简介/头像光晕/天气文字)
👋 欢迎页 启用开关 · 吉祥物图片(暗色/亮色各一张)· 自定义语录 · 来源链接
🌐 社交链接 GitHub · Twitter/X · Email · 微博 · B站 · 知乎 · Telegram · Discord · 自定义 Iconify 图标 · RSS 订阅 · 赞助功能
🧭 风向标 首页快速导航区域 · 各链接独立开关 · 自定义标题/副标题
🏠 首页内容 背景壁纸(图片/视频/API)· 主题装饰图片 · 天气时钟 · 近期笔记 · 站点动态 · 随想碎片 · 生活回想
📖 文章页面 侧边栏组件排序 · 相关文章数量 · 滚动条 · 过期提示 · 背景壁纸 · 版权信息 · 分享按钮 · 打赏组件
📊 侧边栏 一言 API · 标签云 · 热门文章数量 · 最新评论数量
👤 关于页面 个性标签 · 技能列表(支持 Iconify 图标)· 关于本站 · 建站历程 · 十年之约 · 吉祥物 · Steam 游戏 · 爱发电赞助
🚀 项目展示 GitHub Token · GitHub 项目列表 · 自定义项目列表 · 项目归属类型
🔗 友链页面 站点信息 · 友链申请配置
🦶 页脚 ICP/公安备案(支持自定义 Logo)· 建站年份 · 运行时间 · RSS · Powered by · 服务商标识 · 隐私政策 · 服务条款
🔍 SEO 优化 关键词 · JSON-LD 结构化数据 · 百度/Google 站点验证
💧 水印设置 启用开关 · 水印文字 · 透明度

🧩 插件适配

状态 插件 用途
评论组件 文章评论、留言板评论
瞬间 碎碎念页面数据源
链接管理 友链页面数据源
图库管理 图库页面数据源
💡 友链自助提交 友链申请功能
💡 朋友圈 朋友圈聚合页面
💡 爱发电 关于页面赞助展示
💡 Dicebear 头像 评论随机头像
🔌 LightGallery 灯箱 文章图片灯箱(未安装时使用内置灯箱)
💡 便签墙插件 便签墙页面数据源(纪念日倒计时 · 便签卡片)
💡 Steam 游戏展示 关于页面 Steam 游戏卡片数据源

✅ 必需    💡 推荐    🔌 可选   —   部分插件均可在 Halo 应用市场 中安装


📦 安装使用

方式一:应用市场安装

前往 Halo 应用市场 搜索 Serenity-Grace 一键安装。

方式二:手动安装

  1. 前往 Releases 下载最新版本的 .zip 文件
  2. 在 Halo 后台「外观 → 主题」中上传安装
  3. 启用主题并进入「主题设置」进行个性化配置

⚙️ 页面配置

安装主题后,需要在 Halo 后台创建自定义页面并选择对应模板:

页面 模板选择 建议别名 访问路径
关于我 about.html about /about
碎碎念 moments.html moments /moments
朋友们 links.html links /links
留言板 guestbook.html guestbook /guestbook
项目集 projects.html projects /projects
朋友圈 friends-circle.html friends-circle /friends-circle
图库 photos.html photos /photos
便签墙 wishes.html wishes /wishes

📌 归档(/archives)、标签(/tags)、分类(/categories)为 Halo 内置路由,无需手动创建页面。

📋 创建步骤
  1. 在 Halo 后台「页面」中新建页面
  2. 在页面设置中选择对应的「自定义模板」
  3. 设置页面别名(slug)为上表中的建议别名
  4. 发布页面后即可通过对应路径访问

💬 交流群

微信交流群 QQ 交流群
微信交流群 QQ交流群

扫码加入,一起交流主题使用心得~


📜 License

GPL-3.0 © Serenity


如果这个主题对你有帮助,请给一个 ⭐ Star 支持一下~


Made with ❤️ by Serenity


讨论(1)

这是一个开源应用,我们推荐优先在开源仓库中提交 issue,以便开发者更好地接收和跟进问题。

去提交 issue