TGX DSL на практике: 5 приёмов для быстрой вёрстки#

В прошлой статье мы разобрали, что такое TGX DSL и зачем он нужен. Теперь покажем, как применять его в реальной работе. Эти пять приёмов закрывают большинство типовых задач при вёрстке сайта.

1. Вывод списка записей через tgx:repeat#

Самый частый приём — вывести карточки из коллекции. Директива tgx:repeat повторяет один элемент для каждой записи.

<article tgx:repeat="/blog/?filter[status]=active -> item">
  <h2><< item.title >></h2>
  <a href="/blog/<< item.slug >>/">Читать</a>
</article>

Один блок заменяет ручную публикацию десятков карточек. Изменили запись — карточка обновилась сама.

2. Условия отображения через tgx:if#

Не всегда нужно показывать блок всем. Директива tgx:if оставляет элемент только когда условие истинно.

<section tgx:if="user.id">
  Добро пожаловать, << user.name >>!
</section>

Так можно скрывать блоки для гостей, показывать цены только авторизованным или выводить разные варианты контента.

3. Переиспользование блоков через tgx:component#

Повторяющиеся блоки — карточки, шапки, формы — выносятся в компоненты и подключаются одной строкой.

<tgx tgx:component="/components/card" payload="<< local >>"></tgx>

Изменили компонент один раз — он обновился на всех страницах, где подключён.

4. Подстановка значений в текст и атрибуты#

Выражения в двойных угловых скобках подставляют значения прямо в текст или атрибуты.

<h1><< page.title >></h1>
<a href="/product/<< product.slug >>/">Подробнее</a>

Значения можно форматировать: например, цену вывести в валюте через :currency2.

Цена: << product.Price:currency2 >>

5. Условные атрибуты#

Иногда нужно добавить атрибут только при определённом условии. Для этого используется суффикс $.

<option selected$="item.id == request.get.id"><< item.title >></option>

Такой приём удобен для выпадающих списков, чекбоксов и переключателей.

Итог#

Эти пять приёмов — база, с которой начинается практическая работа с TGX DSL. Они ускоряют вёрстку, убирают дубли и позволяют обновлять контент без правки кода. Освоив их, вы сможете собирать динамические страницы так же быстро, как статичные.