Инструкция по созданию сайта на MODx. Урок 8 — Создание шаблонов и вывод содержимого страниц

У нас уже есть шаблон главной страницы, но ведь он не подходит для других страниц на сайте. Во-первых, на нем нет места, где отображать содержимое наших страниц, например, статьи, новости, форму обратной связи и так далее. Во-вторых, нам не хочется отображать такую большую галерею на каждой странице своего сайта, пусть она останется только на главной. В-третьих, не плохо бы было сделать шаблон с второстепенной навигацией в боковой колонке. И тут мы вспоминаем о шаблонах для дополнительных страниц, которые мы с вами скачали и которые уже устали ждать, когда же мы их применим. Для тех, кто забыл: разметка этих шаблонов лежит у нас в папке assets/templates/site в файлах «style-demo.html» и «full-width.html». Кто только что подключился и не знает, о чем идет речь, может сначала обратиться к предыдущим урокам и быстро возвращаться сюда.

Итак, создадим шаблон для страницы с вспомогательной навигацией в правой колонке. Для этого копируем содержимое файла style-demo.html в буфер обмена и направляемся в администраторскую панель, для того чтобы создать там новый шаблон.

На вкладке Элементы → Управление элементами → Шаблоны нажимаем на ссылку «Новый шаблон» и дальше действуем по отработанной в 4 уроке схеме. Заполняем поля с названием и описанием шаблона, а в область «Код шаблона (HTML)» вставляем из буфера обмена содержимое файла style-demo.html. На рисунке ниже видно как эти поля заполнил я.

Заполненные поля для шаблона из 2-х колонок

Точно так же создаем и шаблон из одной колонки на всю ширину шаблона, его разметка лежит в той же папке в файле «full-width.html». Копируем в буфер обмена его содержимое и также как и в предыдущем случае создаем в администраторской панели новый шаблон. Я назвал его «Во всю ширину» а в поле описание вписал «Шаблон из одной колонки на всю ширину».

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

Установка шаблона для страницы

Предлагаю для страниц «О нас», «Услуги» и «Новости» установить 2-х колоночный шаблон, а для страницы «Контактная информация» — шаблон из одной колонки на всю ширину.

После того, как вы это сделаете, можете попробовать в публичной части вашего сайта понажимать на пункты вашего главного меню. У вас будет нормально отображаться только главная страница, страницы остальных пунктов меню внешним видом вас никак не порадуют. Но не в падайте в панику. Все отлично. Мы же еще их не настроили, с шаблоном Главной страницы в 4 уроке было тоже самое. Идем исправлять…

Возвращаемся на вкладку Элементы – Управление элементами – Шаблоны. Давайте начнем с редактирования шаблона из двух колонок, для этого нажимаем на ссылку с его названием в списке шаблонов. У меня он называется «2 колонки».

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

Удаляем тег <head> со всем его содержимым, вместо него вставляем конструкцию вызова соответствующего чанка:

{{HEAD}}

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

Удаляем контейнер <div class="wrapper col1"> со всем его содержимым, вместо него вставляем вызов чанка, чтобы вывести в шаблоне шапку:

{{HEADER}}

И далее, внизу страницы удаляем содержимое контейнеры <div class="wrapper col4"> и <div class="wrapper col5"> также со всем их содержимым. Вместо них вставляем вызов чанка:

{{FOOTER}}

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

Если проанализировать содержимое этой страницы, то вы заметите еще 2 элемента, которые следовало бы вынести в отдельные чанки. Это, безусловно:

Строка навигации или «Хлебные крошки»

Строка навигации

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

Правая колонка с дополнительной навигацией

Правая колонка

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

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

Я нашел, а вы? Вывод строки навигации у нас осуществляется контейнером <div class="wrapper col2">. Копируем его со всем содержимым в буфер обмена и удаляем из шаблона, а вместо него вставляем конструкцию:

{{BREADCRUMB}}

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

Вот что получилось у меня.

Чанк для строки навигации

Тоже самое проделываем и с контейнером <div id="column">. Этот контейнер отвечает за вывод правой колонки. Вырезаем его со всем содержимым в буфер обмена, а вместо него вставляем:

