Тема «Бічна колонка» (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>, обробники подій. Форми малює лише рушій.