如何使用JavaScript更改Pug中include的引用源？

嘿，这个问题得先搞清楚Pug的include到底是怎么工作的——它是在编译阶段就把外部文件的内容嵌入到最终的HTML里了，等页面运行起来的时候，JavaScript根本碰不到原来的include引用路径。所以直接用JS改include源是行不通的，得换个思路，给你几个实用的方案：

方案1：预编译所有SVG，用JS控制显示隐藏 #

如果你的SVG数量不多，最简单的方式就是把所有需要用到的SVG都通过include嵌入到HTML里，然后用CSS默认隐藏，通过JS切换显示状态。

Pug代码示例 #

.services_description figure
  .svg-container
    // 给每个SVG添加唯一ID，方便JS定位
    include tools/jade_includes/components/svgs/vision_1#svg-vision-1
    include tools/jade_includes/components/svgs/vision_2#svg-vision-2
    include tools/jade_includes/components/svgs/vision_3#svg-vision-3

CSS控制显示 #

.svg-container svg {
  display: none; /* 默认隐藏所有SVG */
}
.svg-container svg.active {
  display: block; /* 只显示带active类的SVG */
}

JavaScript切换逻辑 #

// 假设你有切换按钮，每个按钮带data-target属性指定要显示的SVG ID
document.querySelectorAll('.svg-switch-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const targetId = btn.dataset.target;
    
    // 先移除所有SVG的active类
    document.querySelectorAll('.svg-container svg').forEach(svg => {
      svg.classList.remove('active');
    });
    
    // 给目标SVG添加active类，显示它
    document.getElementById(targetId).classList.add('active');
  });
});

这个方案的好处是不用额外发请求，切换速度快，适合SVG数量少的场景。

方案2：用JavaScript动态加载SVG文件 #

如果你的SVG数量很多，不想把所有内容都塞进HTML里，可以用JS按需加载预编译好的SVG文件。注意：这里的SVG得是纯SVG格式，如果你的原文件是Pug格式的SVG（比如用了Pug变量、混合宏），需要先把它们编译成纯SVG文件（可以通过Pug编译器单独编译这些文件）。

JavaScript加载逻辑 #

function loadTargetSvg(svgFileName) {
  const figureElement = document.querySelector('.services_description figure');
  const svgPath = `tools/jade_includes/components/svgs/${svgFileName}.svg`; // 替换成你的实际路径

  fetch(svgPath)
    .then(response => {
      if (!response.ok) throw new Error('SVG加载失败');
      return response.text();
    })
    .then(svgContent => {
      figureElement.innerHTML = svgContent; // 替换figure里的内容为新SVG
    })
    .catch(err => console.error(err));
}

// 调用示例：切换到vision_2.svg
loadTargetSvg('vision_2');

这个方案的好处是初始页面体积小，适合SVG数量多的场景，但切换时会有网络请求的延迟。

方案3：编译时动态切换（仅适用于构建阶段） #

如果你的切换逻辑是在构建时决定的（比如根据环境变量、配置文件切换），可以用Pug变量来动态指定include的路径，但这不是运行时的动态切换，只能在构建HTML的时候确定要加载哪个SVG。

Pug代码示例 #

- const activeSvg = 'vision_1'; // 这个变量可以从构建脚本传入（比如Webpack、Gulp）
.services_description figure
  include tools/jade_includes/components/svgs/#{activeSvg}

比如用Webpack的话，可以通过DefinePlugin把变量注入到Pug中，实现构建时的动态切换。

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