S
Seditio.CMS
Frontend Guide

Seditio Skins:
Рай для верстальщика

Забудьте про The Loop в WordPress. Узнайте, как интегрировать любой HTML шаблон в CMS, не написав ни строчки на PHP.

Обычно "натяжка верстки на CMS" — это боль. В WordPress вам нужно разрезать HTML на куски, вставлять PHP-функции the_content(), get_header() и бороться с автоматическими тегами <p>, которые движок вставляет куда не просят. Seditio работает иначе.

Философия TPL (XTemplate)

В Seditio логика (PHP) и представление (HTML) разделены железобетонной стеной. Шаблон — это просто HTML-файл с метками (тегами) в фигурных скобках.

Пример мышления Seditio:

Вместо того чтобы писать код, который "достает" заголовок из базы, вы просто указываете место в верстке: "Сюда положить заголовок" -> {PAGE_TITLE}.

Анатомия скина (Темы оформления)

Все темы лежат в папке /skins/. Минимальный набор файлов для новой темы:

  • 📁 skins/mytheme/
  • 📄 header.tpl // Шапка сайта
  • 📄 footer.tpl // Подвал
  • 📄 index.tpl // Главная страница
  • 📄 page.tpl // Страница статьи
  • 📄 mytheme.css // Стили

Практика: Интеграция шаблона за 3 шага

Шаг 1: Header и Footer

Берем ваш index.html из верстки. Вырезаем всё от <!DOCTYPE> до начала контента и сохраняем в header.tpl. Конец файла (скрипты, закрывающие теги) — в footer.tpl.

Важно: Замените пути к CSS/JS на динамические теги, но Seditio умеет работать и с прямыми путями.

Шаг 2: Блок контента (page.tpl)

Самое интересное. Как вывести статью?

<!-- BEGIN: MAIN -->
    <div class="content-box">
        <h1>{PAGE_TITLE}</h1>
        <div class="meta">
            Автор: {PAGE_OWNER} | Дата: {PAGE_DATE}
        </div>
        <div class="text">
            {PAGE_TEXT}
        </div>
    </div>
<!-- END: MAIN -->
                

Блоки <!-- BEGIN: MAIN --> нужны движку, чтобы понять, где начинается и заканчивается парсинг. Это позволяет держать несколько логических блоков в одном файле.

Шаг 3: Списки и циклы (list.tpl)

Вывод списка новостей или товаров. Вам не нужен цикл foreach или while. Просто опишите, как выглядит одна строка.

<!-- BEGIN: MAIN -->
    <h2>Новости</h2>
    <div class="news-list">
        <!-- BEGIN: PAGE_ROW -->
        <div class="news-item">
            <a href="{PAGE_ROW_URL}">{PAGE_ROW_TITLE}</a>
            <p>{PAGE_ROW_DESC}</p>
        </div>
        <!-- END: PAGE_ROW -->
    </div>
<!-- END: MAIN -->
                

Система сама размножит блок PAGE_ROW столько раз, сколько новостей в категории.

Почему дизайнеры в восторге?

  1. Чистота кода. В исходном коде страницы не будет лишних div class="wp-block-group".
  2. Изоляция. Вы не можете сломать сайт, сделав ошибку в TPL файле. Максимум — страница криво отобразится. "Белый экран смерти" (WSOD) исключен.
  3. Скорость. Шаблонизатор компилируется очень быстро.

Попробуйте сами

Скачайте базовый скин-заготовку (Skeleton), чтобы понять структуру папок и начать верстать свой уникальный дизайн.