AIGC标识 博客园主题「星轨 Stellaris」：零依赖、三态切换与一套完整设计令牌

一套「拿来就能贴」的开源博客园主题：不用 npm、不用框架、不用本地构建，把三个文本粘进后台就能上线；视觉收进设计令牌，改一处即可换肤。

先看效果

不贴截图了，直接看线上更准：

这两个地址都是真实在跑的博客，不是效果图。

为什么又做一套主题

博客园的美化有个绕不开的前提：DOM 骨架由平台皮肤给定，能动手的地方基本只有后台那三个输入框——「页面定制CSS代码」「页首HTML代码」「页脚HTML代码」。于是常见的做法是换一套配色、加一张头图、再堆几个插件脚本；配置和平台结构混在一起，换台博客往往就到处是写死的绝对路径和 404。社区里这类分享并不少，BNDong 的《关于本博客样式》、zouwangblog 的《博客园二次元主题——Sakura》都是常被翻到的参考，也把「主题要讲清怎么装、怎么改」这件事立住了。

「星轨」想补的是另一层：把平台不可改的 DOM 与主题自己注入的节点划清边界，颜色、字体、间距、圆角、描边、动效、层级、断点、布局全部收进一份设计令牌（tokens）作为唯一真源，语义层不出现任何色值字面量；运行时则是零依赖的原生 JS，构建脚本也只用 Node 内置模块。换句话说，它更像一套可以维护的主题工程，而不是一份配色清单。

设计取向

一句话概括品牌：深夜为底，轨道为线，光有温度，等宽为骨。

  • dark-first：深色是设计基线与默认视觉形态（「默认」仅指设计层面；运行时 theme 默认为 "auto"，跟随系统，并非恒为深色）；浅色不是把深色反色，而是一套逐项平行推导的独立配色。比如渐变终点在深色用暖金 #f0c987，到了白底就换成深琥珀 #8f5210——因为亮金在白底上对比度不够，冷暖分工不能靠镜像糊过去。
  • 三态：auto 跟随系统、dark 常驻深色、light 常驻浅色，切换状态可记忆。
  • 冷暖分工：主色是冷蓝 #5fb2ff，管技术性的链接、强调与焦点；暖金 #f0c987 管人（品牌节点、标题渐变终点），等宽字体扛日期、阅读时长这类元信息。

特性与自检数字

对比度按每套主题下的四级背景底色（画布 / 抬升 / 表面 / 悬停）逐一复算并取最差值：

底色 正文 次要 弱文字 链接 暖色/渐变终点 UI 边界 主按钮
深色 12.46:1 7.21:1 5.14:1 6.45:1 — 3.92:1 8.28:1
浅色 13.89:1 6.52:1 5.24:1 6.21:1 5.24:1 / 4.97:1 4.24:1 5.24:1

文字 ≥4.5:1、UI 边界 ≥3:1，两套配色都达标。代码块按 #0b1118 固定深色单独自检：前景 #dce6f2 15.03:1、#cdd9e8 13.26:1、复制成功色 #7ee0a6 11.83:1。

这些是主题自检算出来的对比度，不是任何排名或第三方评测，只代表「按 WCAG 门槛逐项核过」。

其余特性：

  • 阅读增强：三态主题切换、阅读进度条、返回顶部、目录 TOC、代码块一键复制（含行号槽）、图片灯箱。
  • 响应式：窄屏（≤640px）侧栏落到正文下方，不横向溢出。
  • 零依赖：build.js 只用 Node 内置模块；页脚脚本是原生 JS，不引任何库。
  • 三框粘贴：交付物就是三个可直接粘贴的文本，不要求使用者本地构建。

三步安装

前置（重要，漏了会表现为「样式没生效」）

  1. 博客园后台 →「设置」，把博客皮肤设为 SimpleMemory，并勾选 「禁用模板默认CSS」。
  2. 页脚要放 <script>，需先向博客园申请 JS 权限（未开通时脚本不会执行）。
  3. 打开 dist/ 下对应的 .paste.* 文件，整份复制。
步骤 后台输入框 粘贴文件 内容
1 页面定制CSS代码 dist/custom.paste.css 主题 CSS（已去前导空白）
2 页首HTML代码 dist/page-begin.paste.html 内联 SVG favicon（data URI）+ loading spinner，无 JS
3 页脚HTML代码 dist/page-end.paste.html 配置段（第 1 段）+ 可选资源条件注入器 + 增强主脚本

还有一种「精简版」装法：CSS 与页首两框完全不变，只把页脚换成 dist/page-end.cdn.paste.html（约 2 KB）——配置段和两个可选资源注入器仍内联，约 50 KB 的增强主脚本 dist/stellaris.js 改走 jsDelivr 外链。好处是改配置、升级增强脚本都不用重贴 44 KB 的大框；代价是依赖 CDN 可用性（挂了只影响 TOC、复制、灯箱等交互增强，视觉样式仍完整），也可随时切回上面的完整离线版。仓库 README 里两种装法并列，按自己的情况选一种，不要混贴。

