diff options
| -rw-r--r-- | ru-ru/haml-ru.html.markdown | 233 |
1 files changed, 233 insertions, 0 deletions
diff --git a/ru-ru/haml-ru.html.markdown b/ru-ru/haml-ru.html.markdown new file mode 100644 index 00000000..c2f8852e --- /dev/null +++ b/ru-ru/haml-ru.html.markdown @@ -0,0 +1,233 @@ +--- +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 + +/ Обратите внимание на отсутствие закрывающих тегов. Код выше выведет: + <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. + +``` + +## Дополнительные ресурсы + +- [О Haml](https://haml.ru) - Хорошее введение, описывает преимущества Haml. +- [Документация](https://haml.ru/documentation/) - Документация Haml на русском языке. |