Главная удобна для первого раза: на ней встречаются все виды частей сразу. Разобравшись с ней, остальные страницы вы соберёте по накатанному.
Шапка и подвал — в чанки
Скопируйте кусок разметки между пометками
CHUNK: header в новый чанк и назовите его
header. В шаблоне на месте этого куска
остаётся одна строка.
<body class="page">
{{sprite}}
{{header}}
<main class="page__main" id="main">
...
</main>
{{footer}}
</body>
Теперь правка меню делается один раз — в чанке
header, — и появляется на всех страницах сразу.
Ровно то, ради чего затевалась CMS.
Пути внутри чанка ломаются первыми
В статической вёрстке ссылки были относительными:
../../assets/css/base.css. В чанке такой путь
работать не может — один и тот же чанк выводится
на страницах разной глубины. Все пути внутри чанков
делаются от корня сайта: /assets/css/base.css.
Заголовок и текст — метками
Поля карточки страницы движок заполняет сам: вы пишете заголовок в админке, а на сайте он появляется там, где стоит метка. Полей в карточке около десятка, и почти все они пригодятся.
То, что меняется от страницы к странице, заменяется плейсхолдерами. На главной их немного: заголовок окна, описание для поисковика и, если хочется, текст первого экрана.
<title>[*longtitle*]</title>
<meta name="description" content="[*description*]">
<link rel="canonical" href="[(site_url)][~[*id*]~]">
Здесь три разных вида меток, и путать их не стоит:
[*поле*] — данные текущей страницы,
[(настройка)] — настройка всего сайта,
[~id~] — ссылка на страницу по её номеру.
Последняя удобна тем, что при переносе страницы в дереве
адрес в ссылке меняется сам. Записывать адреса вручную
в шаблоне поэтому не стоит совсем: любой переезд страницы
превратит такую ссылку в битую, и заметите вы это далеко
не сразу.
Меню — сниппетом
Список страниц движок умеет строить сам: за это отвечает сниппет DocLister. Он проходит по дереву и выдаёт разметку, которую вы ему опишете.
[[DocLister?
&parents=`3`
&sortBy=`menuindex`
&sortDir=`ASC`
&tpl=`menuRow`
]]
parents — номер раздела, чьи страницы выводим,
sortBy и sortDir — порядок, а
tpl — имя чанка с вашей разметкой одного пункта.
Так сниппет выдаёт именно ваши классы, а не свои.
Порядок приходится задавать: по умолчанию DocLister сортирует
не по дереву, а по дате публикации.
Сначала руками, потом сниппетом
Если меню никак не выводится, оставьте его на время обычным списком ссылок прямо в чанке. Сайт будет работать, а вы продвинетесь дальше и вернётесь к сниппету со свежей головой. Незакрытая задача мешает меньше, чем сломанная страница.
Что остаётся в шаблоне как есть
Не всё нужно превращать в метки. Первый экран главной — заголовок, пояснение, кнопки, пример кода рядом — меняться не будет: главная на сайте одна. Оставьте этот кусок в шаблоне обычной разметкой.
Правило простое: метку ставят там, где значение меняется от страницы к странице или должно правиться без разработчика. Вынести в поле заголовок первого экрана можно, но смысла мало: вы всё равно единственный, кто его меняет, а лишняя метка делает шаблон менее понятным. Лучше начать с необходимого минимума и добавлять метки по мере надобности.
Что просить у нейросети
Здесь она особенно полезна: параметры сниппетов приходится смотреть в документации, а документация Evolution написана коротко. Дайте свою разметку и попросите параметры под неё.
У меня Evolution CMS 3. Нужно вывести горизонтальное меню первого уровня из дерева ресурсов. Вот моя статическая разметка меню:
[вставьте свой кусок разметки с классами]
Составь вызов DocLister с параметрами и чанки под эту разметку: один на обычный пункт, второй на текущий — он должен получать класс с пометкой «активный».
Ответь так: вызов сниппета, потом каждый чанк отдельным блоком с его именем. Классы не меняй — они уже используются в моём CSS.
Что должно получиться
- Главная открывается из CMS и выглядит так же, как статический файл
- Шапка, подвал и набор иконок лежат в чанках
- Все пути к стилям и картинкам — от корня сайта
- Заголовок окна и описание берутся из карточки страницы