问题描述
我正在学习 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>
/* 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>