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

Так как на предыдущих уроках мы уже создали ресурс «Карта блога», то теперь нам остаётся разработать его содержимое. Изложение урока разобьём на 2 раздела. В первом разделе напишем код, с помощью которого мы будем генерировать основное содержимое страницы, т.е. карту сайта. Во втором разделе в виде пошаговой инструкции рассмотрим процесс создания страницы блога и добавления к ней кода, созданного в первом разделе.

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

  • level – уровень генерируемого меню. Данное значение установим равным 0, т.к. нам необходимо вывести ресурсы, расположенные на всех уровнях иерархии.
  • resources – данный параметр будем использовать, для исключения из выдачи ресурса с идентификатором 4.

    Список ресурсов блога

  • countChildren – данный параметр предназначен для включения подсчёта количества дочерних ресурсов в каждом контейнере (разделе). Результат своих действий он выводит в плейсхолдер [[+children]].
  • showHidden – данный параметр определяет показывать ли ресурсы скрытые для меню или нет.
  • tplOuter – чанк, который содержит шаблон для обёртки всей карты меню (маркированный список).

    <ul>
      ...
    </ul>
    
  • tpl – чанк, который будем использовать для оформления элемента маркированного списка.

    <li>
    <a href="Ссылка">Название ресурса</a>
    </li>
    
  • tplParentRow – чанк, который будем использовать для оформления контейнера (раздела).

    <li>
      <a href="Ссылка">Название раздела (количество дочерних ресурсов)</a>
    <ul>
        ...
      </ul>
    </li>
    
  • tplInner – чанк, который предназначен для обёртки элементов списка, расположенных на втором и последующих уровнях маркированного списка.
[[!pdoMenu?
  &startId=`0`
  &level=`0`
  &resources=`-4`
  &showHidden=`1`
  &countChildren=`1`
  &tplOuter=`@INLINE<ul>[[+wrapper]]</ul>`
  &tpl=`@INLINE<li><a href="[[+link]]">[[+menutitle]]</a></li>`
  &tplParentRow=`@INLINE<li><a href="[[+link]]">[[+menutitle]] ([[+children]])</a><ul>[[+wrapper]]</ul></li>`
  &tplInner=`@INLINE[[+wrapper]]`
]]

Рассмотрим данный процесс в виде пошаговой инструкции:

  1. Создадим шаблон для ресурса "Карта блога".

    Создание шаблона в MODX Revolution

  2. Введём следующий код в шаблон:

    <!DOCTYPE html>
    <html lang="ru">
    [[$chunk.head]]
    <body>
      <div class="container"> 
        <div class="row">
          [[$chunk.header]]
          [[$chunk.navbar]]
          <div class="main-block col-md-8">
            <h1 class="h2 page-header">[[*pagetitle]]</h1>
            [[*content]]
            [[!pdoMenu?
              &startId=`0`
              &level=`0`
              &resources=`-4`
              &showHidden=`1`
              &countChildren=`1`
              &tplOuter=`@INLINE<ul>[[+wrapper]]</ul>`
              &tpl=`@INLINE<li><a href="[[+link]]">[[+menutitle]]</a></li>`
              &tplParentRow=`@INLINE<li><a href="[[+link]]">[[+menutitle]] ([[+children]])</a><ul>[[+wrapper]]</ul></li>`
              &tplInner=`@INLINE[[+wrapper]]`
            ]]
          </div>
          <div class="col-md-4">
          </div>
        </div>
      </div>
      [[$chunk.footer]]
    </body>
    </html>
    
  3. Сохраним шаблон с помощью нажатия на кнопку с соответствующим названием.
  4. Откроем ресурс "Карта блога".
  5. В раскрывающемся списке "Шаблон" выберем пункт "Карта блога", или то имя шаблона, которые вы ему назначали в первом пункте.

    Привязка шаблона к ресурсу в MODX Revolution

  6. Введите контент в содержимое ресурса. Например, Вы можете ввести описание ресурса или пояснение к карте сайта.
    <img class="center-block" src="assets/images/logo/map.jpg">
    <br>
    <p class="lead">Содержание:</p>
    
  7. Сохраните ресурс.

Веб-страницу "Карта блога" продемонстрируем с помощью следующего скриншота:

Карта блога