2017-10-10 20:44:57 +00:00
|
|
|
|
---
|
2024-10-20 21:46:35 +00:00
|
|
|
|
language: Haml
|
2017-10-10 20:44:57 +00:00
|
|
|
|
filename: learnhaml-ru.haml
|
|
|
|
|
|
contributors:
|
|
|
|
|
|
- ["Simon Neveu", "https://github.com/sneveu"]
|
|
|
|
|
|
- ["Vasiliy Petrov", "https://github.com/Saugardas"]
|
|
|
|
|
|
translators:
|
|
|
|
|
|
- ["Vasiliy Petrov", "https://github.com/Saugardas"]
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
Haml - язык разметки (в основном используемый с Ruby), с помощью которого могут быть легко описаны HTML-документы.
|
|
|
|
|
|
Он является популярной альтернативой используемому в Rails шаблонизатору (.erb), и позволяет вставлять Ruby-код в вашу разметку.
|
|
|
|
|
|
|
|
|
|
|
|
Haml убирает избыточность закрывающих тегов благодаря отступам.
|
|
|
|
|
|
В результате получается меньшая по размерам, хорошо структурированная, логичная и читаемая разметка.
|
|
|
|
|
|
|
|
|
|
|
|
Вы можете использовать Haml и вне Ruby-проекта. Установите гем Haml и используйте командную строку для конвертирования html-файлов:
|
|
|
|
|
|
|
|
|
|
|
|
```shell
|
|
|
|
|
|
$ haml input_file.haml output_file.html
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```haml
|
|
|
|
|
|
/ -------------------------------------------
|
|
|
|
|
|
/ Отступы
|
|
|
|
|
|
/ -------------------------------------------
|
|
|
|
|
|
|
|
|
|
|
|
/
|
|
|
|
|
|
Отступы являются важным элементом синтаксиса, поэтому они должны быть
|
|
|
|
|
|
одинаковыми во всём документе. Обычно используют два пробела,
|
|
|
|
|
|
но это не является обязательным правилом - можно использовать любое
|
|
|
|
|
|
количество пробелов для отступов. Главное, чтобы это количество было
|
|
|
|
|
|
одинаковым во всём документе.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/ -------------------------------------------
|
|
|
|
|
|
/ Комментарии
|
|
|
|
|
|
/ -------------------------------------------
|
|
|
|
|
|
|
2022-06-15 09:17:20 +00:00
|
|
|
|
/ Комментарии начинается с символа косой черты.
|
2017-10-10 20:44:57 +00:00
|
|
|
|
|
|
|
|
|
|
/
|
|
|
|
|
|
Для написания многострочного комментария расположите ваш комментарий
|
|
|
|
|
|
на следующем уровне вложенности от символа косой черты
|
|
|
|
|
|
|
|
|
|
|
|
-# "Скрытый" комментарий. Этот комментарий не попадёт в результирующий документ
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/ -------------------------------------------
|
|
|
|
|
|
/ Элементы 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
|
|
|
|
|
|
&= "Да & да"
|
|
|
|
|
|
|
|
|
|
|
|
/ выведет 'Да & да'
|
|
|
|
|
|
|
|
|
|
|
|
/
|
2022-06-15 09:17:20 +00:00
|
|
|
|
Чтобы выполнять Ruby-код без экранирования, можно использовать
|
2017-10-10 20:44:57 +00:00
|
|
|
|
"восклицательный знак" и "равно" (!=)
|
|
|
|
|
|
|
|
|
|
|
|
%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}"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/ -------------------------------------------
|
|
|
|
|
|
/ Фильтры
|
|
|
|
|
|
/ -------------------------------------------
|
|
|
|
|
|
|
|
|
|
|
|
/
|
2022-06-15 09:17:20 +00:00
|
|
|
|
Фильтры передают связанный блок текста в соответствующую
|
2017-10-10 20:44:57 +00:00
|
|
|
|
фильтрующую программу и возвращают результат в Haml
|
|
|
|
|
|
Фильтр обозначается двоеточием и названием фильтра:
|
|
|
|
|
|
|
|
|
|
|
|
/ Markdown filter
|
|
|
|
|
|
:markdown
|
2022-06-15 09:17:20 +00:00
|
|
|
|
# Заголовок
|
2017-10-10 20:44:57 +00:00
|
|
|
|
|
|
|
|
|
|
Текст **внутри** *блока*
|
|
|
|
|
|
|
|
|
|
|
|
/ Код выше будет скомпилирован в
|
|
|
|
|
|
<h1>Заголовок</h1>
|
|
|
|
|
|
|
|
|
|
|
|
<p>Текст <strong>внутри</strong> <em>блока</em></p>
|
|
|
|
|
|
|
2024-12-04 00:04:55 +00:00
|
|
|
|
/ JavaScript - фильтр
|
2017-10-10 20:44:57 +00:00
|
|
|
|
:javascript
|
|
|
|
|
|
console.log('This is inline <script>');
|
|
|
|
|
|
|
|
|
|
|
|
/ скомпилируется в:
|
|
|
|
|
|
<script>
|
|
|
|
|
|
console.log('This is inline <script>');
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
/
|
2022-06-15 09:17:20 +00:00
|
|
|
|
Существует множество типов фильтров (:markdown, :javascript, :coffee,
|
2017-10-10 20:44:57 +00:00
|
|
|
|
:css, :ruby и так далее). Вы можете определить собственный фильтр c
|
|
|
|
|
|
помощью Haml::Filters.
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## Дополнительные ресурсы
|
|
|
|
|
|
|
|
|
|
|
|
- [О Haml](https://haml.ru) - Хорошее введение, описывает преимущества Haml.
|
|
|
|
|
|
- [Документация](https://haml.ru/documentation/) - Документация Haml на русском языке.
|