{{RIGHT-COL}}

После чего создаем новый чанк с именем RIGHT-COL, вставляем в его содержимое контейнер <div id="column">, который у вас хранится в буфере обмена, заполняем необходимые поля и сохраняем.

Чанк правой колонки

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

Еще, чтобы подправить внешний вид шаблона в чанке RIGHT-COL следует исправить пути всех изображений, так же как мы делали при настройке шаблона главной страницы. Просто добавьте для каждого пути изображения следующую конструкцию:

/assets/templates/site/

Двигаемся дальше. Наверное, самый важный блок, который мы также вынесем в отдельный чанк — это содержимое страницы. Это та часть, которую мы будем редактировать с помощью текстового редактора при редактировании страниц нашего сайта. Эта область находится в контейнере <div id="content">, поэтому мы вырезаем этот контейнер и помещаем его в новый чанк с именем CONTENT.

Вместо него вставляем конструкцию вызова чанка:

{{CONTENT}}

Ниже на рисунке показано, как я  заполнил поля при создании этого чанка.

Чанк с содержимым страниц

После всех этих манипуляций ваш итоговый код шаблона «2 колонки» в MODx примет следующий вид:

Итоговый вид шаблона в 2 колонки

А страница с чанками будет выгладеть как на картинке ниже:

Страница с чанками

Вывод содержимого на странице 

Теперь мы переходим к одному очень интересному и важному моменту в создании шаблона и в тоже время наверное к самому простому — к динамическому выводу содержимого на странице. Как сделать так, чтобы на странице отображался текст, картинки, ссылки или любое другое HTML содержимое, которое мы вписываем в текстовом редакторе при редактировании страницы? Для этого достаточно в шаблоне в место, где должно быть содержимое страницы вписать следующую конструкцию:

[*content*]

И все. Ничего сложного, правда? Именно этот специальный тег в MODx всегда отвечает за вызов содержимого страниц.

Давайте сейчас испробуем его на практике. Как вы помните у нас содержимое страниц вынесено в отдельный чанк c именем CONTENT, поэтому отправляемся его редактировать. Не перепутайте с чанком MAIN-CONTENT, который будет отвечать за содержимое главной страницы. В поле с кодом чанка CONTENT находится контейнер <div id="content">, и мы удаляем все содержимое этого контейнера а в него вставляем выше описанную конструкцию. В итоге содержимое чанка будет иметь следующий компактный вид:

<div id="content">
[*content*]
</div>

После этого все что мы пишем в текстовом редакторе при редактировании ресурса с шаблоном «2 колонки» будет отображаться на странице.

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

На этом настройка шаблона  «2 колонки» закончена. Все выше описанные действия вы можете посмотреть в видео к данному уроку. Кроме изменения путей для изображении в чанке RIGHT-COL, я думаю, что с этим вы и так справитесь без проблем.

В видео не будет показано разбиение на чанки шаблона «Во всю ширину», но если вы посмотрите на этот шаблон внимательно, то увидите, что он полностью состоит из уже созданных нами чанков. Единственное, чем он будет отличаться от шаблона «2 колонки» это тем, что прямо в коде шаблона вместо двух чанков CONTENT и RIGHT-COL вам можно будет вставить вызов содержимого [*content*]

Таким образом, чтобы сэкономить время, можете скопировать код шаблона «2 колонки», вставить его в содержимое шаблона «Во всю ширину». Удалить из кода вызов CONTENT и RIGHT-COL а на их место вставить конструкцию вызова контента. На рисунке ниже показано как должен выглядеть итоговый код шаблона «Во всю ширину».

Внешний вид шаблона на всю ширину

Если хотите посмотреть наглядно, что должно располагаться в каждом из чанков, я приведу ниже файлы с кодом для каждого из них. При желании, можете их скопировать:

Так же можете посмотреть или скопировать файлы с итоговым кодом шаблонов:

Автор: Ефимов Виктор

Вы можете также посмотреть другие уроки по созданию сайта на MODx:

18.06.2010
top


blog comments powered by Disqus
Рубрики
3 месяца отличного хостинга бесплатно
Система Orphus