Уроки MODx Revolution

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

Урок 3. Дерево документов и создание страниц

Дерево документов MODx располагается в левой части администраторской панели.

Рисунок 3.1

Страницы и категории в MODx называются ресурсами.

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

1. Нажмите на название этой страницы в дереве документов. Перед вами появится страница редактирования ресурса. Отредактируйте этот созданный по умолчанию ресурс в соответствии с рисунком ниже.

Рисунок 3.2

2. В принципе, тут все интуитивно понятно. Сохраните страницу.

Вкладка «Документ»

На этой вы заполняете основные атрибуты вашей страницы, а именно следующие поля:

«Заголовок» [[*pagetitle]] – вписываете название вашей страницы.

«Расширенный заголовок» [[*longtitle]] – в этом поле вы можете вписать расширенный заголовок вашей страницы. Можете это поле оставить пустым или скопировать сюда содержимое поля «Заголовок».

«Описание» [[*description]] – в это поле вы можете внести информацию, которую хотите разместить в мета теге description для данной страницы.

«Псевдоним» [[*alias]] – здесь нужно вписать имя страницы (латинскими буквами), которое вы хотите видеть в URL. Если вы его оставите пустым, оно заполнится автоматически исходя из заголовка страницы, если настроен плагин translit, о котором мы упоминали в процессе установки CMS MODx. Если плагин вы не настроили, то пустое поле заменится на идентификатор ресурса.

«Аннотация» [[*introtext]] – поле с кратким описанием страницы, например, первый абзац или что-нибудь в этом роде.

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

«Пункт меню» [[*menutitle]] – не обязательное поле, но вы можете его использовать, если ваш заголовок страницы очень длинный и его не удобно использовать в качестве пункта в меню. В этом случае в качестве названия пункта меню Вы можете использовать это поле.

«Скрыть меню» – убрав галочку с этого пункта, Вы запретите показ вашей страницы в меню.

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

Вкладка «Настройки»

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

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

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

Рисунок 3.3

3. Для создания новой страницы, нажмите следующую пиктограмму, расположенную вверху дерева документов

Рисунок 3.4

4. В окне создания ресурса заполните необходимые поля и сохраните ресурс.

Рисунок 3.5

Рисунок 3.6

После сохранения ресурс появится в дереве ресурсов.

5. Создайте типичные страницы для сайтов-визиток и наполните демо-данными, аналогично рис. 3.5:

Главная
О нас
Услуги
Контактная информация
Новости

После создания ресурсов ваше дерево будет выглядеть как на рисунке ниже.

Рисунок 3.7

Чтобы в дереве ресурсов ресурсы расположились в определенной последовательности, во вкладке Настройки устанавливайте номер Позиция в меню в нужном порядке.

Рисунок 3.8

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

Создание динамического меню. Сниппет pdoMenu

Сниппет – это PHP код, который мы можем вызывать из шаблона сайта. Результат работы сниппета вставляется в место вызова. Список сниппетов можно посмотреть во вкладке Элементы – Сниппеты. Все они доступны для редактирования.

Сниппеты нужны для обеспечения динамической логики на сайте. Например, для генерации динамических меню, вывода контента из базы данных по некоему условию, организации формы обратной связи, вообще, для любых действий, доступных через MODx API.

Вызов осуществляется по имени сниппета, помещенном между квадратными скобками с восклицательными знаками. Например, если имя определенного сниппета – Name, то вызов его будет осуществляться следующей конструкцией, помещенной в шаблон:

[[!Name]]

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

Для того, чтобы передать некоторые значения параметров используется конструкция:

[[!Имя_сниппета? &параметр1=`значение` &параметр2=`значение`]]

Обратите внимание на вопросительный знак после имени сниппета, он говорит о том, что далее следуют объявление передаваемых параметров. Названию каждого передаваемого параметра предшествует знак &, а его значение заключено в обратные одинарные кавычки. Это те кавычки, которые на русской клавиатуре добавляются нажатием клавиши с буквой Ё. Не перепутайте, один неверный знак, и вы долго будете мучиться и разбираться, почему ничего не работает.

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

[[Name]]

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

Для организации динамических меню в MODx мы будем использовать сниппет pdoMenu, который входит в состав пакета pdoTools.

Сначала установите пакет pdoTools.

1. Для этого откройте Пакеты – Установщик. Нажмите кнопку Загрузить пакеты. В строке поиска наберите pdoTools и нажмите кнопку Загрузить.

Рисунок 3.9

2. После загрузки нажмите кнопку Вернуться в «Менеджер пакетов» и нажмите Установить.

Рисунок 3.10

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

Рисунок 3.11

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

Рисунок 3.12

то, если мы вызовем на главной странице сниппет

[[!pdoMenu]]

результатом его работы будет список из 4 ссылок на дочерние страницы. Список будет иметь вид:

<ul class="">
<li class="first active"><a href="http://site/" title="На главную">Главная страница</a></li>
<li><a href="/about.html" title="О нас">О нас</a></li>
<li><a href="/uslugi.html" title="Услуги">Услуги</a></li>
<li><a href="/contact.html" title="Контактная информация">Контактная информация</a></li>
<li class="last"><a href="/novosti.html" title="Новости">Новости</a></li>
</ul>

