Jekyll站点嵌入JavaScript时HTML元素重复报错如何修复

p5.js实例重复初始化是重复DOM元素生成的直接原因，和Jekyll本身的页面渲染逻辑无关，常见触发场景有三类：

• 脚本被重复执行：布局模板、文章正文、公共组件中重复引入了同一份p5 sketch脚本，或是无刷新跳转类插件缓存页面状态后，在页面切换/返回时重复运行初始化代码
• p5全局模式的默认机制问题：使用p5全局模式时，脚本每执行一次就会自动创建新的canvas实例追加到目标容器，不会自动清理历史生成的实例，两次执行就会生成defaultCanvas0、defaultCanvas1两个canvas，先生成的实例因被覆盖会失去交互响应，表现为一个元素正常运行、一个完全失效
• jQuery目录功能的DOM操作问题：生成目录时如果直接通过html()方法拼接包含script标签的DOM片段，会导致片段内的脚本被二次执行，触发重复实例创建。

1. 排查并移除重复的脚本引入 #

逐一检查三个位置的脚本引用，确保单份p5 sketch脚本在页面生命周期内只加载执行一次：

• 核对文章Markdown源文件、对应post布局文件、自定义include组件，删除重复的同路径p5脚本引入标签
• 若站点使用了TurboLinks/PJAX类无刷新跳转插件，在页面销毁回调中增加p5实例清理逻辑
• 调整jQuery目录生成逻辑，禁止直接克隆、拼接带script标签的内容片段，避免触发脚本二次执行。

2. 切换p5为实例模式，手动管控生命周期 #

放弃p5默认全局模式写法，改用实例模式绑定固定容器，初始化前主动清空容器、销毁历史实例，参考代码如下：

// 获取p5挂载容器
const sketchContainer = document.getElementById('simple-sketch-holder');
// 清空容器内残留的历史canvas
sketchContainer.innerHTML = '';
// 销毁已存在的旧p5实例
if (window._p5SketchInstance) {
  window._p5SketchInstance.remove();
}
// 初始化新的p5实例并挂载到指定容器
window._p5SketchInstance = new p5((sketch) => {
  sketch.setup = () => {
    sketch.createCanvas(710, 400);
    // 原有setup逻辑写在这里
  };
  sketch.draw = () => {
    // 原有draw逻辑写在这里
  };
}, sketchContainer);

3. Jekyll场景适配配置 #

如果在Markdown文件中直接引入p5脚本，且站点启用了TurboLinks类缓存插件，给script标签增加对应属性禁止缓存阶段重复执行脚本：

<script type="text/javascript" src="simple_sketch.js" data-turbolinks-eval="false"></script>

同时检查Kramdown渲染器配置、文章Front Matter头信息，确认没有自动重复追加同一份p5脚本资源。

打开浏览器开发者工具的元素面板，检查simple-sketch-holder容器内仅存在1个canvas元素，p5动画、交互逻辑可正常响应，不会出现一个静止失效、一个正常运行的异常状态。

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