
Итак, в этом материале мы возьмем тему из прошлой моей статьи:
Скачать Тему
В ней будут все необходимые нам файлы.
И следуем по шагам.
За основу я взял этот материал, но и разница в подаче материала будет. Вы можете смотреть и здесь, и там. Будет только лучше.
Итак, поехали...
Шаг за шагом создаем тему
1) Создаем в assets директорию темы "green_blog_theme" и заливаем в нее файлы темы
2) Создаем новый шаблон кликнув в левом меню Элементы и в Шаблоны нажимаем на плюсик.
3) Заполняем название темы "Green Blog Theme" и описание.
4) Открываем главную страницу из темы, редактором - index.html и копируем ее содержимое в поле "Код шаблона(html)" предварительно или уже после вставки меняя пути к статическим файлам с
images/
css/
js/
На:
/assets/green_blog_theme/images/
/assets/green_blog_theme/css/
/assets/green_blog_theme/js/
5) Сохраняем наш шаблон
6) Идем в Ресурсы -> Главная и редактируем меняя Шаблон на Green Blog Theme.
7) Сохраняем и нажимаем "Посмотреть"

Теперь нам нужно проставить теги, сниппеты и чанки чтобы сайт использовал тему, а не отображал просто статичную страницу
8) Снова идем в редактирование Шаблона и меняем содержимое 4-й строки с
<title>Blog Clean Theme</title>
на:
<title>[[++site_name]]</title>
Так же меняем 5-ю строку с:
<meta charset="UTF-8">
на:
<meta charset="[[++modx_charset]]">
9) После последней измененной строки так же добавим основной URL сайта в виде строки:
<base href="[[++site_url]]" />
это нужно для того чтобы во всех случаях ссылки работали верно.
Как итог должны получить такой код:
10) Теперь создадим чанки(статический html, который будет повторяться на каждой странице нашего шаблона)
- копируем код header-a как показано на рисунке, идем в меню Чанки и Создаем новый.
- В поле Имя вставляем cl-gr-block-header(чтобы не путать чанк с другими потом)
- В поле Код чанка(html) вставляем скопированный код.
- Жмем сохранить
- аналогично поступаем для футера cl-gr-block-footer
- и тоже самое проделываем для блока head(cl-gr-block-head), только там сам родительский тег

11) Теперь нужно вызов чанков внести в код шаблона вместо кода. Идем в шаблон и меняем скопированные куски кода в шаблоне на [[$название-чанка]]
В нашем случае это:
[[$cl-gr-block-header]]
[[$cl-gr-block-head]]
[[$cl-gr-block-footer]]
Получаем приблизительно такой же результат как на картинке.
Сохраняем и смотрим тему. Видим что изменений нету и в нашем случае это нас радует, значит ничего не пропустили и все работает.
В этом материале на этом и закончим. Продолжим компоновать в следующем.
