静态站点生成器11ty(Eleventy)自定义深色模式按钮无响应问题咨询

• 静态资源未被Eleventy输出：Eleventy默认仅处理模板类文件，根目录下的global.js不会被自动复制到编译后的_site输出目录，浏览器请求时返回404找不到对应资源。
• JS引用路径错误：你使用的相对路径../global.js在不同层级的页面会解析出不同的地址，比如/posts/2021-0520/页面会请求/posts/global.js，路径不统一导致资源加载失败。

1. 配置Eleventy静态资源复制规则 #

在项目根目录新建.eleventy.js配置文件（如果已有则直接修改），添加以下内容，指定Eleventy编译时将静态资源直接复制到输出目录：

module.exports = function(eleventyConfig) {
  // 复制css文件夹和global.js到_site目录
  eleventyConfig.addPassthroughCopy("css");
  eleventyConfig.addPassthroughCopy("global.js");
  return {};
};

2. 修正JS引用路径 #

修改base-layout.njk中的script标签，将相对路径改为绝对路径，保证所有层级的页面都能正确加载资源：
将原有代码

<script type="text/javascript" src="../global.js"></script>

修改为

<script type="text/javascript" src="/global.js"></script>

3. 确认样式和JS逻辑匹配 #

确保你的site.css中已经编写了深色模式对应的类样式，global.js中存在可正常执行的darkToggle函数，示例代码参考：
site.css 深色样式示例

/* 浅色模式默认样式 */
body {
  background-color: #ffffff;
  color: #212121;
}
/* 深色模式样式 */
body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

global.js 逻辑示例

function darkToggle() {
  const body = document.body;
  body.classList.toggle('dark-mode');
  // 持久化存储用户选择
  localStorage.setItem('darkModeEnabled', body.classList.contains('dark-mode'));
}
// 页面加载时恢复用户之前的选择
window.addEventListener('DOMContentLoaded', () => {
  if (localStorage.getItem('darkModeEnabled') === 'true') {
    document.body.classList.add('dark-mode');
  }
})

完成以上修改后重启Eleventy开发服务，点击按钮即可正常触发深色模式切换。

内容的提问来源于stack exchange，提问作者Kabocha Porter