FIT2CLOUD
绿野 Luye 的图标

绿野 Luye

2,504
415

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

1.3.0
qin 发布于
>=2.26.0

v130-console-desktop

背景

Issue #8 反馈:希望前台能有一个控制台入口(参考 Earth 主题),并且能在主题设置里控制是否放开该入口——避免向前台访客暴露后台地址。

新增能力

位置 表现
导航栏右侧 新增控制台图标按钮 .console-btn,与搜索按钮同规格:38×38 圆形毛玻璃、16px 线性图标、hover 时主题绿描边
页脚联系方式行 新增「控制台」胶囊按钮
主题设置 → 基础 新增「显示控制台入口」开关(默认开启)与「控制台路径」文本(默认 /console)

两处入口共用同一个开关,关闭后同时消失,不留残影。console_path 可自定义,适配修改过后台路径的站点。

改动说明

  • settings.yaml:基础组新增 show_console(checkbox,value true)与 console_path(text,value /console)。
  • templates/modules/header.html:在 nav-right 区域、search-btn 之后插入控制台按钮。判定条件为 theme.config.basic?.show_console == null or theme.config.basic?.show_console——未配置时按开启处理,老站点从 1.2.0 升级后无需手动保存设置即可看到入口。
  • templates/modules/footer.html:联系方式行末尾追加控制台胶囊,判定条件同上。
  • templates/assets/css/style.css:
    • .search-btn 选择器扩展为 .search-btn, .console-btn,共用圆角、玻璃底与 focus-visible 描边;
    • @media (max-width:640px):隐藏导航栏控制台按钮(页脚入口保留);
    • @media (max-width:480px)(新增断点):收紧导航间距与内边距、天气图标 30→28px、.logo 改为可收缩、站点名过长以省略号截断。

根因与兜底设计

窄屏溢出(本轮发现并修复):控制台按钮加入导航栏右侧后,390px 视口下 .nav 实际宽度 417px > 视口 390px,汉堡按钮被切掉;414px 溢出 4px。根因是 .nav-right 为 flex:0 0 auto 不参与收缩,右侧元素总宽超出可用空间。

  • ≤640px 隐藏导航栏控制台按钮,窄屏下入口保留在页脚,移动端仍可直达。
  • ≤480px 收紧布局并让 .logo 可收缩,站点名过长时省略号截断。

顺带修掉 320px 的既有横向溢出(与本次改动无关,关掉控制台按钮同样溢出):根因是 .logo 为 flex:0 0 auto 不参与收缩、站点名过长不换行。修复后 320px 下 logo 由 197px 收窄至 138px。

安全兜底:开关缺省为「开启」而非「关闭」——Issue 诉求是「增加入口」,装上即用;不想要的站长一键关掉即可。未登录访问 /console 由 Halo 自身 302 到 /login,主题不接管认证逻辑。

真机验证

环境:Halo 2.26.1(JDK 21),H2 本地实例,--server.port=8090。发版前用正式包 theme-luye-1.3.0.zip 重新升级复验。

  1. 正式包升级:POST /apis/api.console.halo.run/v1alpha1/themes/theme-luye/upgrade → 200;主题列表确认 theme-luye 1.3.0 / READY / LayoutTemplateSupported。
  2. 包内容断言:28 个关键文件全部齐全;theme.yaml version=1.3.0、requires=2.26.0;settings.yaml 含 show_console / console_path;header.html 含 console-btn 与 /console 兜底;footer.html 含控制台胶囊;style.css 含 .console-btn 样式、≤640 隐藏规则、≤480 断点、省略号截断;README 含 1.3.0 条目与设置表条目——16 项全部通过。
  3. 设置项注册:GET /apis/api.console.halo.run/v1alpha1/themes/theme-luye/setting 确认 basic 组含 show_console | checkbox | 显示控制台入口 | true 与 console_path | text | 控制台路径 | /console;升级后 ConfigMap 自动合并默认值。
  4. 开启状态:首页渲染 <a class="console-btn" href="/console" aria-label="控制台" title="控制台">,页脚出现「控制台」胶囊。
  5. 关闭状态:show_console=false → 导航栏与页脚两处同时消失。
  6. 自定义路径:console_path=/my-console → 两处 href 同步变更。
  7. 老站点兼容:删除 ConfigMap 中 show_console / console_path(模拟 1.2.0 存量)→ 入口仍按开启渲染,href 回落 /console。
  8. 计算样式(无头 Edge + CDP):桌面 1440×900 与移动 390×844 下 .console-btn 均为 display:flex、38×38、border-radius:9999px、图标 16×16。
  9. 导航排布冲突排查(逐视口量 boundingRect):
    • 1440px:天气组 1138→1242、控制台 1256→1294、联系我胶囊 1308→1392,间距各 14px,三者互不重叠;「联系我」在 ≤860px 已被隐藏,与新按钮无空间竞争。
    • 320 / 360 / 390 / 414 / 480 / 640 / 768 / 900 / 1024 / 1440 十个视口,nav.scrollWidth === nav.clientWidth 且 documentElement.scrollWidth === clientWidth——全部无横向滚动条;开关 ON / OFF 两态各验一遍,结论一致。
  10. 全路径扫描:首页 / 归档 / 分类 / 标签 / 关于页 / 文章页 / 归档分页 / 404 页均正常渲染主题布局并包含入口(200/404 状态码符合预期)。
  11. 链接可达:GET /console → 302 /login?authentication_required。

兼容性

  • 最低要求仍是 Halo ≥ 2.26.0,未使用新 API。
  • 主题设置保存在 ConfigMap,升级不丢配置;老站点升级后新增项按开启处理,如需关闭在后台保存即可。
  • 未安装任何插件的环境下验证通过,不依赖插件。

升级方式

后台 → 外观 → 主题 →「绿野 Luye」→ 升级 → 上传 theme-luye-1.3.0.zip。

若你不想向前台暴露后台地址,在主题设置「基础」中关闭「显示控制台入口」即可,导航栏与页脚会同时隐藏。

资源下载

  • theme-luye-1.3.0.zip