Уроки MODx Revolution

Скачать материалы к учебному курсу - папка distr_MODx.zip

Урок 4. Создание шаблонов

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

1. На вкладке Элементы – Шаблоны нажмите на ссылку Новый шаблон в виде кнопки со знаком +. Заполните поля с названием и описанием шаблона, а в область Код шаблона (HTML) вставьте из буфера обмена содержимое файла style-demo.html.

2. После этого сохраните шаблон.

Рисунок 4.1

3. Также создадим шаблон из одной колонки на всю ширину шаблона, его разметка лежит в той же папке в файле full-width.html.

Скопируйте в буфер обмена его содержимое и так же, как и в предыдущем случае создайте в администраторской панели новый шаблон. Назовите его Во всю ширину, а в поле описание впишите Шаблон из одной колонки на всю ширину, категория – Общий дизайн сайта.

Сейчас в разделе Элементы – Шаблоны у нас три шаблона.

Рисунок 4.2

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

Рисунок 4.3

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

Настроим вновь созданные шаблоны.

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

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

[[$HEAD]]

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

[[$HEADER]]

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

[[$FOOTER]]

10. Проделайте то же самое для шаблона Во всю ширину.

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

Если проанализировать содержимое страниц с шаблонами 2 колонки и Во всю ширину, то Вы заметите еще 2 элемента, которые следовало бы вынести в отдельные чанки. Это, безусловно: Строка навигации или «Хлебные крошки»

Рисунок 4.4

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

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

[[$BREADCRUMB]]

и нажмите Сохранить.

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

Рисунок 4.5

То же самое проделайте для шаблона Во всю ширину, т.е. замените контейнер <div class="wrapper col2"> на чанк BREADCRUMB.

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

Рисунок 4.6

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

[[$RIGHT-COL]]

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

Рисунок 4.7

Примечание: где начинается и где заканчивается контейнер div в случае больших размеров разметки можно посмотреть, открыв шаблон 2 колонки в редакторе Notepad++. Этот редактор подсвечивает парные теги. Также при установке плагина Ace парные теги подсвечиваются прямо в окне кода чанка.

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

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

/assets/plusbusiness/

Реализация вспомогательного меню на странице

Приступаем к организации вспомогательного меню в правой колонке на внутренних страницах сайта.

Реализовывать это меню мы будем с помощью сниппета pdoMenu.

Первым делом давайте посмотрим на html-разметку, которая определяет вывод нашей вспомогательной навигации:

<div class="subnav">
<h2>Secondary Navigation</h2>
<ul>
<li><a href="#">Open Source Templates</a></li>
<li><a href="#">Free CSS Templates</a>
   <ul>
       <li><a href="#">Free XHTML Templates</a></li>
       <li><a href="#">Free Website Templates</a></li>
   </ul>
</li>
<li><a href="#">Open Source Layouts</a>
   <ul>
      <li><a href="#">Open Source Software</a></li>
      <li><a href="#">Open Source Webdesign</a>
         <ul>
             <li><a href="#">Open Source Downloads</a></li>
             <li><a href="#">Open Source Website</a></li>
         </ul>
      </li>
   </ul>
</li>
<li><a href="#">Open Source Themes</a></li>
</ul>
</div>

Глядя на этот код, мы видим, что, как и в случае с главным меню, разметка представляет собой обычный маркированный список. При этом дочерние пункты списка так же представлены в виде вложенных списков ul. Все стилевое оформление берет на себя CSS файл. Это просто отлично, и освобождает нас от ненужной работы с оформлением, ведь результатом работы сниппета pdoMenu и является именно обычный маркированный список.

Перед тем, как начать настраивать сниппет, давайте создадим в дереве документов несколько дочерних ресурсов для пункта меню Услуги, чтобы получилась следующая структура:

Услуги
- Создание сайтов
  - Дизайн
  - Верстка
  - Программирование
- Продвижение сайтов
  - Поисковое продвижение
  - Контекстная реклама
  - Баннерная реклама
  - Вирусный маркетинг
- Разработка ПО
- Поддержка

17. Чтобы создать дочерний ресурс, надо щелкнуть по значку со знаком + в строке родительского ресурса (например, по ресурсу Услуги).

Рисунок 4.8

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

После этого надо щелкнуть в дереве ресурсов по имени ресурса, куда хотите перенести данный ресурс.

Рисунок 4.9

18. В итоге у вас дерево сайта должно будет выглядеть вот так (могут отличаться номера ID в скобках):

