Получить исходный код: learnhaml.haml
Haml - язык разметки (в основном используемый с Ruby), с помощью которого могут быть легко описаны HTML-документы. Он является популярной альтернативой используемому в Rails шаблонизатору (.erb), и позволяет вставлять Ruby-код в вашу разметку.
Haml убирает избыточность закрывающих тегов благодаря отступам. В результате получается меньшая по размерам, хорошо структурированная, логичная и читаемая разметка.
Вы можете использовать Haml и вне Ruby-проекта. Установите гем Haml и используйте командную строку для конвертирования html-файлов:
$ haml input_file.haml output_file.html
/ -------------------------------------------
/ Отступы
/ -------------------------------------------
/
Отступы являются важным элементом синтаксиса, поэтому они должны быть
одинаковыми во всём документе. Обычно используют два пробела,
но это не является обязательным правилом - можно использовать любое
количество пробелов для отступов. Главное, чтобы это количество было
одинаковым во всём документе.
/ -------------------------------------------
/ Комментарии
/ -------------------------------------------
/ Комментарии начинается с символа косой черты.
/
Для написания многострочного комментария расположите ваш комментарий
на следующем уровне вложенности от символа косой черты
-# "Скрытый" комментарий. Этот комментарий не попадёт в результирующий документ
/ -------------------------------------------
/ Элементы HTML
/ -------------------------------------------
/ Чтобы написать тег, используйте символ процента (%) и название тега
%body
%header
%nav
/ Обратите внимание на отсутствие закрывающих тегов. Код выше выведет:
<body>
<header>
<nav></nav>
</header>
</body>
/
Так как тег div используется очень часто, его можно опустить.
Можно указать только имя класса или идентификатора (. или #)
Например код:
%div.my_class
%div#my_id
/ Можно записать:
.my_class
#my_id
/ Для добавления контента в тег, просто добавьте текст после объявления тега
%h1 Заголовок
/ Для многострочного содержания используйте отступы
%p
Многострочное содержание
в две строки.
/
Амперсанд - равно (&=) обрабатывают Ruby код также, как и без амперсанда,
но HTML-символы в результате будут экранированы. Например:
%p
&= "Да & да"
/ выведет 'Да & да'
/
Чтобы выполнять Ruby-код без экранирования, можно использовать
"восклицательный знак" и "равно" (!=)
%p
!= "Тег абзаца <p></p>"
/ выведет 'Тег абзаца <p></p>'
/ CSS - классы могут быть добавлены через точку от определения тега
%div.foo.bar
/ Или с помощью хеша атрибутов
%div{ :class => 'foo bar' }
/ Хеш атрибутов может быть добавлен для любого тега
%a{ :href => '#', :class => 'bar', :title => 'Bar' }
/ Для булевых атрибутов просто присвойте значение 'true'
%input{ :selected => true }
/ Для data - атрибутов присвойте ключу :data хеш с данными
%div{ :data => { :attribute => 'foo' } }
/ Для Ruby версии 1.9 или выше, можно использовать новый синтаксис хешей
%div{ data: { attribute: 'foo' } }
/ Также можно использовать HTML-синтаксис атрибутов
%a(href='#' title='bar')
/ Можно использовать оба варианта одновременно
%a(href='#'){ title: @my_class.title }
/ -------------------------------------------
/ Включение Ruby
/ -------------------------------------------
/ Для включения Ruby кода используйте знак "равно"
%h1= book.name
%p
= book.author
= book.publisher
/ Для выполнения Ruby кода без вывода в HTML, используйте знак дефиса
- books = ['book 1', 'book 2', 'book 3']
/
Можно выполнять любой Ruby код, например с блоками.
Закрывающий "end" не нужен, так как они будут закрыты автоматически,
основываясь на вложенности.
- books.shuffle.each_with_index do |book, index|
%h1= book
- if book do
%p This is a book
/ Добавление списка
%ul
%li
=item1
=item2
/ -------------------------------------------
/ Пример таблицы с классами Bootstrap'a
/ -------------------------------------------
%table.table.table-hover
%thead
%tr
%th Header 1
%th Header 2
%tr
%td Value1
%td value2
%tfoot
%tr
%td
Foot value
/ -------------------------------------------
/ Интерполяция Ruby кода
/ -------------------------------------------
/ Ruby код может быть интерполирован в текст с помощью #{}
%p Ваша самая любимая игра - #{best_game}
/ Тоже самое, что и:
%p= "Ваша самая любимая игра - #{best_game}"
/ -------------------------------------------
/ Фильтры
/ -------------------------------------------
/
Фильтры передают связанный блок текста в соответствующую
фильтрующую программу и возвращают результат в Haml
Фильтр обозначается двоеточием и названием фильтра:
/ Markdown filter
:markdown
# Заголовок
Текст **внутри** *блока*
/ Код выше будет скомпилирован в
<h1>Заголовок</h1>
<p>Текст <strong>внутри</strong> <em>блока</em></p>
/ JavaScript - фильтр
:javascript
console.log('This is inline <script>');
/ скомпилируется в:
<script>
console.log('This is inline <script>');
</script>
/
Существует множество типов фильтров (:markdown, :javascript, :coffee,
:css, :ruby и так далее). Вы можете определить собственный фильтр c
помощью Haml::Filters.
Хотите предложить свой перевод? Может быть, улучшение перевода? Откройте Issue в репозитории GitHub или сделайте pull request сами!
Первоначально предоставлено автором Simon Neveu, и обновлено 3 авторами.