Уроки MODx Revolution

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

---

Урок 5. Специальные теги MODx

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

При настройке шаблона мы использовали тег [[*content]] для вывода содержимого страниц, и тег [[++site_url]] для указания базового URL для всех страниц сайта.

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

Наиболее распространенные теги MODx

[[++site_name]] – этот тег выводит заголовок вашего сайта. Обычно используется в заглавии страниц HTML в теге <title>. Ниже на рисунке изображено поле, содержимое которого выводит эта конструкция. Отредактировать его можно на странице системной конфигурации.

Рисунок 5.1

[[++site_url]] – эта конструкция позволяет выводить URL вашего сайта. При создании шаблона мы использовали этот тег для указания базового URL для корректной работы с относительными путями.

[[*pagetitle]] – эта конструкция выводит содержимое поля Заголовок, которое мы будем заполнять на странице создания/редактирования ресурса.

[[*longtitle]] – выводит содержимое поля Расширенный заголовок. Обычно используется как главный заголовок <h1> на странице.

[[*description]] – выводит содержимое поля Описание. Это поле будем использовать для вывода содержимого в META-теге description.

[[*introtext]] – выводит содержимое поля Аннотация. Это поле чаще всего используют при создании новостей, заметок в блоге и т.п. для организации страниц с кратким описанием заметок.

[[*content]] – основное содержимое страниц. Конструкция выводит любой текст или HTML код, написанный или отредактированный в визуальном редакторе.

[[*id]]– выводит идентификатор ресурса.

[[*alias]]– выводит псевдоним ресурса.

[[~идентификатор~]] – выводит URL адрес ресурса, идентификатор которого указан. Например, если ID страницы Новости – 4, а псевдоним этой страницы – news, то конструкция [[~4~]] выведет URL вашей страницы с новостями.  

Обратите внимание: результатом обработки данной конструкции является лишь строка в виде URL страницы, не перепутайте ее со ссылкой на документ. Ссылка на страницу с использованием этой конструкции будет иметь следующий вид:

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

Рисунок 5.2

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

[[*pub_date]] – дата публикации ресурса

[[*unpub_date]] – дата завершения публикации

[[*createdby]] – идентификатор пользователя, создавшего ресурс

[[*createdon]] – дата создания ресурса

[[*editedby]] – идентификатор пользователя, редактировавшего ресурс

[[*editedon]] – дата редактирования ресурса

[[*content_type]] – тип содержимого (например, text/html)

[[*class_key]] – тип (ресурс, папка или ссылка)

[[*published]] – опубликован ли ресурс (1|0)

[[*parent]] – номер (ID) родительского ресурса

[[*isfolder]] – является ли ресурс папкой (1|0)

[[*richtext]] – используется ли при редактировании страницы визуальный редактор

[[*template]] – номер (ID) используемого шаблона для ресурса

[[*menuindex]] – порядковый номер отображения в меню

[[*searchable]] – доступен ли ресурс для поиска (1|0)

[[*cacheable]] – кэшируется ли ресурс (1|0)

[[*deleted]] – ресурс удален (1|0)

[[*deletedby]] – идентификатор пользователя, удалившего ресурс

[[*menutitle]] – заголовок меню, если таковой есть

 [[*content_dispo]] – вариант выдачи содержимого (1 – для отображения | 0 – прикрепленное для скачивания)

[[*hidemenu]] – документ не отображается в меню (1|0)

[[++modx_charset]] – выводит название используемой кодировки

[^q^] – количество запросов к БД

[^qt^] – время, затраченное на обработку запросов

[^p^] – время работы php скрипта

[^t^] – общее время загрузки страницы. Сумма двух предыдущих значений

[^s^] – источник загрузки страницы — кэш или база данных.

 

1. Откройте для редактирования чанк HEAD и в теге <title> вставьте конструкцию:

Эта конструкция будет выводить в названии HTML-страницы название ресурса и заголовок сайта, разделенные знаком «|».

2. Затем добавьте META тег description, в содержимое которого вписываем конструкцию [[*description]]

3. Измените кодировку в шаблоне. Если помните, у нас она была выставлена в UTF-8. В списке выше указан тег, который выводит название кодировки, используемой на сайте.

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

4. Посмотрите, как выглядит заголовок страницы Услуги в окне браузера. У нас выглядит так:

Рисунок 5.3

5. Сейчас неплохо было бы автоматизировать вывод главного заголовка <h1> на страницах сайта. Для этого отправляемся на страницу редактирования чанка и перед уже знакомым тегом вывода содержимого страницы вставьте вывод заголовка, содержимое которого будем брать из поля Расширенный заголовок. Как мы видели из рисунка – этому полю соответствует тег [[*longtitle]]. После внесения изменений чанк CONTENT примет следующий вид:

Таким образом, главные заголовки <h1> наших страниц будут выставляться автоматически, и их не нужно будет вписывать в визуальном редакторе. Главное – это не оставлять пустым поле Расширенный заголовок при редактировании ресурса. Так же для организации заголовков Вы можете использовать содержимое других полей, например, поле Заголовок. В этом случае в чанк CONTENT вам необходимо будет добавлять конструкцию <h1>[[*pagetitle]]</h1>.

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

