文章/答案/技术大牛

发布

社区首页 >问答首页 >Laravel:添加库(Particles.js)和加载.json配置(particles.json)

问Laravel:添加库(Particles.js)和加载.json配置(particles.json)
EN

Stack Overflow用户

提问于 2021-01-13 19:13:00

回答 1查看 856关注 0票数 1

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

更确切地说，我在从项目文件夹加载.json文件(ERR404)时遇到了问题。

安装

已经在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文件才能正确地从脚本中加载。

非常感谢。

laravel

particles.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-01-13 21:12:06

这应该能做你想要的。一个简单的解释是，它在particle.js中加载app.js中的HTML以及引导要求，并从下面所示的公共直接加载配置，然后添加脚本运行所需的head数据。最后，将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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65708409

复制

相似问题

问Laravel:添加库(Particles.js)和加载.json配置(particles.json)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Laravel:添加库(Particles.js)和加载.json配置(particles.json)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Laravel:添加库(Particles.js)和加载.json配置(particles.json)
EN