particles.js 无法显示通常是因为 javascript 文件未正确加载或执行顺序错误；最常见原因是缺少对初始化脚本（如 app.js）的引用，或该引用位置不当——必须置于 body 结束前且在 particles.js 之后。

要使 Particles.js 在网页中正常渲染粒子效果，需确保三个关键环节协同工作：引入核心库、提供配置容器、执行初始化逻辑。缺一不可。

首先，在 index.html 的 <head> 或 <body> 底部引入 Particles.js 官方 CDN（推荐使用稳定版本）：

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

其次，在 HTML 中定义一个用于承载粒子画布的容器（通常为 div），并设置明确的宽高与定位：

<div id="particles-js" style="width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: -1;"></div>

⚠️ 注意：该容器必须存在且可渲染（避免 display: none 或父元素无尺寸），否则 canvas 将无法正确初始化。

最关键一步是——必须显式引入并执行你的自定义初始化脚本（如 app.js）。该文件负责调用 particlesJS() 并传入配置参数。许多开发者仅引入 particles.min.js，却遗漏了这一步，导致页面“静默失败”，控制台也无报错。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

请确认你的 index.html 中，在 </body> 闭合标签之前，按如下顺序引入脚本：

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="app.js"></script> <!-- ✅ 必须在此处，且在 particles.js 之后 -->

其中 app.js 内容应类似：

// app.js
particlesJS('particles-js', {
  particles: {
    number: { value: 80 },
    color: { value: '#ffffff' },
    shape: { type: 'circle' },
    opacity: { value: 0.5 },
    size: { value: 3 }
  },
  interactivity: {
    detect_on: 'canvas',
    events: { onhover: { enable: true, mode: 'repulse' } }
  }
});

? 补充提示：

• 若使用本地文件，请检查浏览器开发者工具的 Network 面板，确认 app.js 和 particles.min.js 均返回 200 状态；
• 不要在 DOM 尚未就绪时调用 particlesJS()，app.js 放在 </body> 前已天然规避此问题；
• 避免重复初始化（如多次调用 particlesJS() 同一容器），可能导致异常行为。

完成以上配置后刷新页面，粒子动画即可正常呈现。这不是 bug，而是典型的“初始化缺失”问题——Particles.js 本身不自动运行，它依赖你主动触发。