Где можно почитать хорошие туториалы по принципам работы шаблонизаторов Haml, Slim?

Question

[Сергей]

Добрый день.
Я занимаюсь обычной версткой(правда уже знаком с препроцессорами типа Sass+compass). Но на данный момент возникла задача перевести статичный хтмл сайт на генератор статических сайтов. Мой выбор пал на Middleman. Данный генератор использует в качестве шаблонизатора erb по умолчанию, а так же понимает Haml и Slim. Я начал делать шаблоны на Slim, хотя до сих пор посматриваю в сторону Haml, так как он мне кажется понятнее. Однако столкнулся с тем, что я совсем не понимаю как работать с переменными, циклами в шаблонизаторах. Хотелось бы почитать на доступном языке, с большим количеством примеров и желательно на русском про шаблонизаторы вообще и про данные в частности.

Так как опыт работы верстальщиком у меня полтора года и я никогда до этого не сталкивался с шаблонизаторами, да и циклы с переменными для меня не тривиальная задача. Представление имею, но на практике не сталкиваюсь. Например не понимаю как реализовать навигационное меню сайта, чтобы страница на которой мы находимся подсвечивалась и переставала быть ссылкой. Буду рад за любую помощь.

Правильно ли я понимаю, что в Slim и Haml используется синтаксис Ruby? Нужно ли знать его, для того, чтобы работать с шаблонизаторами. Спасибо.

Answer 1

[CapeRatel]

Слим очень прост. Работает на отступах.
Есть переменая @orders (Массив с заказами)

- @orders.each do |order|
  = order.title
  br
  = order.price
  .class#id(style="background: yellow;")
    - if order.price > 200
      p Это тег p и цена больше 200
    - else
      h2 Это тег h2
      span(style="color: red") А тут мы вставим прайс из руби кода внутри строки #{order.price} вот так

Ставишь "равно" когда надо юзеру показывать хелперы или данные из переменной
Ставишь "Тире" когда не надо. Используем циклы и проверки if else
Мы не пишем div если у него есть class или id.
Синтаксис как в css

.class -  пишется с точкой перед названием класса
.header-menu

#id - id пишется через хэш
#menu
#toggle-menu

можно компоновать

#toggle-menu.red.col-md-4.some-class(style="display: inline-block") А пробел поставил и уже текст

хочешь родной синтаксис пишешь в скобках

#menu(class="red white col-md-10 pull-right" data-menu="toggle")

Это не все, но надеюсь немного понятно.

Comments

[Сергей]

Спасибо большое за развернутый ответ! Действительно стало понятнее!

[virgus1970]

Можете пояснить поподробнее как в Slim подключать другие файлы через include?

Answer 2

[Eugene Burmakin]

slim от haml отличается, пожалуй, только отсутствием ненужных символов процента (%). Что там может быть понятнее?

Нет, руби знать не обязательно. Пишите на слиме себе и не мучайтесь. Логика там очень простая, все завязано на отступы.

Comments

[Сергей]

Это понятно. Я понимаю синтаксис, я не понимаю как работать с циклами, операторами if, else. Откуда брать переменные, где их обозначать, как передавать, как присваивать им значения. В доках по слиму очень мало написано.

[Eugene Burmakin]

Hando: а, тогда, конечно, надо хотя бы основы Ruby изучить.