两点容易踩：

  • 只能用 dist/*.paste.*。后台 CodeMirror 开着自动缩进，直接贴带缩进的文本会逐行累积，*.paste.* 已去掉每行前导空白，重复粘贴幂等。不要在框里原有内容末尾手工追加补丁，也不要用单行压缩版。
  • CodeMirror 的「二次 Ctrl+A」陷阱。三个框下面都藏了一个真实 <textarea>，表单提交读的是它的值。每个框都按这个顺序做一遍：点进编辑器 → Ctrl+A 全选 → Delete 清空 → Ctrl+V 粘贴 → 再按一次 Ctrl+A → 保存。漏掉第二次全选，存下来的可能只是选区片段。完整踩坑、保存后读回确认与 CDN 缓存戳的排查见仓库内 docs/deployment.md。

配置：window.XM

改配置不用重贴主脚本、不用动另外两个框，只在「页脚HTML代码」框里编辑带注释的那一小段 window.XM 即可。下面这段即 dist/config.paste.html 的配置段（注释按中文重排）：

<script>
window.XM = {
  theme: "auto",   // "auto" 跟随系统 | "dark" 常驻深色 | "light" 常驻浅色
  accent: null,    // 例："#FF7A59"，留 null 用默认冷蓝 #5fb2ff
  logo: null,      // 例："https://.../avatar.png"，留 null 用平台默认
  analyticsId: null,   // 百度统计 ID（32 位十六进制）；留 null 完全不加载
  cursorEffects: "https://blog-static.cnblogs.com/files/home/cursor-effects.js", // 原作者资源，换博客请替换或置 null
  cursorUrl: null      // 自定义光标 URL；留 null 用 CSS 默认
};
</script>
字段 默认 说明
theme "auto" 三态主题
accent null 覆盖主强调色，留 null 用默认冷蓝 #5fb2ff
logo null 头像；加载失败静默回退平台默认
analyticsId null 百度统计 ID；默认关闭，只接受合法 32 位 ID，否则不创建脚本、不发请求
cursorEffects 原作者博客路径 光标特效脚本；只接受合法 http(s)://
cursorUrl null 自定义光标；留 null 用 CSS 默认

非法值一律回落默认、不抛错，写错最多让该项回到默认，不会把整段脚本弄崩。需要更细的开关（features / selectors / debug）时，在 window.XM 里自行追加一行即可。

首次使用必读（换博客必改）：analyticsId 默认 null，意味着统计默认关闭，不加载脚本、不发任何请求；要开启请填自己的 32 位 ID，否则保持 null。cursorEffects 默认指向原作者博客 /home/ 路径下的 cursor-effects.js，把主题搬到自己的博客时必须换成自己的 URL，或置 null 关闭，否则会 404。这两项（连同 cursorUrl）都集中在配置段，改这里就行，不用重贴 CSS / 页首。

另外 dist/config.paste.html 只是配置段的独立快照，供查看 / 单独复制用，不是第四个粘贴框——页脚框里已经包含这段。

源码与更新

源码、文档与版本变更记录都在仓库里。

致谢

  • 底座是博客园官方皮肤 SimpleMemory——主题只在它的 DOM 骨架上叠加样式与增强，不改动皮肤前提；也感谢 BNDong 等前辈在博客园主题美化上的分享与铺垫。
  • 自定义光标 mouse.ico 与 cursor-effects.js（光标特效）是原博客的可选保留项，并非主题自带：它们和百度统计一起已抽成 cursorUrl / cursorEffects / analyticsId 三个配置项，去掉也不影响主题其余功能。

已知限制

如实写几条，免得被当成「装上就完美」：

  • 真机移动端视觉与人工读屏（NVDA / VoiceOver）尚未验收；结构化、可自动化的检查全绿，不等于「已完成无障碍验收」。
  • Safari / macOS 对 SVG favicon 支持有限，可能需要 rel="mask-icon" 或一次性 PNG 兜底。
  • 主流平台的 og:image 抓取器不接受 data URI / SVG，通常要求 http(s) 绝对 URL 的位图；仓库里的封面 SVG 只是资产，社交预览图需自行上传 PNG。
  • 代码块固定深色是刻意设计：浅色模式下代码区仍保持 #0b1118 深色底，以保证语法高亮与复制按钮的对比度，不是漏改。

有问题或建议，欢迎到仓库提 issue。

posted @ 2026-11-09 17:16  星月梦微  阅读(11)  评论(0)    收藏  举报