Rails：如何安装particles.js？ [英] Rails: How do I install particles.js?

问题描述

我想在我的应用上实现这个，但我不知道如何安装它？你可以一步一步地发布，这样我就可以理解放在哪里的文件，因为我试图按照github页面上的说明进行操作并且没有成功。

I want to implement this on my app but I have no clue how I could install this? Can you post a step by step so that I may understand what files to put where as I've tried to follow the instructions on the github page and got not success.

http://vincentgarreau.com/particles.js/#default

index.html - >我把代码放在 views / layouts / application.html

index.html --> I put code it in views/layouts/application.html

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

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

---

app.js - >我把它放入 assets / javascript / application.js

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

---

particles.json - >我把它放入 assets / javascript / application.js

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 10,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 80,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 300,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 12,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 800,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 800,
        "size": 80,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

推荐答案

我无法用gem设置它，但我让它工作了接下来的步骤：

I couldn't set this with the gem, but i made it work with the next steps:

1. 下载Particle.js文件，这将为您提供JS文件以及json文件如果你保存在公共文件夹或更好的内容，将更好，如果您将其作为Amazon S3存储在服务中。
   因此，第一步是将副本存储到供应商文件夹中的 particles.js 文件。

    your_project/vendor/assets/javascripts/particles.js 

之后，你需要修改assets.rb文件，它存储在 config / initializers / 文件夹中。

  your_project/config/initializers/assets.rb
  
    Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'javascripts') 
    Rails.application.config.assets.precompile += %w( .js .es6 )
  

将JSON文件插入公共文件夹中，或者如果可以的话，最好像我告诉你的那样在Amazon S3中存储它服务。这将为您提供适合我们的路线。

Insert the JSON file inside the public folder or if you can, it's better store it as i told you, in an Amazon S3 service. This will give you a route that will work for us.

转到主文件夹并在应用程序的javascript资产中，打开 application.js 文件并插入下一个更改。这可能与您的配置有所不同：

Go to the main folder and inside the application javascript assets, open the application.js file and insert the next changes. This probably can be different in regard to your configuration:

  //= require jquery
  //= require jquery_ujs
  //= require tether
  //= require bootstrap-sprockets
  //= require turbolinks
  //= require particles

请记住，使用时无需指向供应商文件夹由于我们告诉Rails，在 assets.rb 文件中，我们还会将一些文件上传到此文件夹。

Remember that you don't need to point to the vendor folder when you are using assets on it because we tell to Rails, inside the assets.rb file we will also upload some file to this folder.

1. 现在，将正在运行的代码放在主布局中。我是在 footer.html.erb 文件中完成的，您可以将其粘贴到任意位置。

1. Now, put the running code inside your main layout. I did it inside my footer.html.erb file, you can paste it wherever you want.

  <script type="text/javascript">
    particlesJS.load('particles-js', 'https://s3-##-west-#.amazonaws.com/your_project/particles.json', function() {
    console.log('callback - particles.js config loaded');
 });
  </script>

更改用于存储JSON文件的第二个参数，以及我们差不多准备好了。还记得，你必须填写你想要在屏幕上显示的配置

Change the second parameter for which you will use to store the JSON file, and we are almost ready. And also remember, you have to fill it with the configurations you want to display in screen

1. 添加 id 指向您要显示的元素，例如：

1. Add the id to the element you want to display, for example:

  <div class="jumbotron jumbotron-fluid" id="particles-js">

一切准备就绪。

请记住在终端中运行命令：

Remember run the command in terminal:

      rails assets:precompile #in development environment if you want to test it. 
    

运行：

      RAILS_ENV=production rails assets:precompile #if you want to run as a production environment.
    

这篇关于Rails：如何安装particles.js？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！