learnxinyminutes-docs/haml.md at 29666fae5e4a7417e994983835fcf51b97ae3a4c

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
  &= "Да & да"

/ выведет 'Да &amp; да'

/
  Чтобы выполнять 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.

Дополнительные ресурсы

О Haml - Хорошее введение, описывает преимущества Haml.
Документация - Документация Haml на русском языке.

8.1 KiB Raw Blame History Unescape Escape

Дополнительные ресурсы

8.1 KiB

Raw Blame History