TGX DSL: быстрый старт для HTML-верстальщика

TGX DSL позволяет оставить привычную HTML-верстку и добавить динамику через атрибуты `tgx:`. Ниже набор директив, с которых удобно начинать в реальных проектах.

1. Подключайте переиспользуемые блоки

Если у вас есть общий хедер и футер, подключайте их компонентами:

<tgx tgx:component="header"></tgx>
<main>...</main>
<tgx tgx:component="footer"></tgx>

2. Создавайте локальные переменные через tgx:set

<tgx tgx:set="limit=6"></tgx>
<p>Показываем: </p>

Это удобно для повторов, условий и настройки блоков прямо в шаблоне.

3. Управляйте выводом через tgx:if и tgx:else

<div tgx:if="user.id">Здравствуйте, </div>
<div tgx:else>Войдите в аккаунт</div>

4. Выводите списки через tgx:repeat

<article tgx:repeat="../?filter[status]=active">
  <h2></h2>
</article>

`tgx:repeat` забирает записи коллекции и рендерит один блок для каждой записи.

5. Ускоряйте верстку через tgx:ui

<section tgx:ui="py:6 tb=py:8 dt=py:10">...</section>

Можно быстро задавать отступы и адаптивность, не раздувая CSS на прототипе.

6. Делайте AJAX без ручного JS

<form tgx:ajax-post="/api/v1/contact" tgx:ajax-target="#result">
  ...
</form>

Для динамических блоков используйте `tgx:ajax-get/post/...` и `tgx:swap`.

7. Разделяйте контент и логику

Хорошая практика: шаблон хранит структуру и правила вывода, а данные идут из коллекций и API. Это упрощает поддержку и повторное использование страниц.

8. Тестируйте шаблон до публикации

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

Короткий итог

Если вы уже верстаете на HTML/CSS, TGX DSL дает быстрый вход: компоненты, условия, повторы и AJAX прямо в разметке. Начните с 3-4 директив и расширяйте шаблон постепенно.