--- language: haml filename: learnhaml-ru.haml contributors: - ["Simon Neveu", "https://github.com/sneveu"] - ["Vasiliy Petrov", "https://github.com/Saugardas"] translators: - ["Vasiliy Petrov", "https://github.com/Saugardas"] lang: ru-ru --- Haml - язык разметки (в основном используемый с Ruby), с помощью которого могут быть легко описаны HTML-документы. Он является популярной альтернативой используемому в Rails шаблонизатору (.erb), и позволяет вставлять Ruby-код в вашу разметку. Haml убирает избыточность закрывающих тегов благодаря отступам. В результате получается меньшая по размерам, хорошо структурированная, логичная и читаемая разметка. Вы можете использовать Haml и вне Ruby-проекта. Установите гем Haml и используйте командную строку для конвертирования html-файлов: ```shell $ haml input_file.haml output_file.html ``` ```haml / ------------------------------------------- / Отступы / ------------------------------------------- / Отступы являются важным элементом синтаксиса, поэтому они должны быть одинаковыми во всём документе. Обычно используют два пробела, но это не является обязательным правилом - можно использовать любое количество пробелов для отступов. Главное, чтобы это количество было одинаковым во всём документе. / ------------------------------------------- / Комментарии / ------------------------------------------- / Комментари начинается с символа косой черты. / Для написания многострочного комментария расположите ваш комментарий на следующем уровне вложенности от символа косой черты -# "Скрытый" комментарий. Этот комментарий не попадёт в результирующий документ / ------------------------------------------- / Элементы HTML / ------------------------------------------- / Чтобы написать тег, используйте символ процента (%) и название тега %body %header %nav / Обратите внимание на отсутствие закрывающих тегов. Код выше выведет:
/ Так как тег div используется очень часто, его можно опустить. Можно указать только имя класса или идентификатора (. или #) Например код: %div.my_class %div#my_id / Можно записать: .my_class #my_id / Для добавления контента в тег, просто добавьте текст после объявления тега %h1 Заголовок / Для многострочного содержания используйте отступы %p Многострочное содержание в две строки. / Амперсанд - равно (&=) обрабатывают Ruby код также, как и без амперсанда, но HTML-символы в результате будут экранированы. Например: %p &= "Да & да" / выведет 'Да & да' / Чтобы выполнять Ruby-код без экранрования, можно использовать "восклицательный знак" и "равно" (!=) %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 # Заголовк Текст **внутри** *блока* / Код выше будет скомпилирован в

Заголовок

Текст внутри блока

/ Javascript - фильтр :javascript console.log('This is inline / Существует множество типов фильров (:markdown, :javascript, :coffee, :css, :ruby и так далее). Вы можете определить собственный фильтр c помощью Haml::Filters. ``` ## Дополнительные ресурсы - [О Haml](https://haml.ru) - Хорошее введение, описывает преимущества Haml. - [Документация](https://haml.ru/documentation/) - Документация Haml на русском языке.