В этой статье мы разберемся, как организовать главный шаблон, поместив основные элементы страниц в отдельные чанки, что позволит нам упростить работу с нашим сайтом. Добавим гибкую систему настроек, посредством TV полей.
- Вступление
- Редактирование главного шаблона
- Зачем мы усложняем сайт чанками?
- Создание чанков
- Создание шаблона и ресурса "Настройки"
- Установим дополнение PdoTools
- Создадим категорию и TV поля
- Создание сниппета и проверка проделанной работы
- Заключение
Вступление
Важное примечание: я заранее набросал простые стили на элементы сайта, которые мы сейчас добавим. При непосредственном создании сайта стили накидываются уже на структурированные элементы, сейчас мы обучаемся организации “скелета” и смотреть способы и навыки стилизации мы не будем.
В прошлом уроке мы уже установили систему управления сайтом MODx Revo и базово подготовили её к работе, ниже будут полезные ссылки:
- Ссылка на видео по этой статье.
- Плейлист с уроками по MODx Revo.
- Видео-урок по установке и базовой подготовки MODx Revo.
- Скачать MODx Revo с официального сайта.
- Notepad++ (работа с кодом).
- FileZilla (работа с сервером).
- Хостинг TimeWeb (бонус при регистрации по ссылке).
Редактирование главного шаблона
Для начала перейдём в наш начальный шаблон и вставим туда следующий код:
Конструкция в квадратных скобках с символом доллара [ [$name] ] – это чанк. Чанк позволит нам шаблонизировать основные элементы страниц:
- [ [$head] ] – общий head наших страниц.
- [ [$header] ] – общий header наших страниц.
- [ [$footer] ] – общий footer наших страниц.
- [ [$scripts] ] – общий блок, который будет вмещать в себя все скрипты страниц нашего сайта.
Зачем мы усложняем сайт чанками?
Разумеется, у разных страниц есть свои уникальные элементы: имя, описание, ключевые слова и т.д. Могут использоваться разные или дополнительные скрипты, стили и элементы.
Появляется закономерный вопрос - зачем же нам усложнять структуру сайта чанками, если в чанк мы помещаем общий код, а у страниц он может и будет отличаться?
- 1) Все уникальные элементы мы будем получать в чанк от самой страницы по средством стандартных и дополнительных полей.
- 2) Разбивая структуру сайта на чанки, а после, редактируя один чанк - мы редактируем код у всех страниц использующих этот общий чанк.
Создание чанков
Разобравшись с теорией приступим к созданию самих чанков: элементы -> чанки -> новый чанк.
В head нашего сайта мы поместили следующий код:
В header нашего сайта мы поместили следующий код:
Т.к. у нас на сайте сейчас есть только главная страница, наша навигация будет состоять только из неё.
В footer нашего сайта мы поместили следующий код:
В чанк scripts и analytics мы пока ничего не запишем, т.к. скрипты и системы аналитики мы пока подключать не будем.
Вы можете заметить, что у нас в чанках присутствую новые конструкции:
- 1) [ [*name] ] – получение данных из стандартного поля страницы, использующей чанк.
- 2) [ [#3.tv.name] ] – получение данных дополнительных полей ресурса с номером ID=3, это будет ресурс с общими настройками нашего сайта, скоро мы создадим его.
- 3) [ [name] ] – вызов сниппета, сниппет выполняет ту же функцию, что и чанк, единственное отличие заключается в том, что в сниппите находится PHP код.
Создание шаблона и ресурса "Настройки"
Давайте теперь создадим ресурс с настройками и первым делом мы сделаем отдельный шаблон, это нужно, чтобы дополнительные поля были привязаны только к этому ресурсу (привязка всех дополнительных (или TV) полей идёт по шаблону).
Элементы -> шаблоны -> новый шаблон, назовём его “Настройки”.
Теперь создадим новый ресурс: ресурсы –> новый ресурс, назовём его “настройки”, выберем шаблон “настройки” и отметим галочкой “скрыть из меню”, публиковать его мы не будем.
Установим дополнение PdoTools
Перед тем, как создавать дополнительные поля, нам нужно научить наш MODx читать наши конструкции, для этого мы установим дополнение pdoTools: пакеты -> установщик -> загрузить пакеты, после загрузки установим его.
Создадим категорию и TV поля
Приступим к созданию дополнительных полей, которые мы использовали в нашем коде и которые будут настраиваться из этого ресурса.
Создадим категорию для наших дополнительных полей: элементы -> категории -> новая категория, назовём её “Общие настройки”.
Теперь заходим в элементы -> дополнительные поля -> новое дополнительное поле (TV):
- [ [#3.tv.email] ] – email.
- [ [#3.tv.phone] ] – телефон.
- [ [#3.tv.cmp_name] ] – название компании.
- [ [#3.tv.og_image] ] – изображение для социальных сетей.
- [ [#3.tv.latitude] ] – широта.
- [ [#3.tv.longitude] ] – долгота.
- [ [#3.tv.street_address] ] – улица.
- [ [#3.tv.locality] ] – город.
- [ [#3.tv.postal_code] ] – почтовый индекс.
- [ [#3.tv.country_name] ] – страна.
Задаём имя дополнительного поля, на которое мы ссылаемся в коде, выбираем категорию “Общие настройки”, указываем подпись, это будет расшифровка, указывающая на его назначение. Переходим на вкладку “доступно для шаблонов” и ставим галочку напротив “Настройки”. Стоит заметить, что на вкладке “параметры ввода” мы оставляем “текст” - если TV поле вводится текстом, а если мы добавляем TV поле для картинки (у нас используется такое поле в микроразметке Open Graph, обозначающее изображение для социальных сетей) - выбираем “Изображение”.
Создание сниппета и проверка проделанной работы
После создания дополнительных полей перейдём в наш ресурс “Настройки” -> дополнительные поля и расставим цифры для проверки их корректной работы.
Для удобства этого урока мы объединили все дополнительные поля в одну категорию, на практике же, вы можете разбивать их на большее количество категорий.
Теперь создадим сниппет [ [year] ], который автоматически будет подставлять текущий код в копирайт, находящийся в подвале. Элементы -> сниппеты -> новый сниппет.
Это очень удобно, сейчас на многих сайтах можно обнаружить неактуальный год в подвале сайта, позаботимся об этом заранее.
Не забудем заполнить стандартные поля нашей страницы.
Теперь перейдём на наш сайт, посмотрим на работу сниппета и посмотрим исходный код страницы для проверки TV полей, быстро пробежимся глазами по отображаемому коду, действительно, всё работает корректно.
Заключение
Поздравляю, вы успешно структурировали свой сайт и добавили систему настроек. В следующем ролике мы организуем систему блога с автоматическим выводом статей, а после сделаем AJAX пагинацию и сортировку по ключевым словам.
Работать с MODx очень удобно и мы убедились в этом на практике, наш ролик по этой теме на YouTube занимает всего 8,5 минут. Мы и дальше будем продолжать делиться с вами полезной информацией, разумеется, её аналоги можно было найти в интернете и ранее, но мы постараемся сэкономить ваше время, чтобы вы могли уделить больше времени самой разработке.
Вам нужно создать сайт или обновить его? - Не теряйте времени, обращайтесь к профессионалам!