Рисунок 4.10

Каждый ресурс наполните демо-данными: расширенный заголовок, описание, содержимое ресурса (в визуальном редакторе.)

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

Рисунок 4.11

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

Вызов главного меню у нас находится в чанке HEADER, отправляемся его редактировать. Сейчас вызов осуществляется с помощью конструкции:

[[!pdoMenu? &parents=`0`]]

20. Добавьте еще параметр &level=`2` это позволит выводить пункты главного меню и их дочерние (т.е. 2 уровня вложенности).

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

[[!pdoMenu? &parents=`0` &level=`2`]]

Внешний вид главного меню с выпадающим списком:

Рисунок 4.12

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

Боковое меню сейчас у нас находится в чанке RIGHT-COL.

Вместо кода

<div class="subnav">
<h2>Secondary Navigation</h2>
<ul>
   <li><a href="#">Open Source Templates</a></li>
   <li><a href="#">Free CSS Templates</a>
      <ul>
           <li><a href="#">Free XHTML Templates</a></li>
           <li><a href="#">Free Website Templates</a></li>
      </ul>
</li>
<li><a href="#">Open Source Layouts</a>
   <ul>
       <li><a href="#">Open Source Software</a></li>
       <li><a href="#">Open Source Webdesign</a>
           <ul>
                <li><a href="#">Open Source Downloads</a></li>
                <li><a href="#">Open Source Website</a></li>
            </ul>
         </li>
   </ul>
</li>
<li><a href="#">Open Source Themes</a></li>
</ul>
</div>

Впишите конструкцию вызова сниппета pdoMenu, помещенную в контейнер <div class="subnav">, при этом в качестве источника документов для меню указываем контейнер Услуги, ID которого в нашем случае 3, у Вас это число может отличаться, чтобы узнать идентификатор вашей папки, посмотрите на число, расположенное в скобках в дереве ресурсов.

<div class="subnav">
<h2>Наши услуги</h2>
[[!pdoMenu? &parents=`3`]]
</div>

22. Результат работы сниппета Вы сможете посмотреть на любой странице вашего сайта, для которой установлен шаблон 2 колонки. Вот как должно выглядеть боковое меню после всех произведенных действий:

Рисунок 4.13

Как Вы видите, сейчас отображаются все дочерние пункты бокового меню. Бывают случаи, когда необходимо отображать только дочерние пункты активного пункта. Для того, чтобы реализовать эту опцию, вы можете использовать еще один параметр сниппета pdoMenu – &hideSubMenus. Если значение этого параметра установить в true, то подменю будет отображаться только для активного пункта меню.

23. Добавьте этот параметр в конструкцию вызова сниппета pdoMenu.

<div class="subnav">
<h2>Наши услуги</h2>
[[!pdoMenu? &parents=`3` &hideSubMenus=`true`]]
</div>

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

Рисунок 4.14

Если посмотреть в CSS файл, в котором описывается стилевое оформление навигации assets/plusbusiness/styles/navi.css, то можно заметить строчку

#column .subnav ul ul ul ul ul a{padding-left:70px; background-position:60px center;}

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

24. Окончательная конструкция:

<div class="subnav">
<h2>Наши услуги</h2>
[[!pdoMenu? &parents=`3` &hideSubMenus=`true` &level=`5`]]
</div>

Рисунок 4.15

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

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

26. Вместо удаленного содержимого вставьте конструкцию вызова чанка:

[[$CONTENT]]

27. Создайте новый чанк с именем CONTENT. В код чанка (HTML) вставьте вырезанный код, удалите содержимое контейнера <div id="content"> и оставьте только теги <div id="content"></div>. Ниже на рисунке показано, как мы заполнили поля при создании этого чанка.

Рисунок 4.16

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

Рисунок 4.17

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

Рисунок 4.18

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

28. Обновите в браузере страницы с шаблоном 2 колонки. Как видите, содержимого страницы нет.

Рисунок 4.19

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

[[*content]]

29. В поле с кодом чанка CONTENT вставьте конструкцию [[*content]]. В итоге содержимое чанка будет иметь следующий вид:

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

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

30. Пройдите по страницам с шаблоном 2 колонки.

31. Откройте каждый ресурс в дереве ресурсов и введите текст в поле текстового редактора.

Рисунок 4.20

32. Проверьте еще раз страницы, содержимое, которое Вы ввели в поле редактора, оно должно появиться на страницах.

Рисунок 4.21

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

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

Рисунок 4.22