Тема «Боковая колонка» (rail): образец темы на тегах

Рамка страницы

<div class="rail-shell">
  <aside class="rail">
    <a class="rail__brand brand" href="{home}"><span class="brand-name">{site_name}</span></a>
    <div class="rail__find">{search}</div>
    <nav class="rail__nav">
      [each:menu]<a class="rail__link" href="{item.url}">{item.title}</a>[/each]
    </nav>
    <div class="rail__side">{region:sidebar}</div>
    <div class="rail__foot">
      {languages}
      [if:user.logged]<div class="rail__me">{user_menu}</div>[else]<div class="rail__login">{login}</div>[/if]
    </div>
  </aside>
  <div class="rail-main">
    <header class="rail-top">… бренд, {menu_toggle}, {region:header}, {region:head_actions}</header>
    <div class="rail-band">{region:before_content}</div>
    <main id="content" class="rail-content">{content}</main>
    <div class="rail-band">{region:after_content}</div>
    <footer class="rail-foot"><p>© {year} {site_name}</p>{region:footer}</footer>
  </div>
</div>

Как это держится на телефоне

Колонка слева работает от 768 точек. Уже — колонка превращается в компактный ряд «поиск · язык · вход», а над ним стоит верхняя полоса с названием и кнопкой «Меню» ({menu_toggle}, она же открывает разделы). Всё это делается стилями: .rail-main { display: contents } и порядок блоков order, поэтому разметка одна на все ширины, а скрипта не нужно.

Что здесь уже чужое и готовое

• меню участника {user_menu} (с кнопкой выхода), вход {login}, поиск {search}, выбор языка {languages} — готовые теги движка, формы и ключи защиты остаются у движка;
• места {region:…} — блоки модулей, поставленные в тему (баннеры, подписка, архив, опрос);
• слова интерфейса в рамке не нужны: все подписи уже внутри готовых тегов, поэтому тема работает на всех семи языках без своих переводов.

Как сделать свою на этом образце

1. Скопируйте папку themes/rail под своим именем и поправьте name и названия в theme.json.
2. Меняйте только views/layouts/main.tpl.html (расстановку) и слой в конце assets/css/theme.css.
3. Не нашли нужный тег — смотрите список в справочнике «Виды на тегах». Нет файла тегов или он сломан (не закрыт блок) — работает обычный вид, страница не ломается.
4. Нельзя: PHP, <form>, <script>, <style>, обработчики событий. Формы рисует только движок.