ModX: создаем свою тему - шаблоны и чанки. Часть 1

В одном из прошлых своих материалов я писал о том что создавал простую тему, чтобы постичь прелести дизайна, верстки и Themeforest(площадки для продажи тем) После этого мне выпала задача создать простой интернет-магазин на базе MODx. Почему бы не совместить приятное с полезным - подумалось мне и я решил использовать ту тему, чтобы натянуть ее на MODx.

Итак, в этом материале мы возьмем тему из прошлой моей статьи:
Скачать Тему
В ней будут все необходимые нам файлы.
И следуем по шагам.

За основу я взял этот материал, но и разница в подаче материала будет. Вы можете смотреть и здесь, и там. Будет только лучше.

Итак, поехали...

Шаг за шагом создаем тему

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]]
Получаем приблизительно такой же результат как на картинке. Сохраняем и смотрим тему. Видим что изменений нету и в нашем случае это нас радует, значит ничего не пропустили и все работает.

В этом материале на этом и закончим. Продолжим компоновать в следующем.