Рисунок 5.4  

6. После этого нам необходимо добавить вывод заголовков в шаблон Во всю ширину, ведь Вы помните, что в этом шаблоне чанка CONTENT у нас нет, а содержимое страниц мы вызываем сразу из шаблона с помощью тега [[*content]]. Поэтому, откройте страницу редактирования шаблона и добавьте над этим тегом вывод заголовка: <h1>[[*longtitle]]</h1>. После изменений шаблон Во всю ширину должен выглядеть следующим образом. 

Рисунок 5.5

Реализация цепочки навигации «Хлебные крошки». Сниппет pdoCrumbs

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

Рисунок 5.6

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

Чтобы вызвать сниппет pdoCrumbs в шаблоне мы должны вставить следующую конструкцию:

В этом случае результат работы будет кэшироваться, и при повторном вызове сниппета код не обрабатывается, а берется из кэш. Некэшируемый вызов осуществляется с помощью названия сниппета, помещенного в квадратные скобки с восклицательными знаками. Вот как бы выглядел некэшируемый вызов: [[!pdoCrumbs]]

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

<div class="wrapper col2">
  <div id="breadcrumb">
   <ul>
      <li class="first">You Are Here</li>
      <li>»</li>
      <li><a href="#">Home</a></li>
      <li>»</li>
      <li><a href="#">Grand Parent</a></li>
      <li>»</li>
      <li><a href="#">Parent</a></li>
      <li>»</li>
      <li class="current"><a href="#">Child</a></li>
    </ul>
  </div>
</div>

7. Навигационная цепочка в этом чанке представляет собой ненумерованный список, помещенный в два контейнера <div class="wrapper col2"> и <div id="breadcrumb">. При этом первый элемент цепочки обозначен классом first, а текущий – current. Чтобы сделать динамическую цепочку навигации, удалите этот список и на его место вставьте конструкцию вызова сниппета pdoCrumbs. После чего чанк BREADCRUMB будет содержать в себе следующий код:

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

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

Рисунок 5.7

Как видно из рисунка, если вызывать сниппет pdoCrumbs без параметров, то сниппет выводит только пункт текущей страницы и не показывает всю цепочку от корня сайта.

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

Напомним, что передача параметров сниппету осуществляется с помощью следующей конструкции:

Мы уже пользовались подобным синтаксисом при передаче параметров сниппету pdoMenu в уроке по реализации динамического меню.

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

9. В чанке BREADCRUMB замените конструкцию вызова сниппета [[pdoCrumbs]] на следующий код:

[[pdoCrumbs?
    &showHome=`1`
     &tpl=`@INLINE <li><a title="[[+menutitle]]" href="[[+link]]">[[+menutitle]]</a></li>`
    &tplHome=`@INLINE <li><a rel="nofollow" title="[[+menutitle]]" href="[[+link]]">[[+menutitle]]</a></li>`
    &tplWrapper=`@INLINE <ol class="breadcrumb text-left mt-10 white">[[+output]]</ol>`
    &tplCurrent=`@INLINE <li class="active">[[+menutitle]]</li>`
    &outputSeparator=` » `
]]

Ваш чанк BREADCRUMB должен выглядеть следующим образом:

Рисунок 5.8

Параметр &showHome=`1` отвечает за вызов ссылки на главную страницу в цепочке «хлебных крошек».

&tpl – шаблон для оформления ресурса в цепочке.

&tplHome – шаблон оформления ссылки на главную страницу.

&tplWrapper – шаблон-контейнер для всей цепочки, в нашем случае выводит список <ol>

&tplCurrent – шаблон оформления текущего документа.

&outputSeparator – разделитель между пунктами цепочки.

10. Обновите страницу Услуги в браузере. Сейчас цепочка навигации выглядит как такой нумерованный список.

Рисунок 5.9

11. Чтобы исправить ситуацию откройте в файловом менеджере хостинга файл стилей layout.css. Он находится в папке assets/plusbusiness/styles Щелкните правой кнопкой мыши по имени файла и выберите пункт Правка.

Рисунок 5.10

12. В открывшемся окне найдите раздел /*----BreadCrumb--*/

Рисунок 5.11

13. И замените его на следующие стили

/*----------------------------------------------BreadCrumb-------------------------------------*/
#breadcrumb{
         padding:20px 0;
         }
#breadcrumb o{
         margin:0;
         padding:0;
         list-style:none;
         }
#breadcrumb ol li{display:inline;}
#breadcrumb ol li.current a{text-decoration:underline;}
#breadcrumb {padding:20px 0;}
#breadcrumb a{text-decoration:underline;}
#breadcrumb a:hover{text-decoration:none;}

Выполните команду Файл – Сохранить в верхнем меню.

Мы не будем приводить сравнение этих двух блоков стилей, т.к. Вы уже владеете CSS и сможете разобраться без дополнительных пояснений.

14. Обновите страницу. Если после обновления не видно изменений (мы ведь используем кэшируемый вызов сниппета pdoCrumbs), нажмите Ctrl+F5, чтобы загрузить страницу не из кэша браузера. После обновления страницы внешний вид нашей цепочки навигации значительно изменится. Номеров не будет, ссылки будут подчеркнуты.

Рисунок 5.12