Правка пакетов и шаблонов

#Правка вёрстки вида

Путь: Модули → модуль → вид (или кнопка «Правка» у вида в списке).

Правка вида: окна разметки, CSS и JS, предпросмотр справа

#Что на странице

Вёрстка разложена на четыре отдельных окна, а не на одно:

Окно	Что в нём	Когда нужно
До содержимого	открывающая обёртка: `<section><div class="wrap">`	оформление секции
Разметка	оболочка списка, внутри метка `{item}`	всегда
Разметка записи	одна карточка, повторяется по числу записей	у списков
После содержимого	закрывающая обёртка: `</div></section>`	парно к «До»

Плюс два окна рядом:

CSS — стили этого вида;
JS — скрипты этого вида.

Почему так

Раньше это было одно окно, которое разбиралось при сохранении. Так прятáлось устройство и добавлялся шаг, где можно ошибиться. Четыре окна соответствуют тому, как движок собирает страницу на самом деле.

#Как это собирается

<!-- До содержимого -->
<section class="works"><div class="wrap">

  <!-- Разметка -->
  <div class="grid">
    <!-- Разметка записи, повторённая по числу записей -->
    <article><h3>Кухня 12 м²</h3></article>
    <article><h3>Ванная 4 м²</h3></article>
  </div>

<!-- После содержимого -->
</div></section>

В «Разметке» место карточек обозначается меткой {item}. Нет метки — записи выводиться не будут.

#Стили и скрипты

Всё, что вписано в окно CSS, при выводе страницы уходит отдельным файлом и кешируется браузером. Писать стили прямо в разметку атрибутом style="" можно, но не нужно: такие стили не переживают ни наведение курсора, ни узкий экран, и их не видно в одном месте.

Важно

Визуальный редактор пишет свои правила в это же окно CSS — между двумя пометками:

/* ==== визуальный редактор: правила ниже он переписывает сам ==== */
...
/* ==== конец правил визуального редактора ==== */

Написанное выше и ниже этих строк редактор не трогает. Внутри — переписывает целиком, так что править там руками бесполезно.

#Предпросмотр

Справа — окно предпросмотра: вид рисуется по-настоящему, с данными сайта и стилями страницы. Это отдельный документ, поэтому стили вида не разъезжают саму панель.

Ширину окна можно переключать — так проверяется, как блок ведёт себя на телефоне и на широком мониторе, не открывая сайт в отдельной вкладке.

#Сохранение

Кнопка Сохранить вверху страницы, либо Ctrl+S (⌘+S на Mac) — работает в любом из окон.

Важно

Предупреждения о несохранённых изменениях нет: закрыв вкладку с неcохранённой правкой, вы её потеряете. Сохраняйтесь по ходу дела — Ctrl+S для того и сделан.

После сохранения кеш готовых страниц сбрасывается сам: правка вёрстки меняет все страницы, где выведен этот модуль.

#Название и код вида

Под окнами — два поля:

Поле	Обязательно	Зачем
Название	нет	видно только в панели: «Плиткой», «Списком»
Код	нет	чтобы звать вид по имени: `{module.menu:view=premiere.menu}`

Без кода вид зовут по номеру: view=24. Код удобнее — номер на другом сайте окажется чужим.

Примечание

Код принято писать как тема.модуль: premiere.menu — вид menu из темы premiere. Заглавные буквы разрешены: среди модулей есть menuItem, и запрет отверг бы его.

Занятый чужим видом код не сохранится: вызов view=premiere.menu должен быть однозначен.

#Что чаще всего идёт не так

«Сохранил — на сайте по-прежнему старое». Сначала проверьте, тот ли это вид: у модуля их несколько, а показывается основной (у страниц) или тот, что указан в view= на месте вызова (у блоков).

«Записи не выводятся». В окне «Разметка» нет метки {item}.

«Карточки пустые». Поля записи пишутся строго как {module.имя_модуля.имя_поля} — формы {item.поле} в движке нет. Неподставившееся вычищается, поэтому ошибка выглядит как пустота. Подробно — Шорткоды.

«Правка вида страницы убила текст страниц». В разметке записи вида page обязательна метка {module.page.content} — без неё содержимое любой страницы пропадает.