Laravel：添加库 (Particles.js) 并加载 .json 配置 (particles.json)

如何解决Laravel：添加库 (Particles.js) 并加载 .json 配置 (particles.json)

我正在学习 Laravel（使用 Laravel 8.x）。我不明白如何在项目中正确集成包 (particles.js)。

更具体地说，我在从项目文件夹加载 .json 文件 (ERR 404) 时遇到问题。

安装

已经在 npm 中安装了 particlesJS (https://github.com/VincentGarreau/particles.js/)

npm install particles.js

使用

我在视图中添加了以下组件 (index.blade.html)


<div id="particles-js"></div>

<script src="particles.js"></script>

我将此代码添加到 resources/app.js


/* particlesJS.load(@dom-id,@path-json,@callback (optional)); */
particlesJS.load('particles-js','assets/particles.json',function() {
  console.log('callback - particles.js config loaded');
});

但我不知道在哪里保存 .json 文件以从脚本正确加载。

非常感谢。

解决方法

这应该可以满足您的要求。一个简单的解释是，它会在 app.js 中加载particle.js lib 和 bootstrap require，并从如下所示的公共直接加载配置，然后添加脚本运行所需的 HTML 头数据。最后，您将 div 添加到正文中，它将加载。

资源/js/app.js

require('./bootstrap');
import 'particles.js/particles';
const particlesJS = window.particlesJS;

// JSON file is located in the directory of 'public/js/particlejs-config.json'
particlesJS.load('particles-js','js/particlesjs-config.json',function() {
    console.log('callback - particles.js config loaded');
});

index.blade.html

<head>
    ...
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="{{ asset('js/app.js') }}"></script>
    ...
</head>

<body>
    <div id="particles-js">
        rest of html
    </div>
</body>