问如何在ruby on rails中分离css、javascript、管理端和访问者端的图像？
EN

Stack Overflow用户

提问于 2016-05-17 21:13:47

回答 2查看 237关注 0票数 1

我对ruby on rails非常陌生，我对ruby on rails中的css和java-script文件包含方法感到困惑。当我使用下面的代码文件包括在访问者端，它将包括所有的css和javascript文件在每一个页面，包括管理员，css和javascript也。

<head>
    <title>Content management system</title>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks' => true %>
    <%= csrf_meta_tags %>
</head>

当我查看html文件的源代码时，它将如下所示

<head>
    <title>Content management system</title>
    <link rel="stylesheet" media="all" href="/assets/admin/colorbox.self-c93dd376833c0e267b594921dd5498fcbb3f446331a35dc75372b26fd8c61167.css?body=1" data-turbolinks="true" />
<link rel="stylesheet" media="all" href="/assets/bootstrap.min.self-be6a645f213f356601ff235da5760f5080076f6168dec3d19d33587edbf75b95.css?body=1" data-turbolinks="true" />
<link rel="stylesheet" media="all" href="/assets/application.self-e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css?body=1" data-turbolinks="true" />
    <script src="/assets/jquery.self-167adc1826a31cef2040f73c4d3996900974f3b4578f72e2c1bfb814d66ca2fb.js?body=1" data-turbolinks="true"></script>
<script src="/assets/jquery_ujs.self-e87806d0cf4489aeb1bb7288016024e8de67fd18db693fe026fe3907581e53cd.js?body=1" data-turbolinks="true"></script>
<script src="/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1" data-turbolinks="true"></script>
<script src="/assets/bootstrap.min.self-f2d64b74536a49f843b022431e37325973468a71c9b362343deb0b6c582e5ba0.js?body=1" data-turbolinks="true"></script>
<script src="/assets/application.self-3b8dabdc891efe46b9a144b400ad69e37d7e5876bdc39dee783419a69d7ca819.js?body=1" data-turbolinks="true"></script>
    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="Y+tOunCBKVwpv7hfpg2+OFA7XBQTjldPTMRb3SC8DHUkUfrOfxkMBYiFLwGPSVAJiCzS21WsFtY179tcsa9I9A==" />
</head>

我只想要特定的css和javascript文件应该包括在访问者方面。

文件夹结构这只是一个示例结构

app
-assets
 -fonts
 -mages
  -admin
    -1.jpg
    -2.jpg
  -visitors
     -3.jpg
     -4.jpg 
 -javascripts
  -1.js
  -2.js
  -admin
    -3.js 
 -stylesheets
   -1.css
   -2.css
   -admin
    -3.css

ruby-on-rails

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-05-17 21:58:42

在代码示例中，application.js和application.css是资产管道使用的清单文件，用于声明从视图中调用stylesheet_link_tag或javascript_include_tag时加载的内容。

但是，application文件名正是Rails使用的默认清单名称。只要它与stylesheet_link_tag或javascript_include_tag中的调用相匹配，就可以将其更改为任何您想要的内容。因此，要隔离在您的管理和主站点中加载的特定资产，只需将application.js和application.css分解为单独的文件，每个文件都加载在站点的相应域中。

您还可能需要添加要由资产管道加载的新清单文件：

config.assets.precompile << 'app/assets/javascripts/admin.js'
config.assets.precompile << 'app/assets/stylesheets/admin.scss.css'

应用程序中的定义如下所示：

app/views/layouts/admin.html.erb

<head>
    <title>Content management system</title>
    <%= stylesheet_link_tag 'admin', media: 'all', 'data-turbolinks' => true %>
    <%= javascript_include_tag 'admin', 'data-turbolinks' => true %>
    <%= csrf_meta_tags %>
</head>

app/controllers/admin_controller.rb

class AdminController < ApplicationController
   layout 'layouts/admin'

   # ...
end


app
-assets
 -fonts
 -mages
  -admin
    -1.jpg
    -2.jpg
  -visitors
     -3.jpg
     -4.jpg 
 -javascripts
  -1.js
  -2.js
   admin.js <-- included by admin.html.erb layout
  -admin
    -3.js 
 -stylesheets
   -1.css
   -2.css
   admin.css <-- Also included by admin.html.erb
   -admin
    -3.css

然后定义admin.scss.css和admin.js，就像定义应用程序清单一样：

admin.js

 *= require_tree './admin'

票数 2

Stack Overflow用户

发布于 2016-05-18 04:14:03

只需将资产添加到您希望它工作的每个单独文件中即可。

在erb文件中：

<%= stylesheet_include_tag 'your_css_file.css' %>

<%= javascript_include_tag 'your_js_file.js' %>

在haml文件中：

= stylesheet_link_tag 'your_css_file.css'

= javascript_include_tag 'your_js_file.js'

在application.html.erb文件中(使用条件)：

<!-- Only load the assets when in contacts view -->
<% if current_page?(contacts_path) %>
  <%= stylesheet_include_tag 'your_css_file.css' %>
  <%= javascript_include_tag 'your_js_file.js' %>
<% end %>