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

В поставке темы различаются цветом, шрифтом и деталями, но шапка у всех сверху, а меню в строке. Тема «Боковая колонка» (rail) устроена иначе: меню стоит слева колонкой во всю высоту, а содержимое справа. Рамка страницы целиком лежит в одном файле тегов: themes/rail/views/layouts/main.tpl.html. Остальное в теме: theme.json и assets/css/theme.css (общие стили темы плюс слой 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">
    <main id="content" class="rail-content">{content}</main>
    <footer class="rail-foot"><p>© {year} {site_name}</p>{region:footer}</footer>
  </div>
</div>

В примере оставлено главное; в самой теме внутри ещё верхняя полоса и места до и после содержимого.

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

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

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

• меню участника {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, обработчики событий. Формы рисует только движок.