Mise en page (Rails)
Aller à la navigation
Aller à la recherche
| Fiche express | |
|---|---|
| Sujet | Layouts et partiels Rails |
| Fichier | app/views/layouts/application.html.erb
|
| Framework | Rails |
| Voir aussi | Helper (Rails) |
La mise en page (layout) Rails factorise la structure HTML commune à toutes les vues. On la découpe en partiels (fichiers préfixés _) rendus via render.
Layout principal
<!-- app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<%= csrf_meta_tag %>
<%= render 'layouts/stylesheets' %>
</head>
<body>
<div class="container">
<%= render 'layouts/header' %>
<section class="round">
<%= yield %>
</section>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
Exemple de modification d'une vue (app/views/pages/home.html.erb) et feuille CSS public/stylesheets/custom.css :
<%= link_to "S'inscrire !", '#', :class => "signup_button round" %>
Création de partiels
Feuilles de style (_stylesheets.html.erb) :
<!--[if lt IE 9]>
<script src="html5.js"></script>
<![endif]-->
<%= stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
<%= stylesheet_link_tag 'blueprint/print', :media => 'print' %>
<!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie' %><![endif]-->
<%= stylesheet_link_tag 'custom', :media => 'screen' %>
En-tête (_header.html.erb) :
<header>
<%= image_tag("logo.png", :alt => "Application exemple", :class => "round") %>
<nav class="round">
<ul>
<li><%= link_to "Accueil", '#' %></li>
<li><%= link_to "Aide", '#' %></li>
<li><%= link_to "Connexion", '#' %></li>
</ul>
</nav>
</header>
Pied de page (_footer.html.erb) :
<footer>
<nav class="round">
<ul>
<li><%= link_to "À Propos", '#' %></li>
<li><%= link_to "Contact", '#' %></li>
</ul>
</nav>
</footer>