本站随机壁纸切换方案（白天/夜间双版本）——留给未来的自己

本文是”写给未来的自己”的备忘录，记录当前站点（Hexo + Butterfly 主题）如何实现「白天/夜间两套随机背景图」的完整流程。
只要按步骤复制粘贴，即可在任意新环境里 10 分钟还原同样效果，且不破坏主题原有浅色/深色配色，文字始终清晰可读。

一、最终效果

默认加载随机「白天壁纸」；若用户点击右下角 🌙 切换为暗黑模式，背景立即替换成随机「夜间壁纸」。
每套壁纸可放置任意张数，互不影响；刷新页面重新随机。
仅改动背景层，不注入任何额外 CSS，因此不会导致白天/夜间文字对比度异常。

二、前期准备

壁纸尺寸建议 1920×1080 以上，体积 ≤ 500 KB，格式统一（jpg/png 均可）。

命名规则务必保持：

1 2	白天图 → light-1.jpg、light-2.jpg ... light-N.jpg 夜间图 → dark-1.jpg、dark-2.jpg ... dark-M.jpg

序号从 1 开始连续，不要 0。

将图片全部放入：
1
your-blog/themes/butterfly/source/img/bg/
没有 bg 文件夹就新建。

三、创建切换脚本

在 themes/butterfly/source/img/bg/ 新建文件 theme-bg.js，内容如下（直接复制）：

/* 白天/夜间随机背景切换 | Butterfly 主题专用 */
(function () {
  const LIGHT_TOTAL = 2;   // 白天壁纸张数，按需改
  const DARK_TOTAL  = 1;   // 夜间壁纸张数，按需改
  const folder      = '/img/bg/';
  const ext         = '.jpg';   // 若用 png 请改成 '.png'

  /* 读取当前主题 */
  function getTheme() {
    return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
  }

  /* 根据主题随机选一张 */
  function randomImg(theme) {
    const total = theme === 'dark' ? DARK_TOTAL : LIGHT_TOTAL;
    const idx   = Math.floor(Math.random() * total) + 1;
    return `${folder}${theme}-${idx}${ext}`;
  }

  /* 设置背景 */
  function setBg() {
    const img = randomImg(getTheme());
    document.body.style.background = `url(${img}) no-repeat center/cover fixed`;
  }

  /* 初始化 */
  setBg();

  /* 监听主题切换（Butterfly 默认按钮会改 data-theme） */
  new MutationObserver(setBg)
    .observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
})();

保存后先用浏览器访问
http://localhost:4000/img/bg/theme-bg.js
看能否 200 返回，若 404 则是路径或 hexo g 未成功。

四、把脚本注入页面

打开 Hexo 根目录 的 _config.butterfly.yml（注意不是主题的 _config.yml），定位到 inject: 节点，新增底部引用：

1
2
3

inject:
  bottom:
    - <script src="/img/bg/theme-bg.js"></script>

注意：

如果以前添加过其他背景脚本（例如 /img/bg/bg.js），请在其前面加 # 注释掉，避免冲突。
bottom 表示脚本放在 </body> 前，可确保 DOM 已加载完成。

五、清除缓存 & 预览

1
2
3

hexo clean
hexo generate
hexo server   # 本地预览

打开 http://localhost:4000
多刷新几次，确认白天壁纸随机切换。
点击右下角 🌙 进入暗黑模式 → 背景应立刻换成夜间壁纸；再点 ☀ 切回白天 → 恢复白天壁纸。
若无效果，请 F12 看 Console 有无 404 或 TOTAL is not defined 等报错，对照上文排查。

六、后期维护（增加或替换壁纸）

把新图继续按命名规则扔进 themes/butterfly/source/img/bg/。
修改 theme-bg.js 里对应的 LIGHT_TOTAL 或 DARK_TOTAL 数值即可，无需改其他代码。
若更换格式（png ↔ jpg），记得同步改 ext 变量。
每次改完执行一遍：
1
hexo clean && hexo g
上传服务器即可。

七、常见坑汇总

现象	可能原因	解决
背景全白/全黑	1. 图片 404 2. `TOTAL` 变量未定义	浏览器直接访问单张图确认路径；检查脚本是否用错旧变量
暗黑模式无图	`dark-1.jpg` 实际不存在或序号从 0 开始	文件名必须从 1 开始连续
文字被背景干扰	误引入半透明白色样式	删除 `/css/custom.css` 引用，仅保留背景脚本即可
切换主题背景不变	未监听 `data-theme` 或脚本放 `<head>` 过早	用本文提供的完整脚本 + `inject.bottom`

八、还原/卸载方法

只想恢复 Butterfly 默认纯白背景：

删除或注释掉 inject.bottom 里那一行脚本引用。
（可选）删除 themes/butterfly/source/img/bg/ 整个文件夹。
hexo clean && hexo g 即可回到无背景状态。

九、后续可拓展思路（非必须）

随机 Bing 每日图 → 把 randomImg 里改成调用 Bing API 并缓存。
每 N 小时自动换 → 加 setInterval(setBg, 时间)。
本地存储用户偏好 → 把最后一次随机到的序号写 localStorage，下次优先显示同一张。
CSS 变量平滑过渡 → 给 body 加 transition: background-image 1s; 即可淡入淡出（Butterfly 默认无冲突）。