<section class="mb-4" id="faq-intro" lang="ru"> <h1 class="h2 mb-3">FAQ и документация Tagix: быстрый старт</h1> <p class="mb-0"> Эта страница — точка входа для тех, кто впервые работает с Tagix. Здесь вы найдете: с чего начать, где что находится, как не запутаться на старте и куда идти дальше. </p></section>
<section class="mb-4" lang="ru"> <h2 class="h4 mb-3">1. В чем смысл Tagix</h2> <p class="mb-0"> Tagix — это платформа для создания сайтов на основе HTML-верстки. Вы пишете обычный HTML и подключаете TGX-директивы, которые добавляют логику и функциональность. <br><br> Если вы знаете верстку, вы можете собирать полноценные сайты без программирования. Порог входа ниже, чем в классической разработке, а результат сопоставим с работой опытного разработчика. Такие сайты можно делать для себя, для клиентов и на фрилансе. </p></section>
<section class="mb-4" id="faq-how-it-works" lang="ru"> <h2 class="h4 mb-3">2. Как устроен сайт в Tagix</h2> <ul> <li><strong>Страницы</strong> — структура сайта и URL (<code>/pages/*</code>).</li> <li><strong>Шаблоны страниц</strong> — общий каркас страниц (<code>/page-templates/*</code>).</li> <li><strong>Компоненты</strong> — переиспользуемые блоки (header, footer, карточки и т.д.).</li> <li><strong>Данные</strong> — записи коллекций, выводимые через TGX-директивы.</li> </ul> <p class="mb-0"> Рекомендуемый порядок: сначала собрать страницы, затем вынести повторяющиеся части в компоненты. </p></section>
<section class="mb-4" id="faq-first-scenario" lang="ru"> <h2 class="h4 mb-3">3. Первый рабочий сценарий</h2> <ol> <li>Зарегистрируйтесь: <a href="/register/">/register/</a> и войдите: <a href="/login/">/login/</a>.</li> <li>Перейдите в кабинет: <a href="/dashboard/">/dashboard/</a> и создайте сайт на бесплатном субдомене.</li> <li>Создайте страницу и задайте ей понятный slug. У главной страницы slug по умолчанию — <code>index</code>.</li> <li>Создайте компоненты <code>header</code> и <code>footer</code> и подключите их через <code>tgx:component</code>.</li> <li>Добавьте контент и проверьте адаптивность.</li> <li>Повторяющиеся блоки вынесите в отдельные компоненты.</li> <li>Подключите форму (например, обратной связи) с <code>tgx:ajax-post</code> и проверьте ответ.</li> <li>Заполните SEO-поля и проверьте внутренние ссылки.</li> <li>Подключите собственный домен и проверьте доступ по нему.</li> </ol> <p class="mb-0"> Если для старта это кажется сложным — при создании сайта можно выбрать готовый шаблон. </p></section>
<section class="mb-4" id="faq-newbies" lang="ru"> <h2 class="h4 mb-3">4. Частые вопросы новичков</h2> <div class="accordion" id="faqNewbiesAccordion">
<div class="accordion-item"> <h3 class="accordion-header" id="newbieQ1"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#newbieA1"> Я не разработчик. Смогу ли я запустить сайт? </button> </h3> <div id="newbieA1" class="accordion-collapse collapse show"> <div class="accordion-body"> Да. Начните с готового шаблона и минимальных правок текста и блоков. TGX можно подключать постепенно — сначала базовые директивы. При необходимости позже легко доработать сайт с помощью верстальщика. </div> </div> </div>
<div class="accordion-item"> <h3 class="accordion-header" id="newbieQ2"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#newbieA2"> Где безопасно тестировать изменения? </button> </h3> <div id="newbieA2" class="accordion-collapse collapse"> <div class="accordion-body"> Используйте <a href="/sandbox/">sandbox</a>. Это изолированная среда, где можно проверять шаблоны до публикации. </div> </div> </div>
<div class="accordion-item"> <h3 class="accordion-header" id="newbieQ3"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#newbieA3"> С чего начать изучение TGX? </button> </h3> <div id="newbieA3" class="accordion-collapse collapse"> <div class="accordion-body"> Начните с базовых директив: <code>tgx:component</code>, <code>tgx:set</code>, <code>tgx:if</code>, <code>tgx:repeat</code>. Затем переходите к <code>tgx:ajax-*</code>. Для каждой директивы есть отдельная статья. </div> </div> </div>
<div class="accordion-item"> <h3 class="accordion-header" id="newbieQ4"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#newbieA4"> Где смотреть документацию и обновления? </button> </h3> <div id="newbieA4" class="accordion-collapse collapse"> <div class="accordion-body"> Полный справочник: <a href="/faq/">/faq/</a>.<br> Практика и кейсы: <a href="/blog/">/blog/</a>. </div> </div> </div>
</div></section>
<section class="mb-4" id="faq-next-steps" lang="ru"> <h2 class="h4 mb-3">5. Куда идти дальше</h2> <ul class="mb-0"> <li><a href="/blog/tgx-dsl-bystryy-start-dlya-html-verstalshchika/">Гайд по TGX DSL</a> — быстрый старт.</li> <li><a href="/blog/sandbox-tagix-kak-testirovat-tgx-shablony-do-publikatsii/">Гайд по sandbox</a> — тестирование без риска.</li> <li><a href="/blog/kak-podklyuchit-svoy-domen-v-tagix-poshagovyy-gayd/">Подключение домена</a> — пошагово.</li> </ul></section>
<section id="tgx-dictionary" lang="ru"><!-- TGXDIRECTIVESDICTIONARY_START --> <h3 class="h5 mt-4">Словарь TGX-директив (ссылки на страницы с пояснениями)</h3> <div class="table-responsive"> <table class="table table-sm table-bordered align-middle"> <thead class="table-light"> <tr> <th style="min-width:220px;">Директива</th> <th style="min-width:260px;">Что делает</th> <th style="min-width:260px;">Синтаксис</th> </tr> </thead> <tbody> <tr> <td><a href="/faq/tgx-component/"><code>tgx:component</code></a></td> <td>Подключает компонент или шаблон.</td> <td><code class="language-html d-block text-break"><tgx tgx:component="header"></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-set/"><code>tgx:set</code></a></td> <td>Создает/обновляет переменную в контексте.</td> <td><code class="language-html d-block text-break"><tgx tgx:set="showPromo=true"></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-if/"><code>tgx:if</code></a></td> <td>Условный вывод узла при истинном выражении.</td> <td><code class="language-html d-block text-break"><div tgx:if="user">...</div></code></td> </tr> <tr> <td><a href="/faq/tgx-else-if/"><code>tgx:else-if</code></a></td> <td>Дополнительная ветка условия.</td> <td><code class="language-html d-block text-break"><div tgx:else-if="role==admin">...</div></code></td> </tr> <tr> <td><a href="/faq/tgx-else/"><code>tgx:else</code></a></td> <td>Фолбэк-ветка, если предыдущие условия не сработали.</td> <td><code class="language-html d-block text-break"><div tgx:else>...</div></code></td> </tr> <tr> <td><a href="/faq/tgx-repeat/"><code>tgx:repeat</code></a></td> <td>Цикл по массиву/коллекции.</td> <td><code class="language-html d-block text-break"><li tgx:repeat="list -> item">...</li></code></td> </tr> <tr> <td><a href="/faq/tgx-repeat-text/"><code>tgx:repeat-text</code></a></td> <td>Повторяет текст/фрагмент как строку.</td> <td><code class="language-html d-block text-break"><span tgx:repeat-text="tags -> tag">#</span></code></td> </tr> <tr> <td><a href="/faq/tgx-ui/"><code>tgx:ui</code></a></td> <td>Шорткат utility-стилей.</td> <td><code class="language-html d-block text-break"><div tgx:ui="df aic jcc"></div></code></td> </tr> <tr> <td><a href="/faq/tgx-record-fields/"><code>tgx:record-fields</code></a></td> <td>Рендерит поля записи по схеме коллекции.</td> <td><code class="language-html d-block text-break"><tr tgx:record-fields="/contacts/">...</tr></code></td> </tr> <tr> <td><a href="/faq/tgx-input/"><code>tgx:input</code></a></td> <td>Рендерит конкретный тип input.</td> <td><code class="language-html d-block text-break"><tgx tgx:input="text" name="title"></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-ajax-get/"><code>tgx:ajax-get</code></a></td> <td>AJAX GET-шорткат.</td> <td><code class="language-html d-block text-break"><button tgx:ajax-get="/api/v1/posts"></button></code></td> </tr> <tr> <td><a href="/faq/tgx-ajax-post/"><code>tgx:ajax-post</code></a></td> <td>AJAX POST-шорткат.</td> <td><code class="language-html d-block text-break"><form tgx:ajax-post="/api/v1/contact"></form></code></td> </tr> <tr> <td><a href="/faq/tgx-ajax-put/"><code>tgx:ajax-put</code></a></td> <td>AJAX PUT-шорткат.</td> <td><code class="language-html d-block text-break"><form tgx:ajax-put="/api/v1/item/1"></form></code></td> </tr> <tr> <td><a href="/faq/tgx-ajax-patch/"><code>tgx:ajax-patch</code></a></td> <td>AJAX PATCH-шорткат.</td> <td><code class="language-html d-block text-break"><form tgx:ajax-patch="/api/v1/item/1"></form></code></td> </tr> <tr> <td><a href="/faq/tgx-ajax-delete/"><code>tgx:ajax-delete</code></a></td> <td>AJAX DELETE-шорткат.</td> <td><code class="language-html d-block text-break"><button tgx:ajax-delete="/api/v1/item/1"></button></code></td> </tr> <tr> <td><a href="/faq/tgx-swap/"><code>tgx:swap</code></a></td> <td>Задает стратегию замены HTML после ответа.</td> <td><code class="language-html d-block text-break">tgx:swap="#result,innerHTML"</code></td> </tr> <tr> <td><a href="/faq/tgx-target/"><code>tgx:target</code></a></td> <td>Определяет узел-получатель ответа.</td> <td><code class="language-html d-block text-break">tgx:target="#result"</code></td> </tr> <tr> <td><a href="/faq/tgx-trigger/"><code>tgx:trigger</code></a></td> <td>Событие запуска AJAX-действия.</td> <td><code class="language-html d-block text-break">tgx:trigger="change"</code></td> </tr> <tr> <td><a href="/faq/tgx-confirm/"><code>tgx:confirm</code></a></td> <td>Подтверждение действия перед запросом.</td> <td><code class="language-html d-block text-break">tgx:confirm="Удалить запись?"</code></td> </tr> <tr> <td><a href="/faq/tgx-dom-actions/"><code>tgx:dom-actions</code></a></td> <td>Правила разрешенных DOM-действий в редакторе.</td> <td><code class="language-html d-block text-break">tgx:dom-actions="admin -> edit,move,delete"</code></td> </tr> <tr> <td><a href="/faq/tgx-dom-fields/"><code>tgx:dom-fields</code></a></td> <td>Карта полей, редактируемых в DOM-модалке.</td> <td><code class="language-html d-block text-break">tgx:dom-fields="text,html,@href"</code></td> </tr> <tr> <td><a href="/faq/tgx-switch/"><code>tgx:switch</code></a></td> <td>Сохраняет значение в local.switch для последующих tgx:case.</td> <td><code class="language-html d-block text-break"><tgx tgx:switch="status"></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-case/"><code>tgx:case</code></a></td> <td>Ветка строгого сравнения с local.switch.</td> <td><code class="language-html d-block text-break"><div tgx:case="active">...</div></code></td> </tr> <tr> <td><a href="/faq/tgx-case-default/"><code>tgx:case-default</code></a></td> <td>Fallback-ветка для switch/case, когда совпадений нет.</td> <td><code class="language-html d-block text-break"><div tgx:case-default>...</div></code></td> </tr> <tr> <td><a href="/faq/tgx-session/"><code>tgx:session</code></a></td> <td>Проверка наличия ключа в $_SESSION.</td> <td><code class="language-html d-block text-break"><div tgx:session="user.id">...</div></code></td> </tr> <tr> <td><a href="/faq/tgx-admin/"><code>tgx:admin</code></a></td> <td>Проверка роли admin у текущего пользователя.</td> <td><code class="language-html d-block text-break"><section tgx:admin>...</section></code></td> </tr> <tr> <td><a href="/faq/tgx-member/"><code>tgx:member</code></a></td> <td>Проверка авторизованного пользователя (member).</td> <td><code class="language-html d-block text-break"><section tgx:member>...</section></code></td> </tr> <tr> <td><a href="/faq/tgx-guest/"><code>tgx:guest</code></a></td> <td>Проверка гостевого режима (не member).</td> <td><code class="language-html d-block text-break"><section tgx:guest>...</section></code></td> </tr> <tr> <td><a href="/faq/tgx-continue/"><code>tgx:continue</code></a></td> <td>Управляет продолжением итерации в repeat-контексте.</td> <td><code class="language-html d-block text-break"><tgx tgx:continue="1"></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-break/"><code>tgx:break</code></a></td> <td>Прерывает текущий repeat-цикл.</td> <td><code class="language-html d-block text-break"><tgx tgx:break="1"></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-record-delete/"><code>tgx:record-delete</code></a></td> <td>Удаляет запись по указанному record-path.</td> <td><code class="language-html d-block text-break"><tgx tgx:record-delete="/collection/123"></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-domain-verify/"><code>tgx:domain-verify</code></a></td> <td>Запрашивает TXT challenge для владения доменом и сохраняет результат в runtime-переменную.</td> <td><code class="language-html d-block text-break"><tgx tgx:domain-verify="domain=example.com&verify=domain.verify"></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-domain-confirm/"><code>tgx:domain-confirm</code></a></td> <td>Проверяет TXT challenge и подтверждает владение доменом.</td> <td><code class="language-html d-block text-break"><tgx tgx:domain-confirm="domain=example.com&confirm=domain.confirm"></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-domain-add/"><code>tgx:domain-add</code></a></td> <td>Добавляет/обновляет домен в каталог (и при необходимости связывает с проектом).</td> <td><code class="language-html d-block text-break"><tgx tgx:domain-add="domain=example.com"></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-domain-delete/"><code>tgx:domain-delete</code></a></td> <td>Отвязывает/удаляет домен из каталога по правилам runtime.</td> <td><code class="language-html d-block text-break"><tgx tgx:domain-delete="project=12"></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-domain-list/"><code>tgx:domain-list</code></a></td> <td>Загружает список доменов в runtime-переменные.</td> <td><code class="language-html d-block text-break"><tgx tgx:domain-list="list=local.domains&only_verified=1"></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-render/"><code>tgx:render</code></a></td> <td>Рендер контента в заданном формате (markdown, markdown-to-html).</td> <td><code class="language-html d-block text-break"><div tgx:render="markdown"># Title</div></code></td> </tr> <tr> <td><a href="/faq/tgx-alert/"><code>tgx:alert</code></a></td> <td>Показывает toast-уведомление через frontend runtime.</td> <td><code class="language-html d-block text-break"><tgx tgx:alert="success">Готово</tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-anchor/"><code>tgx:anchor</code></a></td> <td>Назначает стабильный anchor id и data-метку узлу.</td> <td><code class="language-html d-block text-break"><section tgx:anchor="billing"></section></code></td> </tr> <tr> <td><a href="/faq/tgx-style-step-rem/"><code>tgx:style-step-rem</code></a></td> <td>Служебная style-настройка; в текущем runtime эффект минимальный/технический.</td> <td><code class="language-html d-block text-break"><tgx tgx:style-step-rem="0.25"></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-boost/"><code>tgx:boost</code></a></td> <td>Маппинг в data-hx-boost.</td> <td><code class="language-html d-block text-break">tgx:boost="true"</code></td> </tr> <tr> <td><a href="/faq/tgx-loader/"><code>tgx:loader</code></a></td> <td>Маппинг в data-hx-loader.</td> <td><code class="language-html d-block text-break">tgx:loader="#spinner"</code></td> </tr> <tr> <td><a href="/faq/tgx-ajax-push-url/"><code>tgx:ajax-push-url</code></a></td> <td>Маппинг в data-hx-push-url.</td> <td><code class="language-html d-block text-break">tgx:ajax-push-url="true"</code></td> </tr> <tr> <td><a href="/faq/tgx-auto-refresh/"><code>tgx:auto-refresh</code></a></td> <td>Добавляет polling every <interval> в data-hx-trigger.</td> <td><code class="language-html d-block text-break">tgx:auto-refresh="10s"</code></td> </tr> <tr> <td><a href="/faq/tgx-ajax-headers/"><code>tgx:ajax-headers</code></a></td> <td>Маппинг в data-hx-headers.</td> <td><code class="language-html d-block text-break">tgx:ajax-headers="{\"X-Trace\":\"1\"}"</code></td> </tr> <tr> <td><a href="/faq/tgx-ajax-include/"><code>tgx:ajax-include</code></a></td> <td>Маппинг в data-hx-include.</td> <td><code class="language-html d-block text-break">tgx:ajax-include="#filters"</code></td> </tr> <tr> <td><a href="/faq/tgx-ajax-vals/"><code>tgx:ajax-vals</code></a></td> <td>Маппинг в data-hx-vals.</td> <td><code class="language-html d-block text-break">tgx:ajax-vals="{\"mode\":\"quick\"}"</code></td> </tr> <tr> <td><a href="/faq/tgx-ajax-encoding/"><code>tgx:ajax-encoding</code></a></td> <td>Маппинг в data-hx-encoding.</td> <td><code class="language-html d-block text-break">tgx:ajax-encoding="multipart/form-data"</code></td> </tr> <tr> <td><a href="/faq/tgx-ajax-json-body/"><code>tgx:ajax-json-body</code></a></td> <td>Маппинг в data-hx-json-body.</td> <td><code class="language-html d-block text-break">tgx:ajax-json-body="true"</code></td> </tr> <tr> <td><a href="/faq/tgx-ajax-download/"><code>tgx:ajax-download</code></a></td> <td>Маппинг в data-hx-download для download-ответов.</td> <td><code class="language-html d-block text-break">tgx:ajax-download="true"</code></td> </tr> <tr> <td><a href="/faq/tgx-ajax-ext/"><code>tgx:ajax-ext</code></a></td> <td>Маппинг в data-hx-ext.</td> <td><code class="language-html d-block text-break">tgx:ajax-ext="json-enc"</code></td> </tr> <tr> <td><a href="/faq/tgx-ajax-group-input/"><code>tgx:ajax-group-input</code></a></td> <td>Маппинг в data-hx-group-input для группового ввода.</td> <td><code class="language-html d-block text-break">tgx:ajax-group-input="search-group"</code></td> </tr> <tr> <td><a href="/faq/tgx-ajax-on-after-request/"><code>tgx:ajax-on-after-request</code></a></td> <td>Маппинг в data-hx-on-after-request (inline handler после запроса).</td> <td><code class="language-html d-block text-break">tgx:ajax-on-after-request="console.log(event.detail.xhr.status)"</code></td> </tr> <tr> <td><a href="/faq/tgx-ajax-alert-success/"><code>tgx:ajax-alert-success</code></a></td> <td>Показывает alert после успешного HTMX-запроса.</td> <td><code class="language-html d-block text-break">tgx:ajax-alert-success="Сохранено"</code></td> </tr> <tr> <td><a href="/faq/tgx-ajax-alert-error/"><code>tgx:ajax-alert-error</code></a></td> <td>Показывает alert после ошибочного HTMX-запроса.</td> <td><code class="language-html d-block text-break">tgx:ajax-alert-error="Ошибка сохранения"</code></td> </tr> <tr> <td><a href="/faq/tgx-append/"><code>tgx:append</code></a></td> <td>Добавляет значение в массив runtime-переменной.</td> <td><code class="language-html d-block text-break"><tgx tgx:append="list="></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-prepend/"><code>tgx:prepend</code></a></td> <td>Добавляет значение в начало массива runtime-переменной.</td> <td><code class="language-html d-block text-break"><tgx tgx:prepend="list="></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-seo/"><code>tgx:seo</code></a></td> <td>Применяет SEO-настройки через SeoManager::applySeoDirective.</td> <td><code class="language-html d-block text-break"><meta tgx:seo="title=Новый title"></code></td> </tr> <tr> <td><a href="/faq/tgx-redirect/"><code>tgx:redirect</code></a></td> <td>Выполняет HTTP redirect.</td> <td><code class="language-html d-block text-break"><tgx tgx:redirect="/login/"></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-terminate/"><code>tgx:terminate</code></a></td> <td>Завершает ответ (при необходимости с контентом/кодом).</td> <td><code class="language-html d-block text-break"><tgx tgx:terminate></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-header/"><code>tgx:header</code></a></td> <td>Отправляет HTTP-заголовок.</td> <td><code class="language-html d-block text-break"><tgx tgx:header="X-Debug: 1"></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-mail/"><code>tgx:mail</code></a></td> <td>Отправляет письмо из шаблона/контекста.</td> <td><code class="language-html d-block text-break"><tgx tgx:mail="register-invite"></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-wait/"><code>tgx:wait</code></a></td> <td>Пауза выполнения (us/ms/s).</td> <td><code class="language-html d-block text-break"><tgx tgx:wait="100ms"></tgx></code></td> </tr> <tr> <td><a href="/faq/tgx-log/"><code>tgx:log</code></a></td> <td>Пишет сообщение в error_log.</td> <td><code class="language-html d-block text-break"><tgx tgx:log>debug value</tgx></code></td> </tr> </tbody> </table> </div> <p class="small text-muted mb-0"> Для каждой директивы доступна статья по адресу: <code>https://tagix.tech/faq/<директива>/</code> </p><!-- TGXDIRECTIVESDICTIONARY_END --></section>