Сниппет выводит список всех дочерних документов. Для вывода дочерних документов необходимо сниппету pdoMenu передать параметр parents, в который записываем ID того документа, ссылки на дочерние страницы которого мы будем выводить.

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

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

Сейчас давайте посмотрим, что же представляет из себя главное меню сайта в нашем шаблоне. Если Вы помните меню с логотипом у нас хранится в одном чанке под названием HEADER. И что мы видим?

<div id="topnav">
   <ul>
      <li class="active"><a href="index.html">Home</a></li>
      <li><a href="style-demo.html">Style Demo</a></li>
      <li><a href="full-width.html">Full Width</a></li>
      <li><a href="#">DropDown</a>
         <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
         </ul>
      </li>
      <li class="last"><a href="#">A Long Link Text</a></li>
   </ul>
</div>

Меню представляет из себя обычный ненумерованный список, помещенный в контейнер с id="topnav". Это значит, что html-разметка меню будет представлять из себя обычный список, а всю задачу по внешнему виду берет на себя CSS файл, который мы подключали ранее. Но мы с Вами уже в курсе, как можно этот ненумерованный список динамически вывести в MODx.

4. Поэтому удалите из чанка HEADER вот этот код (список).

<ul>
   <li class="active"><a href="index.html">Home</a></li>
   <li><a href="style-demo.html">Style Demo</a></li>
   <li><a href="full-width.html">Full Width</a></li>
   <li><a href="#">DropDown</a>
      <ul>
         <li><a href="#">Link 1</a></li>
         <li><a href="#">Link 2</a></li>
         <li><a href="#">Link 3</a></li>
      </ul>
   </li>
   <li class="last"><a href="#">A Long Link Text</a></li>
</ul>

5. А на его месте вызовите сниппет pdoMenu с передаваемым ему параметром parents=`0`.

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

Вызов сниппета должен находиться в контейнере с id="topnav"

Сохраните чанк HEADER.

Полный список параметров сниппета можно посмотреть по адресу https://docs.modx.pro/komponentyi/pdotools/snippetyi/pdomenu

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

Рисунок 3.13

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

Давайте посмотрим на исходный код получившегося главного меню:

<ul class="">
<li class="first active"><a href="/" >Главная страница</a></li>
<li><a href="o-nas.html" >О нас</a></li>
<li><a href="uslugi.html" >Услуги</a></li>
<li><a href="kontaktnaya-informacziya.html" >Контактная информация</a></li>
<li class="last"><a href="novosti.html" >Новости</a></li>
</ul>

Обратите внимание, что сниппет pdoMenu автоматически генерирует класс для активного пункта меню class="active" и его название даже совпало с прописанным в нашем случае в CSS классом active. Поэтому при переходе по меню, активный пункт у нас подсвечивается зеленым цветом, так как и было изначально в шаблоне.

По умолчанию, для активного пункта меню pdoMenu всегда будет генерировать class="active", поэтому, если в Вашем шаблоне он описывается другим классом, измените его в CSS файле. Если Вы внимательно посмотрите еще раз на исходный код сгенерированного списка, то вы увидите, что первый пункт списка обозначается классом first, последний пункт меню по умолчанию обозначается классом last, это тоже имейте ввиду, так как часто для оформления первого и последнего пунктов меню требуется прописывать стили отдельно. В этом случае для их оформления можете воспользоваться классами first и last.

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

Рисунок 3.14

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

Рисунок 3.15

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

Рисунок 3.16

Вот теперь у нас уже есть готовое главное меню, с помощью которого мы можем переходить по страницам, созданным в дереве документов MODx.

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

Что Вам чаще всего может пригодиться при работе с меню? Конечно же его сортировка. Допустим, Вам хочется, чтобы пункты меню располагались в следующем порядке: Главная, О нас, Услуги, Новости и в конце Контактная информация. По умолчанию выставлена сортировка по параметру menuindex, который Вы устанавливаете при редактировании ресурсов в поле Позиция в меню.

Рисунок 3.17

8. Чем меньше цифра, тем раньше идет пункт в меню. Поэтому при редактировании ресурсов Вы можете установить для каждой страницы соответствующее значение позиции в меню. Чтобы отсортировать пункты в меню в последовательности, описанной выше, измените значения Позиция в меню: Главная – 0, О нас – 1, Услуги – 2, Новости – 3 и в конце Контактная информация – 4.

9. Обновите страницу. Как видите, пункты Новости и Контактная информация поменялись местами.

Рисунок 3.18

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

Рисунок 3.19

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

Рисунок 3.20

После этого в дереве документов название ресурса Новости будет голубого цвета.

Рисунок 3.21

На этом, собственно, организация меню окончена. Мы научились выводить динамическое меню в MODx c помощью сниппета pdoMenu. При этом вы уже на практике попробовали отсортировать пункты меню и убирать из показа в меню выборочные пункты.