Poupe suas páginas, ponha somente o CSS e o Javascript necessário com Ruby on Rails

Hoje em dia cada byte a mais no seu código pode significar gigabites de tráfego ali na frente, por isso é necessário utilizar em cada página que é renderizada somente o que é preciso para aquela página rodar.

O ideal é pôr o stylesheet_link_tag e o javascript_include_tag dentro de cada view, somente com os arquivos necessários. Porém, surge um problema grave, que é o fato de o elemento <link> não poder ficar fora do elemento <head>, ou seja, se você usar um layout padrão com n views, o seu arquivo que contém as Stylesheets ficará fora do elemento <head>, tornando seu código fora do padrão da w3C, o que para muitos não é importante, para mim é imprescindível.

Mas como o Rails é muito bom, também pensaram nisso. O método de pôr stylesheets e javascripts que estão na view dentro do elemento <head> é muito simples.

app/views/layouts/application.rhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <meta name="language" content="pt-br" />
    <meta name="generator" content="emacs" />
    <title>Título da sua página</title>

    <%= javascript_include_tag :defaults %>

    <!--  Pega os blocos de CSS e Javascript e exibe nesta região da sua marcação. -->
    <%= yield(:page_javascript) %>
    <%= yield(:page_stylesheet) %>
  </head>
  <body>
    <div id="wrap" >
      <%= yield %>
    </div>
  </body>
</html>

app/views/teste/view.rhtml

<% content_for(:page_stylesheet) do %>
  <%= stylesheet_link_tag 'redboox' %>
<% end %>

<% content_for(:page_javascript) do %>
  <%= javascript_include_tag 'redbox' %>
<% end %>

<div>
  <h4>Seu html aqui...</h4>
  ...
  ...
  ...
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>