Heim >Web-Frontend >HTML-Tutorial >Rails nested layout_html/css_WEB-ITnose
Rails nested layout_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:51:371448Durchsuche
12 Apr 2016| rails
问题
- 某rails项目 layouts/application.html.erb
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title><%= @title %></title> <meta name="keywords" content="<%= @keywords %>" /> <meta name="description" content="<%= @description %>" /> <%= csrf_meta_tags %> <%= action_cable_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> </head> <body> <%= yield %> <footer> ... </footer> </body></html>
现在需要另一个子layout，他 继承自layouts/application.html.erb，又有自己的内容，该怎么办呢？尽量把公共的部分抽出来，然后在不同的layout之间共享吗？
- layouts/main.html.erb
<!DOCTYPE html><html> <%= render 'head' %> <body> <div class="container"> <%= yield %> <div class="sidebar"> ... </div> </div> <%= render 'footer' %> </body></html>
这样可以解决问题但不完美，没有体现出 继承关系来，如果layout复杂，可能需要抽出很多的共享部分出来，而且子模板还是有很多重复的代码。
嵌套模板
在 application_helper.rb中加入下面的方法:
def parent_layout(layout) @view_flow.set(:layout, output_buffer) output = render(:file => "layouts/#{layout}") self.output_buffer = ActionView::OutputBuffer.new(output)end 然后 layouts/main.html.erb就可以变成这样的了
<div class="container"> <%= yield %> <div class="sidebar"> ... </div></div><% parent_layout "application" %>
直接在子模板中指定父模板，完美的继承关系，而且可以进行多次，比如
- layouts/profile.html.erb
<div class="profile"> <%= render 'profile_nav' %> <%= yield %></div><% parent_layout "main" %>
最后这3个layout的关系如下：
application < main < profile
Reference
http://m.onkey.org/nested-layouts
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：用CSS3实现图片动态效果_html/css_WEB-ITnoseNächster Artikel：DOM之行走在DOM中_html/css_WEB-ITnose