FIT2CLOUD
X 的图标

X

1,068
155

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

1.12.12
Ander. 发布于

1.12.12

最新
>=2.26.0

这一版把几处和 X 官网不一致的界面细节全部对齐了 —— 所有数值都是对 X 官网实测反推出来的,不是拍脑袋调的。

布局
左栏导航行高 46px → 58px

之前导航项上下各 10px 内边距,和 X 比显得紧。X 实测是「图标 26 + 上下 16 ≈ 58px」,现在一致了,导航区更舒展。

宽屏右栏 350px → 400px

X 在宽屏(≥1300px)下用 275 / 600 / 400 的三栏分配(常规宽度才是 350),右栏内容列实际 326px。这一版在 ≥1300px 时整体对齐:右栏 400、内容列 326、容器同步加宽到 1315(仍是居中 + 左右各 20 留白)。1265–1300 之间维持原来的 350 规格,折叠断点行为完全不变。

视觉
右栏卡片改为 X 风格

卡片从「灰底无边框」(旧版 X 的样式)换成 与页面同底 + 1px 细边框 —— 这是 X 现在所有卡片的统一画法,Lights out / Dim / Light 三档配色下都更贴近。

发帖框图标:蓝 → 灰

发帖输入框下那排小图标(图片 / 话题 / 日历)原来常亮蓝色,X 上默认是灰的。现在默认灰、悬停才亮蓝(带淡蓝圆底)。

「更多」图标:三点 → 圆环三点

左栏导航的「更多」图标原来和帖子菜单一样是裸三点,X 的导航「更多」是圆环内含三点。现在换上了新图标(帖子卡片和菜单里的「···」保持原样,和 X 一致)。

交互
顶栏操作区右对齐

首页顶栏的「登录 / 注册」(以及登录后的账号头像)原来紧跟在「主页」标题右边,现在推到顶栏最右侧 —— 和 X 的顶栏布局一致,也顺带修复了详情页顶栏「返回 + 标题 + 账号」挤在一起的问题。

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

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

资源下载

  • halo-theme-x-1.12.12.zip
1.12.11
Ander. 发布于
>=2.26.0

仿 X 开屏加载页(1.12.9)
打开任何页面时,先显示一整屏居中的站点标识(背景跟随当前配色),页面就绪后快速淡出 —— 就是 X App 启动画面那个感觉。

标识不写死:自动跟随「账号信息与标识」里的设置 —— X Logo / 自定义图片 / 文字 + 副标题
脚本正常时:页面就绪 150ms 后主动淡出并移除
脚本不可用时:CSS 动画 3 秒兜底,任何情况下不会把访客堵在开屏页
系统开了「减弱动效」:直接跳过开屏
开屏显示时机可选(1.12.10)
上一版加了仿 X 的开屏加载页,这一版把「什么时候显示」也做成了设置 —— 主题设置 → 布局 → 开屏显示时机:

选项 行为
仅首次访问(默认) 每个浏览器会话只在打开站点时显示一次;站内跳转、刷新都不再出现
每次加载都显示 每打开一个页面都显示(上一版的行为)
「仅首次」在 里就做完了判断(body 里的开屏元素还没解析就已经决定去留),跳过时零闪烁;浏览器存储不可用时静默退化为每次都显示,不影响进入页面。

设置结构重排(1.12.11)
设置页从 6 组整理为 8 组,每组各管一摊,找东西不用再翻长列表:

组 管什么
外观配色 配色、字号、圆角
账号信息与标识 logo、头像、资料、封面与认证
布局 栏位显示、右栏卡片、开屏
内容展示(新) 统计数、封面、时间线形态、阅读时长、加入日期
功能开关 点赞、评论、搜索、趋势、编辑资料
瞬间(新) 投稿入口、站内发布、评论组设置
导航自定义 导航项、菜单、自定义条目
地址与登录入口 登录注册入口与各页面地址
原来的「内容与交互」一坨 15 项(点赞、封面、瞬间、通知全混在一起),现在按职责拆成了三组。

升级注意
设置项的分组名是配置的存储键。这次挪过组的 12 项都做了过渡回退——升级后在你保存设置之前,行为和旧版完全一致,不用急着重新配置。

但在后台保存过一次设置之后,如果你以前改过这 12 项里的某几项(主要是:时间线形态、瞬间投稿相关、首页发帖入口、导航里的瞬间 / 通知开关),建议顺眼核对一下,个别项会以默认值显示。

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

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

资源下载

  • halo-theme-x-1.12.11.zip
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
1.12.6
Ander. 发布于
>=2.26.0
当前版本没有发布说明

资源下载

  • halo-theme-x-1.12.6.zip