HTML中如何配置跳转引用子文件夹下Darkmode站点的全部资源

浏览器加载页面、解析资源的路径规则完全基于当前页面的URL所在路径计算相对路径，和HTML代码在本地磁盘的存放位置没有关联。你遇到的两类问题本质都是路径不匹配：

• 直接跳转到裸路径Darkmode时，多数静态服务器收到目录访问请求，只会自动加载目录下的index.html作为默认入口，你目录下的入口文件叫darkmode.html，不是服务器默认识别的文件名，就会返回403/404错误
• 直接写location.href='darkmode.html'时，相当于在主站所在的目录下找darkmode.html，和你实际存放在Darkmode子文件夹里的入口文件位置不匹配；就算碰巧找到对应HTML，页面里引用的CSS、JS相对路径也会基于主站目录计算，找不到子文件夹里的资源就会加载失败

• 修正跳转的目标路径
  你原来写的带setTimeout的跳转逻辑本身没有问题，只需要把路径值替换成正确的相对路径即可，不需要改动其他代码：
  location.href = './Darkmode/darkmode.html';
  其中./代表和当前主站HTML页面同级的目录，会准确找到Darkmode文件夹下的darkmode.html入口。
• 保证子站点的资源正常加载（二选一即可）
  • 方案A：把Darkmode文件夹下的darkmode.html重命名为index.html，这是所有静态服务器默认识别的入口文件名。改完之后，你原来写的location.href='Darkmode'的跳转代码就能直接正常运行，服务器会自动加载这个index.html，页面里写的所有相对路径资源（比如css/main.css、js/common.js）都会基于Darkmode目录路径计算，正常加载。
  • 方案B：不想改入口文件名的话，在darkmode.html的<head>标签最开头加一行路径基准声明：
    <base href="./Darkmode/">
    加完之后，这个页面里所有的相对路径引用都会自动基于Darkmode目录计算，不需要挨个修改原来写的CSS、JS引用路径。
• 排查容易遗漏的路径问题
  • 线上服务器一般对路径大小写敏感，你写的跳转地址、资源引用的文件夹名要和实际磁盘的文件名完全一致，比如文件夹叫Darkmode就不要写成darkmode，否则会出现文件找不到的问题
  • 子页面里的资源引用不要以/开头（比如/css/style.css），这类写法会从网站根目录查找资源，不会匹配到Darkmode子文件夹下的资源，会出现404

目前浏览器没有提供批量关联某个文件夹下所有资源的原生能力，所有资源加载都依赖明确的路径匹配。只要保证入口文件路径、资源引用路径和实际磁盘的文件存放位置完全对齐，就能实现子站点的正常访问，不需要额外写批量关联的代码。

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