FIT2CLOUD
X 的图标

X

1,068
155

高仿 X(Twitter)的 Halo 2.x 主题。三栏时间线布局、Lights out / Dim / Light 三档配色、推文形态的文章卡片、认证蓝标、作者主页与站内发帖 —— 既可以把博客当作一个 X 账号来逛,也能在开放注册后当作一个小型内容平台来运营。

1.12.8
Ander. 发布于
>=2.26.0

右栏可以自己加卡片了;顺带修掉两个「会跟着帖子滚走」的栏。

新增:右栏自定义卡片
主题设置 → 布局 → 右栏自定义卡片,卡片式条目,可自由增删、拖动排序,想加几张加几张。显示在右侧栏账号卡片的下方。

每张卡片三样东西:

字段 说明
标题 留空则没有标题行
内容 多行文本,换行按原样显示
链接 可留空;链接文字不填时显示「了解更多」,外链自动新窗口打开
标题、内容、链接全空的条目不会渲染 —— 所以升级之后右栏外观不会有任何变化,想用了随时加。

卡片外壳复用现有的卡片体系,和账号卡片、「正在发生」摆在一起观感一致。

修复:两处「跟着帖子滚」的横栏
① 右栏(桌面端第三栏)会跟着帖子流一起滚走,滚两屏右边就空了。

根因:.x-app 是 align-items: flex-start 的 flex 容器,右栏外壳 .x-rail__inner 只有内容那么高 → 里面 sticky 的包含块跟着变矮 —— 粘了,但一滚就到底。修法是给外壳补 align-self: stretch,让它撑到与主栏等高。

② 作者页「帖子」tab 栏也会跟着滚。主页、瞬间页的 tabs 都长在顶栏内部、跟随整体固定,唯独作者页这条独立在资料区之外,压根没做吸顶。现在它粘在顶栏下沿(与归档页的年份标题同一套路),滚过资料区后就一直可见。

这次怎么验证的
先在线上站点「注入修复样式」做 A/B,滚动到多个位置对比坐标;再用改后的真实 CSS 替换线上样式、逐页滚动核对:右栏恒 0 不动,作者页 tab 栏滚到 54px 后停住,左栏 / 顶栏 / 归档年份栏不受影响。

新增的卡片功能走真实 Thymeleaf 渲染测试(弹层工程在 .probe/tplcheck):全空条目过滤、链接文字回退、多行换行都验证过,最后把渲染结果注入线上右栏截图确认了视觉。

顺带查清了一个一直没坐实的技术点:Halo 的 theme.config 实际是 JsonNode,但 Halo 给模板求值注册了 JsonPropertyAccessor,所以设置项用 item.field 这种点号写法是官方支持的 —— 自定义导航、账号菜单一直就这么工作的。

安装
下载 halo-theme-x-1.12.8.zip → Halo 后台 外观 → 主题 → 安装主题。要求 Halo >= 2.26.0。

本主题的绝大部分代码由 WorkBuddy(模型 DeepSeek V4.1 Flash) 生成,人工负责提出需求、审阅与验收。

资源下载

  • halo-theme-x-1.12.8.zip