如何根据我的布局加载不同的资产？

Question

我在/ views/layouts中有3个布局,用于我网站的3个不同部分.

我的资产看起来像:

/javascripts/layout1/*.js
/javascripts/layout2/*.js
/javascripts/layout3/*.js

/stylesheets/layout1/*.css
/stylesheets/layout2/*.css
/stylesheets/layout3/*.css

现在在一个特定的布局中,比如layout1,我怎么才能只为这个布局包含样式/ javascript文件？

Answer 1

您可以按照以下五个步骤实现此目的

注意:我假设layout1 layout2和layout3是application.js和application.css等清单文件

1)为新布局创建清单文件

在assets/javascripts /上创建以下js文件

layout1.js

//= require_tree ./layout1

layout2.js

//= require_tree ./layout2

layout3.js

//= require_tree ./layout3

在assets/stylesheets上创建以下css文件

layout1.css

/*  
*= require_tree ./layout1
*/

layout2.css

/*
*= require_tree ./layout1
*/

layout3.css

/*
 *= require_tree ./layout1
 */

2)添加此行 config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( layout1.js layout1.css layout2.js layout2.css layout3.js layout3.css )

3)在各个布局中包含以下行

layout1.html.erb

<%= stylesheet_link_tag    'layout1', media: 'all', 'data-turbolinks-track' => true %>

<%= javascript_include_tag 'layout1', 'data-turbolinks-track' => true %>

layout2.html.erb

<%= stylesheet_link_tag    'layout2', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'layout2', 'data-turbolinks-track' => true %>

layout3.html.erb

<%= stylesheet_link_tag    'layout3', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'layout3', 'data-turbolinks-track' => true %>

4)在控制器中包含布局

layout_one_controller.rb

class LayoutOneController < ApplicationController
    layout 'layout1'
    def index
    end
end

layout_two_controller.rb

class LayoutTwoController < ApplicationController
    layout 'layout2'
    def indiex
    end
end

layout_three_controller.rb

class LayoutThreeController < ApplicationController
    layout 'layout3'
    def index
    end
end

5)重启你的申请