5.1.1 Навигация по сайту
Когда мы последний раз видели файл шаблона сайта application.html.erb в Листинге 4.3, мы только что добавили к нему таблицы стилей Blueprint, используя Rails помощник stylesheet_link_tag. Пришло время добавить еще пару таблиц стилей, одну специально для интернет-браузеров Explorer и одну для нашего (скоро-будет-добавлен) пользовательского CSS. Мы также добавим несколько дополнительных (div-ов), несколько id и class-ов, и запустим навигацию по нашему сайту. Законченный файл — в Листинге 5.1; объяснения различных частей последуют сразу за ним. Если вы не хотите откладывать удовольствие, вы можете посмотреть на результаты в Рис. 5.2. (Примечание: это (пока) не очень приятно.)
app/views/layouts/application.html.erb<!DOCTYPE html> <html> <head> <title><%= title %></title> <%= csrf_meta_tag %> <!--[if lt IE 9]> <script src="https://html5shiv.googlecode.com/svn/trunk/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' %> </head> <body> <div class="container"> <header> <%= image_tag("logo.png", :alt => "Sample App", :class => "round") %> <nav class="round"> <ul> <li><%= link_to "Home", '#' %></li> <li><%= link_to "Help", '#' %></li> <li><%= link_to "Sign in", '#' %></li> </ul> </nav> </header> <section class="round"> <%= yield %> </section> </div> </body> </html>
Давайте просмотрим новые элементы, сверху донизу. Как вкратце отмечалось в Разделе 3.1, Rails 3 по умолчанию использует HTML5 (о чем говорит doctype <!DOCTYPE html>); т.к. HTML5 — новый стандарт, и некоторые браузеры (особенно Internet Explorer) пока не полностью его поддерживают, так что мы включим JavaScript код (известный как “HTML5 shiv”) чтобы обойти это затруднение:
<!--[if lt IE 9]> <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Немного странный синтаксис
<!--[if lt IE 9]>
включает закомментированную строку, только если версия Microsoft Internet Explorer (IE) ниже чем 9 (if lt IE 9). Чудной [if lt IE 9] синтаксис не является частью Rails; это условный комментарий поддерживаемый браузерами Internet Explorer специально для подобных ситуаций. Это хорошая вещь, хотя бы потому, что это означает, что мы можем включить дополнительную таблицу стилей только для IE браузеров версии менее 9, не затрагивая такие браузеры как Firefox и Safari.
После строки, включающей стили Blueprint (впервые представлена в Листинге 4.4), идет другая Internet Explorer–специфичная строка, в этот раз это стиль, который включается только если версия Internet Explorer ниже чем 8 (if lt IE 8):
<!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie' %><![endif]-->
IE имеет большое количество “индивидуальных особенностей” (особенно до версии 8), и с Blueprint поставляется специальный ie.css файл, фиксирующий значительную часть из них.
За IE стилем идет ссылка на файл, который еще не существует, custom.css, в котором мы разместим наши пользовательские CSS:
<%= stylesheet_link_tag 'custom', :media => 'screen' %>
CSS простит нам даже отсутствие файла — без него наша страница все равно будет работать нормально. (Мы создадим custom.css в Разделе 5.1.2.)
В следующем разделе расположился контейнер div окружающий навигацию по сайту и контент, контейнер определяется div тегом с классом container. Этот контейнер DIV необходим Blueprint-у (см. подробности в Blueprint tutorial). Далее идут header и section элементы; header содержит логотип "sample app" (будет добавлен позже) и навигацию по сайту (nav). И последний элемент - section, содержащий основной контент сайта:
<div class="container"> <header> <%= image_tag("logo.png", :alt => "Sample App", :class => "round") %> <nav class="round"> <ul> <li><%= link_to "Home", '#' %></li> <li><%= link_to "Help", '#' %></li> <li><%= link_to "Sign in", '#' %></li> </ul> </nav> </header> <section class="round"> <%= yield %> </section> </div>
div тег в HTML это generic division (# "родовое отделение" — если верить автопереводчику :) ); он не делает ничего, кроме разделения документа на отдельные части. В старом стиле HTML, div теги использовали почти для всех разделов сайта, но HTML5 добавил header, nav, и section элементы для разделов, общих для многих приложений. Всем элементам HTML, включая дивы и новые HTML5 элементы, могут быть присвоены классы2 и id (идентификаторы); это всего лишь ярлыки, и они полезны для создания стиля с CSS (Раздел 5.1.2). Основное различие между классами и идентификаторами, в том, что классы могут быть использованы несколько раз на странице, а идентификаторы могут быть использованы лишь один раз.
Внутри header находится Rails помощник, называемый image_tag:
<%= image_tag("logo.png", :alt => "Sample App", :class => "round") %>
Отметим, что, как и со stylesheet_link_tag (Раздел 4.3.4), мы передаем хэш опций, в данном случае для назначения alt и class атрибутов image тега, используются символы :alt и :class. Чтобы прояснить это, давайте посмотрим на HTML который этот тег производит:3
<img alt="Sample App" class="round" src="/images/logo.png" />
alt атрибут, это то, что будет отображаться, если нет изображения,4 а class будет использоваться для создания стиля в Разделе 5.1.2. (Rails помощники часто берут опции хэшей именно таким образом, что позволяет нам гибко добавлять произвольные варианты HTML, не покидая Rails.) Вы можете увидеть результаты на Рис. 5.2; логотип мы добавим в конце этого раздела.
Второй элемент внутри header это список навигационных ссылок, сделанный с использованием тега ненумерованного списка — ul, и тега элемента списка li:
<nav class="round"> <ul> <li><%= link_to "Home", '#' %></li> <li><%= link_to "Help", '#' %></li> <li><%= link_to "Sign in", '#' %></li> </ul> </nav>
Этот список использует Rails помощник link_to для создания ссылок (которые мы создавали непосредственно с якорным (анкорным) тегом a в Разделе 3.3.2); Первый аргумент это текст ссылки, а второй это URL. Мы заполним URL-адреса именованными маршрутами в Разделе 5.2.3, но сейчас мы используем заглушки URL ’#’ обычно применяемые в веб-дизайне. После Rails обработки этого шаблона и оценки Embedded Ruby, список выглядит следующим образом:
<nav class="round"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Help</a></li> <li><a href="#">Sign in</a></li> </ul> </nav>
Наш шаблон теперь завершен, и мы можем посмотреть на результаты, посетив, например, Home страницу. В ожидании добавления пользователей на наш сайт в Главе 8, давайте добавим signup (регистрация) ссылку в home.html.erb представление (Листинг 5.2).
app/views/pages/home.html.erb<h1>Sample App</h1> <p> This is the home page for the <a href="https://railstutorial.org/">Ruby on Rails Tutorial</a> sample application. </p> <%= link_to "Sign up now!", '#', :class => "signup_button round" %>
Как и в предыдущем использовании link_to, это только создает ссылку-заглушку вида
<a href="#" class="signup_button round">Sign up now!</a>
Отметим еще раз, повторяющуюся тему опций хэшей, которые в данном случае используются для добавления пары CSS классов в анкорный(якорный, привязки) тег. Вы могли заметить, что a тег здесь имеет два класса, разделенные пробелом:
<a href="#" class="signup_button round">
Это удобно для общего случая элемента с двумя различными типами стилей.
Теперь мы, наконец, готовы увидеть плоды наших трудов (Рис. 5.2).5 Говорите "Не впечатляет"? Может быть. К счастью, однако, мы проделали хорошую работу, прописав для наших HTML элементов внятные классы и идентификаторы, которые позволят нам добавить стиль на сайт с помощью CSS.
Рисунок 5.2: Home страница (/pages/home) без логотипа и пользовательского CSS.
Прежде чем мы перейдем к CSS стайлингу, давайте заменим альтернативный текст логотипа на изображение логотипа, который вы можете загрузить на
https://railstutorial.org/images/sample_app/logo.png
Поместите логотип в public/images чтобы Rails смог его найти. Результат — в Рис. 5.3.
Рисунок 5.3: Home страница (/pages/home) с логотипом, но без ползовательского CSS.
