Тема на тегах: зразок «Бічна колонка»

У поставці теми відрізняються кольором, шрифтом і деталями, але шапка в усіх угорі, а меню в рядку. Тема «Бічна колонка» (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, обробники подій. Форми малює лише рушій.