Rails nested layout_html/css_WEB-ITnose-HTML-Tutorial-php.cn

Rails nested layout_html/css_WEB-ITnose

WBOY

Freigeben： 2016-06-21 08:51:37

Original

1411 Leute haben es durchsucht

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>

Nach dem Login kopieren

现在需要另一个子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>

Nach dem Login kopieren

这样可以解决问题但不完美，没有体现出继承关系来，如果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

Nach dem Login kopieren

然后 layouts/main.html.erb就可以变成这样的了

<div class="container">  <%= yield %>  <div class="sidebar">    ...  </div></div><% parent_layout "application" %>

Nach dem Login kopieren

直接在子模板中指定父模板，完美的继承关系，而且可以进行多次，比如

layouts/profile.html.erb

<div class="profile">  <%= render 'profile_nav' %>  <%= yield %></div><% parent_layout "main" %>

Nach dem Login kopieren

最后这3个layout的关系如下：

application < main < profile

Reference

http://m.onkey.org/nested-layouts

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Rails nested layout_html/css_WEB-ITnose

问题

嵌套模板

Reference