FIT2CLOUD
绿野 Luye 的图标

绿野 Luye

993
126

深绿玻璃拟态(Glassmorphism)风格的 Halo 2 主题,视觉语言移植自 Ron567 个人主页:雾绿光晕、玻璃卡片、衬线大标题与晴雨雪三种背景粒子特效。

绿野 Luye · Halo 2 主题

深绿玻璃拟态(Glassmorphism)风格的 Halo 2 博客主题。视觉语言移植自 Ron567 个人主页(aboutme):雾绿光晕背景、毛玻璃卡片、衬线大标题、胶囊按钮,以及标志性的晴 / 雨 / 雪 Canvas 粒子背景特效。

特性

  • 深绿玻璃拟态设计#0E1F17 → #08120E 渐变底色 + 雾绿光晕 + backdrop-filter 毛玻璃卡片,与个人主页同源的设计令牌。
  • 天气背景特效:导航栏可切换晴(光柱与浮尘)/ 雨 / 雪三种 Canvas 粒子背景,选择持久化到浏览器本地,尊重 prefers-reduced-motion
  • 完整页面模板:首页(Hero + 文章列表)、文章页(玻璃正文面板 + 目录样式排版 + 上下篇 + 评论区)、独立页面、文章归档(时间线)、分类/标签页、作者页、404。
  • 「关于我」自定义模板:眉题 + 大标题 + 圆形玻璃头像徽章,复刻个人主页的 About 版式,在后台创建页面后可选用。
  • 响应式:桌面三栏卡片网格到移动端单列自适应,移动端抽屉式导航。
  • 主题设置:品牌副标题、Hero 文案与横幅图、主题强调色、页脚文案、字体加载开关等均可在后台配置。

安装

要求 Halo ≥ 2.26.0(使用了该版本引入的 layout.html 页面布局契约)。

  1. 将本目录打包为 zip:在 theme-luye 目录的上一级执行 zip -r theme-luye.zip theme-luye(确保 zip 内第一层是 theme-luye 文件夹)。
  2. 进入 Halo 后台 → 外观 → 主题 → 安装主题,上传 zip。
  3. 启用「绿野 Luye」,并在「主题设置」中按需调整后点击保存(修改设置后如未生效,点击「重载主题配置」)。

主题设置说明

分组 设置项 说明
基础 品牌副标题 导航 Logo 名称下方的小字,建议英文短语
基础 站长头像 用于「关于我」页、作者页与文章作者条
首页 Hero 眉题 / 主标题 / 副标题 Hero 区三段文案
首页 Hero 横幅图 Hero 底部宽幅意象图,可留空
首页 Hero 主按钮文案 / 目标 默认「看看我的文章」,锚点 #posts
外观 主题强调色 默认 #7DD9A6,全站强调色派生于此
外观 天气背景特效 关闭后导航栏不再显示晴雨雪切换器
外观 在线衬线字体 加载 Google Fonts;国内访问慢可关闭,自动回退系统字体
页脚 标语 / 邮箱 / GitHub / 版权文案 页脚信息与联系方式胶囊

页面建议

  • 导航菜单:后台 → 外观 → 菜单,创建主菜单(首页 / 归档 / 分类 / 标签 / 关于)。
  • 关于页:新建独立页面(别名建议 about),在页面设置中将模板切换为「关于我」。
  • 文章封面:文章上传封面图后,首页置顶卡片与文章页头图会自动展示。

目录结构

theme-luye/
├── theme.yaml              # 主题元数据
├── settings.yaml           # 主题设置表单
├── screenshot.png          # 后台主题预览图
├── logo.png                # 主题 Logo
├── LICENSE                 # GPL-3.0 全文
├── templates/
│   ├── layout.html         # 全局布局契约
│   ├── index.html          # 首页(Hero + 文章列表 + 分页)
│   ├── post.html           # 文章页
│   ├── page.html           # 独立页面
│   ├── page_about.html     # 「关于我」自定义模板
│   ├── archives.html       # 文章归档(按年时间线)
│   ├── categories.html     # 分类总览
│   ├── category.html       # 分类文章列表
│   ├── tags.html           # 标签总览
│   ├── tag.html            # 标签文章列表
│   ├── author.html         # 作者归档
│   ├── error.html          # 错误页
│   ├── modules/            # 公共片段(页脚 / 分页 / 文章卡片等)
│   └── assets/
│       ├── css/style.css   # 设计系统
│       ├── js/main.js      # 导航 / 返回顶部 / 滚动显现
│       ├── js/weather.js   # 晴雨雪粒子背景
│       └── svg/            # 叶片 / 山峰图标

升级

主题设置保存在 Halo 的 ConfigMap 中,升级不会丢失配置。在后台 → 外观 → 主题中找到「绿野 Luye」→ 升级 → 上传新版本 zip 即可;也可卸载旧版后重新安装(卸载前需先切换到其他主题)。已发布版本的制品不作修改,修复问题一律发新版本。

卸载

后台 → 外观 → 主题,先启用其他主题,再对「绿野 Luye」执行卸载。卸载主题不影响文章、页面、分类、标签等内容数据。

故障排查

  • 设置不生效:主题设置页点击「重载主题配置」。
  • 字体加载慢或样式异常:主题设置 → 外观 → 关闭「加载在线衬线字体」,自动回退系统字体(宋体/苹方)。
  • 天气特效不显示:确认主题设置 → 外观 → 「启用天气背景特效」已开启;切换按钮在导航栏右侧;用户的选择保存在浏览器本地,重新点击可关闭。
  • 评论区不显示:需安装并启用评论插件,且文章/页面开启了评论;未安装评论插件时评论区自动隐藏。
  • 安装后页面报错:确认 Halo 版本 ≥ 2.26.0,本主题使用了 2.26.0 引入的 layout.html 页面布局契约。
  • 其他问题:请携带 Halo 版本与报错截图提交 Issue:https://github.com/ReganQing/Luye/issues

许可

GPL-3.0。设计与图标素材来自 Ron567 个人主页项目。


讨论(0)

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

去提交 issue