Rails：如何安装 keywords.js？

我想在我的应用程序上实现此功能，但我不知道如何安装它？您能否发布一步一步的信息，以便我了解要放置哪些文件，因为我尝试按照 github 页面上的说明进行操作，但没有成功。

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

index.html --> 我把代码放进去视图/布局/application.html

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

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

app.js --> 我把它放进去资产/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');
});

keywords.json --> 我把它放进去资产/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 设置它，但我让它与接下来的步骤一起工作：

1. 下载 Particle.js 文件，这将为您提供 JS 文件和 json 文件，如果将其保存在公共文件夹中，效果会更好；如果将其存储在 Amazon S3 等服务中，效果会更好。 因此，第一步是将副本存储到粒子.js供应商文件夹内的文件。

   
   
       your_project/vendor/assets/javascripts/particles.js 
     

2. 之后，您需要修改assets.rb文件，该文件存储在配置/初始化/ folder.

   
   
     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 )
     
     

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

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

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

请记住，您不需要指向vendor当您在其中使用资源时，文件夹中，因为我们告诉 Rails，在资产.rb文件我们还将上传一些文件到此文件夹。

5. 现在，将运行代码放入主布局中。我在我的里面做的页脚.html.erb文件，您可以将其粘贴到任何您想要的位置。

   
   
     <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 文件的第二个参数，我们就差不多准备好了。另请记住，您必须填写要在屏幕上显示的配置

6. Add the id到你想要显示的元素，例如：

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

一切都准备好了。

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

      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.