5 16, 2013 - Категория: Создание сайтов    Комментарии

Создание сайта на MODx. Урок 5 - настройка шаблона

Создание сайта на MODx. Урок 5. Настройка шаблона: чанки, сниппеты

Тем, кто попал на эту страницу случайно, и является приверженцем других систем управления, я хочу напомнить, что это мой блог и пишу что хочу. Давайте не будем устраивать холивары и кидаться туфлями в комментах.


Теперь же перейдем непосредственно к самому уроку. В прошлом уроке мы уже интегрировали дизайн главной страницы. Сегодня же мы из того неповоротливого мастодонта будем делать полностью управляемый и гибкий шаблон сайта.

Этот урок продолжает серию публикаций «Создание сайтов на MODx», входящую в глобальный цикл «Создание сайтов самостоятельно».


Итак, вернемся к приданию гибкости шаблону и освоению его управлением через админку.

Для этого давайте попробуем вычислить блоки, из которых состоит наш препарируемый сайт и разложить его на составляющие.


  1. Шапка сайта. Сейчас все чаще шапка сайта содержит в себе логотип, контактную информацию и иногда — меню.
  2. Галерея (фотослайдер) jQuery
  3. Блок вывода краткой информации: анонс статей, новостей и т. д. Чисто теоретически, он должен заполняться автоматически при обновлении сайта, значит править тут особо ничего не надо
  4. Футер (подвал) сайта. Сюда обычно выносят дополнительные пункты меню, сведения об авторских правах, еще раз — контактную информацию. Также тут обычно есть место для счетчиков статистики.


Разобравшись с основными блоками, на которых строится наш сайт, теперь мы можем приступить к полному преображению статичного html-файла в гибкую и управляемую систему.


Но перед тем, как мы начнем резать разметку, немного основных терминов, которые будут часто встречаться при работе с системой.

Чанк — кусочек html кода, который на странице (или на страницах) повторяется более 1 раза. При этом вы хотите внести изменения сразу во всех местах. Поэтому создавайте в системе чанк с каким-нибудь уникальным названием, записывайте этот код туда, а в нужном месте просто вызывайте этот чанк {{имя-чанка}}. Использовать две фигурные скобки обязательно.

При обработке и выводе страницы MODx автоматически заменит этот чанк на необходимый код.

Таким образом, чтобы внести изменения, вам теперь не придется вносить их везде — достаточно будет один раз подправить нужный чанк.


Теперь перейдем к разложению страницы на чанки.

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

Дальше — header / footer на сайте тоже повторяются. И чтобы каждый раз не править там какую-либо строчку, их можно тоже вынести в отдельные чанки.

В шаблоне, на основе которого я веду этот урок используются как вы помните из прошлого урока 3 вида шаблонов. Но большая часть в них одинаковая, поэтому и надо использовать чанк. Согласитесь, что гораздо легче и быстрее исправить данные в одном месте, а не в трех. А если шаблонов будет уже 7, то вероятность ошибки или того, что вы что-то пропустите тоже будет велика.


Чтобы попасть в редактирование шаблона, в админке идем следующим путем Элементы → Управление элементами → Шаблоны → Шаблон для главной страницы


Вынесем для начала в отдельный чанк тег <head>, в котором прописана вся служебная информация и подключаются скрипты и стили.

Для этого находим этот тег, копируем его в буфер и идем создавать новый чанк.

<head profile="http://gmpg.org/xfn/11">
<base href="[(site_url)]" />
<title>Заголовок</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="/assets/templates/site/styles/layout.css" type="text/css" />
<script type="text/javascript" src="/assets/templates/site/scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/assets/templates/site/scripts/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="/assets/templates/site/scripts/jquery.jcarousel.setup.js"></script>
</head>

Скопировали этот код, теперь идем по вкладкам Элементы → Управление элементами → Чанки,жмем там «Создать новый чанк», называем его допустим head и в код чанка вставляем скопированный код. Описание чанка и категорию можно заполнить для себя, чтобы не потеряться, когда чанков будет много.


Жмем «сохранить» в верху страницы и снова идем в редактирование шаблона. Там всю конструкцию, находящуюся между тегами <head></head> заменяем на простую процедуру вызова чанка:

{{head}}

Сохраняемся, переходим на сам сайт и видим, что ничего не изменилось. Если что-то изменилось — значит вы сделали что-то не так.

Точно таким же образом создаются и остальные чанки.

Теперь давайте разберем на чанки всю страницу до конца. У меня получились:

{{head}} — тут хранятся стили и скрипты

{{header}} — тут логотип и менюшка

{{gallery}} — слайдер на главной

{{content}} — контент (изменяемая часть)

{{footer}} — подвал сайта


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

Итоговый код шаблона получился следующим:


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


Предыдущие уроки:

Есть что сказать? Добавьте комментарий!