javascript - Ruby on Rails - 集成现有元素 - 在哪里放置 css/js 文件并调用它们？

Question

我已经下载AdminLTE Bootstrap theme并根据我的需要修改它。作为单独的页面，它们工作得很好。这是工作示例的结构:

├───homepage.html
├───dashboard.html
├───(... other html pages)
├───bower_components                                 
│   ├───bootstrap                                    
│   │   ├───dist                                     
│   │   │   ├───css                                  
│   │   │   ├───fonts                                
│   │   │   └───js                                   
│   │   ├───fonts                                    
│   │   ├───grunt                                    
│   │   ├───js                                       
│   │   ├───less                                     
│   │   │   └───mixins                               
│   │   └───nuget                                    
│   ├───bootstrap-datepicker                         
│   │   ├───.github                                  
│   │   ├───build                                    
│   │   ├───dist                                     
│   │   │   ├───css                                  
... other bootstrap components, which I will use. 
│   ├───Ionicons                                     
│   │   ├───css                                      
│   │   ├───fonts                                    
│   │   ├───less                                     
│   │   ├───png                                      
│   │   │   └───512                                  
│   │   ├───scss                                     
│   │   └───src                                      
│   ├───jquery                                       
│   │   ├───dist                                     
│   │   ├───external                                 
│   │   │   └───sizzle                               
│   │   │       └───dist                             
│   │   └───src                                      
│   │       ├───ajax                                 
│   │       │   └───var                              
...
│   └───select2                                      
│       ├───.github                                  
│       ├───dist                                     
│       │   ├───css                                  
│       │   └───js                                   
│       │       └───i18n                             
│       ├───docs                                     
│       ├───src                                      
├───dist                   # AdminLTE native css, img and js                          
│   ├───css                                          
│   │   ├───alt                                      
│   │   └───skins                                    
│   ├───img                                          
│   │   └───credit                                   
│   └───js                                           
│       └───pages                                    
└───plugins                  # other plugins I may use                        
    ├───bootstrap-slider                             
    ├───bootstrap-wysihtml5                                                        
    ├───input-mask                                   
    │   └───phone-codes                              
    ├───jQueryUI                                     
    ├───jvectormap                                   
    ├───pace                                         
    └───timepicker    

大致上，我有 bower_componets、dist 和 plugins，AdminLTE 将 css/js 文件和我修改后的 html 页面放在根目录中。我已将 image/css/js 路径更改为相对路径，并且它正在运行。

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">

但是，在 Ruby on Rails 中，我被告知将所有 css 文件放入 app/assets/stylesheets/ 并将所有 js 文件放入 app/assets/javascripts/ , 编译整个文件使用。我将所有页面放在 public/static_pages 中，当我运行服务器时，页面呈现，但没有 css，没有找到 js，因为相对路径在 html 中硬编码。

我的问题:

是否有更简单的方法以 Rails 方式集成我的元素，以便不更改此目录结构？重新组织所有这些是一项耗时的工作，而我想要的是一个简单的演示，静态类型。我仍在学习，想知道是否可以在以静态方式组织资源的同时以铁路方式绑定(bind)数据。

我正在使用 Rails 5.1。

附言:

css/js文件应该放到vendor吗？

Answer 1

我解决了这个问题:

1. 将所有必要的 js/css 放入 app/assets
2. 通过将每一个添加到预编译数组(config/initializers/assets.rb)来预编译它们。

等于:

Rails.application.config.assets.precompile += %w( _all-skins.css AdminLTE.css bootstrap.css font-awesome.css ionicons.css)
Rails.application.config.assets.precompile += %w( adminlte.js bootstrap.js demo.js home_js.js)

1. 无需触摸 application.js , application.css . //require_tree .都做了。

2. 注释掉所有<stylesheet>和 <script>页面中使用这些文件的行。它们已经过时了。

3. 在 app/views/layouts/application.html.rb 中使用它们:

也就是说:

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<!-- AdminLTE specific css -->
<%= stylesheet_link_tag 'AdminLTE', 'bootstrap', '_all-skins', 'font-awesome', 'ionicons' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- AdminLTE specific js -->
<%= javascript_include_tag 'adminlte', 'bootstrap', 'demo' %>
<!-- real external js -->
<%= stylesheet_link_tag :application, "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic" %>

1. 特定于页面的脚本应包含在单独的文件中，例如我的 homepage有home_js.js ;创建另一个文件，将其放入 app/assets/javascripts ，将其包含到预编译数组中，但不在 application.html.erb 中使用它, 但在真实内容页面 pages/homepage.html.erb : <%= javascript_include_tag "home_js" %> .通过这种方式，您无法阻止额外的预编译工作，但您只需在一个页面中使用它们，而不是在所有页面中使用它们。

我知道有更好的解决方案，因为通过这种方式我必须非常清楚地识别哪个页面使用了哪些脚本/css，并且只将所有页面使用的脚本/css 添加到 application.html.rb 中以防止加载不必要的资源，但至少它正在运行。欢迎任何改进。