Hexo Fluid 实现日夜模式 Banner 图片切换

在使用 Hexo 的 Fluid 主题时，我参考了这篇文章来实现日夜模式切换 Banner 图片

原方案思路是对的，也能跑通，但在实际使用中我遇到了两个明显痛点：

1. 首页默认被排除，无法切换 Banner 图片
2. 直接删除遮罩（mask）后，视觉效果很丑

本文记录我针对这两个问题的解决方案，供同样使用 Fluid 主题的朋友参考。

一、原方案的问题分析

问题 1：首页不支持切换 Banner

原文中通过一个 isExcludedPage 方法来判断是否启用日夜切换逻辑

而在默认逻辑里，首页 /是被排除的，也就是说首页不执行切换

这对我来说是不可接受的，因为首页 Banner 恰恰是最需要日夜区分的地方。

问题 2：直接移除遮罩，画面观感很差

原方案中对 Banner 遮罩的处理方式是直接将遮罩透明化

这样做的结果是：

• 图片亮度失控

• 字体对比度不足

• 页面“素”得很明显

遮罩不该被移除，而应该被“设计”

二、问题一的解决：让首页参与日夜切换

对backgroundize.js的isExcludedPage方法做小修改：

const isExcludedPage = (path) => {
  if (path === "/") return false; // true改为false启用首页切换
  return PAGE_EXCLUSIONS.some((excluded) => path.startsWith(excluded));
};

修改效果

页面	是否参与日夜切换
首页	✅
文章页	✅
排除页	❌

三、问题二的解决：用渐变遮罩代替“删除遮罩”

相比 CSS 覆盖，我选择了 直接用 JavaScript 接管遮罩层样式，这是目前在 Fluid 中最稳定的方案。

核心思路是将纯色遮罩改为渐变透明遮罩

const removeBannerMask = () => {
  const mask = document.querySelector("#banner .mask");
  if (!mask) return;

  mask.style.background = `
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0.35) 40%,
      rgba(0, 0, 0, 0.15) 70%,
      rgba(0, 0, 0, 0) 100%
    )
  `;
};