Hando
@Hando
Верстак

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

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

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

Правильно ли я понимаю, что в Slim и Haml используется синтаксис Ruby? Нужно ли знать его, для того, чтобы работать с шаблонизаторами. Спасибо.
  • Вопрос задан
  • 1918 просмотров
Решения вопроса 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")


Это не все, но надеюсь немного понятно.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Freika
@Freika
Ruby on Rails developer
slim от haml отличается, пожалуй, только отсутствием ненужных символов процента (%). Что там может быть понятнее?

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы