Ruby Templating With Slim: Часть 2

Во второй и последней части этой мини-серии мы завершим это введение разделами о выводе кода Ruby, интерполяции, обычном тексте и о том, как настроить Slim в соответствии с вашими потребностями. После этой статьи вы должны быть готовы к небольшому действию Slim.

Вывод кода

Вы уже видели немного о том, как использовать Ruby в ваших шаблонах. Этот раздел дает вам все необходимое, чтобы использовать это. В первой статье мы уже использовали Ruby в наших шаблонах. Позвольте мне напомнить вам, что я имею в виду:

Стройное

Как вы можете видеть, внутри этого тега head мы уже использовали несколько методов из Rails для работы со стилями и JavaScript — ничего особенного. Все, что вам нужно сделать, чтобы выполнить код Ruby, это добавить его к знаку равенства = . Если ваш код должен распространяться на несколько строк, просто добавьте обратную косую черту \ в конце каждой строки и переходите к следующей. Если вы заканчиваете строку запятой, то вам не нужен обратный слеш. Приятное прикосновение, если вы спросите меня.

Давайте посмотрим на другой, более конкретный пример. Написание форм часто является проблемой — много шаблонного кода, много повторений и все эти страшные знаки <%= %> в ERB. Это может стать грязным в кратчайшие сроки. Может быть лучше, а?

Еврорадио

Много чего написать для создания нового объекта @agent , не так ли? Slim позволяет вам справиться с этим гораздо более кратко. Мы просто держим знак равенства и избавляемся от большинства других вещей. Tadaa!

Стройное

Вы можете ясно видеть, почему этот проект называется Slim. Так много лишнего жира ушло. Не говори мне, что тебе не нравится то, что ты видишь — я знаю, что ты копаешь это! Просто знак = и вы можете заполнить вашу разметку кодом Ruby — в данном случае, конечно, из Rails. И когда вы сравниваете его с HTML-кодом, представленным на последней странице, трудно игнорировать, насколько компактным на самом деле является Slim.

HTML-вывод

Вспомните первоначальный вопрос, которым руководствуется основная команда Slim: «Какой минимум необходим для этой работы?» Когда вы смотрите на окончательный вывод HTML, я думаю, будет справедливо сказать, что Slim достаточно успешно ответил на этот вопрос — никаких жалоб на моем конце. Я хочу добавить еще пару небольших примеров, чтобы дать вам больше возможностей привыкнуть к тому, как это выглядит в Slim.

Этот фрагмент ERB …

… Становится таким в Слиме:

Еврорадио

Стройное

Вы также можете написать это более упорядоченным способом с помощью интерполяции. Вы не хотите сходить с ума от этого, хотя. Это будет выглядеть так:

Стройное

Текстовая интерполяция

Я упоминал об этом раньше кратко, но, поскольку это форма вывода кода Ruby, он также относится к этому разделу. Конечно, вы можете использовать стандартную интерполяцию текста из Ruby в своих шаблонах Slim.

Стройное

HTML

Как видно выше, простой ведущий обратный слеш \ избегает интерполяции.

Контрольный код

Еще один для дороги. Допустим, вы хотите использовать пару условных выражений в своем представлении. Подобно Haml, вы обозначаете код Ruby, который не должен выводиться на страницу простым тире - . Вы видели это в приведенном выше примере, где мы использовали это для перебора @agents без отображения конкретной части кода.

Хотя вы должны стараться избегать всевозможных условных выражений в своих представлениях, где это возможно, и пытаться найти лучшие ООП-решения для таких случаев — что является историей для другого времени — они будут выглядеть примерно так:

Стройное

Еврорадио

Если вы хотите вывести код без экранирования HTML, просто используйте два знака равенства == . Это оно!

Прежде чем мы продолжим, я определенно должен уделить время, чтобы упомянуть об этом: как вы, наверное, знаете, тонны кода представления — или тонны кода Ruby в нашем контексте — являются серьезным запахом и должны быть минимизированы в любое время. То, что Slim делает еще более заманчивым наложение ваших шаблонов тоннами логики, не означает, что вам следует это делать. Практика ограничения в этом отделе! Сделано правильно, с другой стороны, Slim делает действительно элегантным вводить Ruby, где это необходимо.

Встроенный HTML

Если вы чувствуете необходимость писать HTML в ваших шаблонах Slim, у вас есть возможность. Я не использовал эту функцию и не хотел бы использовать ее, но, возможно, на переходном этапе это может быть полезно для новичков. Давайте посмотрим супер быстро.

Стройное

Когда Слим встречает левую угловую скобку < , он знает, что вы хотите смешать какой-то HTML.

Дословный текст (слово в слово)

Символ трубы | сообщает Slim, что вы хотите получить простой текст — слово в слово — и просто копирует строку. По сути, это позволяет избежать любой обработки. В документации сказано, что если вы хотите записать дословный текст в несколько строк, вы должны делать отступ текста с каждым разрывом строки.

Стройное

HTML-вывод

Скриншот

Если вы поместите текст в ту же строку, что и символ канала, вы можете установить левое поле после канала плюс один пробел. Из любопытства я немного обманулся и нашел следующие результаты. Только последний вариант варианта имеет небольшой очевидный сбой, о котором вы должны знать: он проглатывает первое слово предложения.

Стройное

Скриншот

То, как вывод выводится в вашу HTML-разметку, немного отличается.

Комментарии

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

Косая черта / — это все, что вам нужно, чтобы закомментировать любой код.

Стройное

Boom! И теперь этот абзац исчез со страницы. Этот комментарий не оставляет следов в окончательной разметке HTML. Вам просто нужно применить его к родительскому селектору, и все его дочерние элементы также будут закомментированы. Таким образом, даже комментарии невелики и минимальны.

С другой стороны, если вам нужен HTML-комментарий <!-- --> который отображается в окончательном отображаемом выводе, вам просто нужно добавить восклицательный знак ! после косой черты

Стройное

HTML-вывод

Ухоженная!

Пользовательские ярлыки

Мы все время использовали ярлыки. Когда вы набираете точку . или символ хеша # вы говорите Slim, что хотите использовать предопределенные ярлыки для классов и идентификаторов. Это, безусловно, очень хороший вариант по умолчанию, но что вы можете сделать, чтобы расширить его и создать свои собственные небольшие фрагменты фрагментов? Мы можем сделать это для тегов и атрибутов. Добро пожаловать в удивительный Slim!

В Rails нам просто нужно настроить инициализатор со следующим шаблоном:

конфиг / Инициализаторы / slim.rb

В приложениях Sinatra вы просто добавляете ту же конфигурацию в любом месте ниже линии, где вам require 'slim' .

your_sinatra_app.rb

Вы можете установить параметры в Slim :: Engine, предоставив хэш с нужным вам ярлыком. В приведенном выше примере мы указали Slim использовать c в качестве ярлыка для тега container . Вы бы использовали это в своих файлах Slim:

Стройное

И обработанный HTML будет выглядеть, конечно, так:

HTML

Довольно мило, а? Но ты не думал, что на этом музыка останавливается? Мы можем пойти дальше этого. Позвольте мне привести пример, который немного более сложный:

конфиг / Инициализаторы / slim.rb

В этом примере я не только создал пользовательские теги, но и предоставил удобные пользовательские атрибуты. Давайте рассмотрим это шаг за шагом. Кстати, я разбил хэш опций на несколько строк, чтобы сделать его читаемым и избежать длинной строки кода, на которую никто не любит наткнуться. Читает намного приятнее, тебе не кажется?

Посредством символа амперсанда & теперь мы можем создать входной тег, и нам просто нужно передать ему тип, который следует сразу за амперсандом. Мы можем использовать любой символ, который имеет смысл использовать; нет необходимости использовать тот же, который я сделал. Будьте осторожны и постарайтесь принимать бескомпромиссные решения в этом отделе.

Стройное

HTML-вывод

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

Далее, если мне нужен атрибут role , теперь я могу просто поставить его перед символом @ .

Стройное

HTML-вывод

Обновление: атрибут role — это семантический подход для описания роли рассматриваемого элемента — если вам необходимо определить назначение элемента.

Видите ли, через точку мы получаем class="person" а @admin дал нам role="admin" . Довольно удобный денди, но мы можем сделать еще один маленький шаг и использовать массив, чтобы указать несколько атрибутов, которые должны быть созданы с помощью одного ярлыка.

Стройное

HTML-вывод

Поскольку мы связали массив атрибутов для нашего ярлыка ^ , Slim создает атрибуты data-role и role одновременно с помощью одного символа. Это может пригодиться. Представьте, что вы хотите вывести элемент, подобный следующему, и можете сделать это кратко с помощью ярлыка и некоторого кода Ruby.

HTML

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

Обновление: атрибуты данных используются, чтобы иметь некоторые личные данные на вашей странице или в приложении. Материал, который помогает вам фильтровать контент, например. Это пользовательские атрибуты, которые можно использовать для всех элементов HTML. Использование их в целях JavaScript — еще одна распространенная практика. Это также очень удобно для тестирования элементов на странице, если вы хотите убедиться, что определенные элементы отображаются, и вы не хотите, чтобы дизайнеры связывались с вашими стилями.

Настройка Slim

Перед тем как уйти, я хотел показать вам немного заглянуть в обширные параметры конфигурации и то, как вы их применяете. Для Rails вы должны создать файл среды, такой как config/environments/development.rb и указать нужные параметры. Вы просто размещаете свою конфигурацию в каком-то месте внутри блока Rails.application.configure .

В этой конфигурации я удостоверился, что тег по умолчанию, который создается, если имя тега опущено, является <p> не тегом div , который является стандартным параметром. Кроме того, я настроил размер вкладки, чтобы использовать два пробела, и, наконец, добавил еще два разделителя для обтекания атрибутов тегов. Теперь я могу использовать ‹ › и « » для этого. Не очень полезно, но хорошо для демонстрационных целей.

В приведенном ниже примере вы можете видеть, что все разделители для оболочек атрибутов создают одинаковые выходные данные, а также .some-class или #some-id создают теги <p> по умолчанию.

Стройное

HTML-вывод

В качестве альтернативы вы также можете установить этот материал в config/initializers/slim.rb как я показал вам в разделе о пользовательских ярлыках.

Для Sinatra это то же самое упражнение, которое также обсуждалось в разделе ярлыков. Просто установите свои варианты где-нибудь под вашим require 'slim' и все готово.

Посмотрите документацию в разделе «Доступные опции», чтобы узнать больше о том, что доступно для конфигурации. Slim дает вам много возможностей для игры.

Последние мысли

Это в основном это. Есть одна или две более сложные темы, которые вы должны изучить в случае необходимости, но я подумал, что они в основном не подходят для начинающих и не используются в повседневной жизни. Я хотел упростить ситуацию и показать вам все, что вам нужно для быстрого перехода на этот потрясающий движок шаблонов. Веселитесь, и я надеюсь, что Slim теперь одна из ваших любимых новых игрушек!