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

Question

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

更具体地说，我在从项目文件夹加载 .json 文件（错误 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 文件以便从脚本正确加载。

非常感谢。

Answer 1

这应该可以满足您的需求。一个简短的解释是，它加载 app.js 中的 particle.js 库以及 bootstrap 要求，并从下面显示的 public 直接加载配置，然后添加 HTML 脚本需要的头部数据运行。最后，将 div 添加到正文中，它将加载。

resources/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>

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

Laravel: Add library (Particles.js) and load .json config (particles.json)

laravel

particles.js