
背景
Issue #8 反馈:希望前台能有一个控制台入口(参考 Earth 主题),并且能在主题设置里控制是否放开该入口——避免向前台访客暴露后台地址。
新增能力
| 位置 | 表现 |
|---|---|
| 导航栏右侧 | 新增控制台图标按钮 .console-btn,与搜索按钮同规格:38×38 圆形毛玻璃、16px 线性图标、hover 时主题绿描边 |
| 页脚联系方式行 | 新增「控制台」胶囊按钮 |
| 主题设置 → 基础 | 新增「显示控制台入口」开关(默认开启)与「控制台路径」文本(默认 /console) |
两处入口共用同一个开关,关闭后同时消失,不留残影。console_path 可自定义,适配修改过后台路径的站点。
改动说明
settings.yaml:基础组新增show_console(checkbox,valuetrue)与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 重新升级复验。
- 正式包升级:
POST /apis/api.console.halo.run/v1alpha1/themes/theme-luye/upgrade→ 200;主题列表确认theme-luye 1.3.0 / READY / LayoutTemplateSupported。 - 包内容断言:28 个关键文件全部齐全;
theme.yamlversion=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 项全部通过。 - 设置项注册:
GET /apis/api.console.halo.run/v1alpha1/themes/theme-luye/setting确认 basic 组含show_console | checkbox | 显示控制台入口 | true与console_path | text | 控制台路径 | /console;升级后 ConfigMap 自动合并默认值。 - 开启状态:首页渲染
<a class="console-btn" href="/console" aria-label="控制台" title="控制台">,页脚出现「控制台」胶囊。 - 关闭状态:
show_console=false→ 导航栏与页脚两处同时消失。 - 自定义路径:
console_path=/my-console→ 两处 href 同步变更。 - 老站点兼容:删除 ConfigMap 中
show_console/console_path(模拟 1.2.0 存量)→ 入口仍按开启渲染,href 回落/console。 - 计算样式(无头 Edge + CDP):桌面 1440×900 与移动 390×844 下
.console-btn均为display:flex、38×38、border-radius:9999px、图标16×16。 - 导航排布冲突排查(逐视口量
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 两态各验一遍,结论一致。
- 全路径扫描:首页 / 归档 / 分类 / 标签 / 关于页 / 文章页 / 归档分页 / 404 页均正常渲染主题布局并包含入口(200/404 状态码符合预期)。
- 链接可达:
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
