2026-07-23 视觉与交互更新

今天对 ParticleX 主题做了一轮「可读性 + 明暗主题 + 交互」改造。这篇用来记录改了什么，并顺带演示新的 Note 组件。

并且由于 ParticleX 主题在我手里已经改了无数版了，于是我决定把我的 ParticleX 独立作为一个新主题，改名为 ParticleXF

总览

视觉：柔和深色 + 护眼排版

页面底色从纯黑改为暖调墨绿灰，正文对比度适中，卡片用弱阴影而不是刺眼亮边。

• 正文字体：Noto Sans SC（思源黑体）
• 代码字体：Fira Code
• 字号约 16–17px，行高约 1.8

明暗主题切换

去掉 darkmode-js 的全局反色，改为 CSS 变量双主题：

• 顶栏最右侧 ☀ / ☾ 切换
• 选择写入 localStorage.theme
• 首屏有防闪脚本，减少白屏/错主题一闪

星空背景

• 深色：黑底动态星空（原效果）
• 浅色：暖米色底 + 淡色星点/星云，避免浅色 UI 底下仍是整屏黑

目录（TOC）

• 滚动高亮更稳，点击平滑滚动并避开顶栏
• 当前项会滚进目录可视区
• 窄屏（≤1200px）：右下角「目录」FAB → 侧滑抽屉
• 标号与标题样式区分（标号更淡、等宽）
• 滚动条内缩，避免圆角被直角滚动条切坏

文章与代码块

• 段落/标题/链接/图片间距更舒服
• 代码块：深色 atom-one-dark-reasonable / 浅色 atom-one-light
• 长代码可配置自动折叠（默认超过 20 行）

配置示例（themes/particlex/_config.yml）：

highlight:
  wrap: true
  collapse:
    enable: true
    lines: 20

下面是一段略长的示例代码（用于看折叠/换行）：

// demo: long-ish snippet for collapse
function greet(name = "Florance") {
  const message = [
    "Hello,",
    name,
    "! Welcome to the updated ParticleX theme.",
  ].join(" ");
  console.log(message);
  return {
    ok: true,
    message,
    meta: {
      theme: "soft-dark / soft-light",
      features: ["toc", "notes", "waline", "starfield"],
    },
  };
}

for (let i = 0; i < 8; i++) {
  greet(`Reader-${i}`);
}

// more lines to exceed collapse threshold...
const lines = Array.from({ length: 12 }, (_, i) => `line ${i + 1}`);
console.log(lines.join("\n"));

首页与其它细节

• 首屏 loop 色调改为薄荷绿/雾蓝系
• 主题切换按钮固定在顶栏右侧

Waline 评论

• dark 改为跟随 html[data-theme="dark"]
• 颜色变量映射到站点 token（背景、文字、强调色）

新组件：Note 提示框

Note 已作为 主题脚本 内置：themes/particlex/scripts/note.js。

写法

{% note tip %}
正文，支持 **Markdown**。
{% endnote %}

{% note warning 自定义标题 %}
……
{% endnote %}

{% note danger no-icon %}
不显示图标。
{% endnote %}

类型一览