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

Установка Tagger и pdoTools

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

Установку необходимых компонентов произведём на странице "Управление пакетами" (Приложения -> Установщик):

• Tagger - компонент, который добавляет в MODX теги, категории и многое другое.
• pdoTools - компонент, представляющий собой набор сниппетов, позволяющих решить очень большое количество задач. На этом уроке будем использовать сниппеты pdoResources и pdoPage.

Компонент Tagger

Работу с Tagger начнём с создания группы и тегов в ней. Для этого в верхнем меню нажмем на пункт Приложения и выберем подпункт Tagger. На открывшейся странице перейдём на вкладку Group и создадим новую группу с помощью кнопки "Create a new Group".

Основные поля:

• name - название группы (tags).
• description - описание группы (теги к статьям).
• place - место отображение тегов (in tab - во вкладке).
• show for templates - для каких шаблонов отображать группу (2 - id шаблона статей).
• allow blank - определяет, можно ли не указывать теги.

Перейдём на вкладку Tags и создадим теги в группе tags.

Основные поля:

• name - имя тега (например, HTML)
• alias - псевдоним тега (например, html)
• group - группа (выбираем ранее созданную группу tags)

После этого создадим ещё несколько тегов.

Добавим к статьям, имеющим шаблон Пост (id=2), теги. Добавление тегов осуществляется во вкладке Tagger.

Создание ресурса - Вывод статей по тегу

Создадим ресурс "Вывод статей по тегу" и шаблон, который свяжем с ним. Результат данного действия показан на рисунке. Во вкладке "Настройки" укажем данному ресурсу URI - show-posts. Запомним идентификатор (id) данного ресурса (например, 20).

Вывод тегов, прикреплённых к статье

Для вывода тегов, добавленных к статье необходимо открыть шаблон (Пост) и вставить в него вызов сниппета TaggerGetTags:

  
[[TaggerGetTags?
  &resources=`[[*id]]`
  &rowTpl=`@INLINE <div class="btn-group"><span class="btn btn-primary btn-sm">#</span><a class="btn btn-info btn-sm" href="[[~20]]?tag=[[+alias]]">[[+tag]]</a></div>`
]]
 

Параметр:

&rowTpl - чанк, который используется для вывода каждого тега.

Плейсхолдеры:

• [[+alias]] - псевдоним тега.
• [[+tag]] - имя тега.

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

  
[[~20]]?tag=[[+alias]]
  

где:

• [[~20]] - URL ресурса "Вывод статей по тегу". Данный ресурс будем использовать для вывода статей, имеющих указанный тег.
• [[+alias]] - значение передаваемого GET-параметра tag. Данное значение будем использовать в ресурсе [[~20]] для создания запроса к базе данных, выбирающих из неё только записи, имеющие этот тег.

Создание облака тегов

Для создания облака тегов воспользуемся сниппетом pdoResources. Но перед тем как переходить к выборке, рассмотрим MySQL схему компонента Tagger. Данная схема отображает связь между таблицами (классами) компонента Tagger и modResource.

Из схемы видно, что компонент Tagger состоит из 3 таблиц (классов):

• TaggerTag - список тегов.
• TaggerTagResource - связывает modResource и TaggerTag. Т.е. каждая строчка содержит id тега и id ресурса.
• TaggerGroup - список групп.

Класс modResource приведён для наглядности.

Для создания облака тегов необходимо воспользуемся сниппетом pdoResources:

  
[[!pdoResources?
  &loadModels=`tagger`
  &class=`TaggerTag`
  &leftJoin=`{
    "TaggerTagResources": {
   "class": "TaggerTagResource",
   "on": "TaggerTag.id = TaggerTagResources.tag"
    }
  }`
  &select=`{
    "TaggerTag": "*",
   "TaggerTagResources": "COUNT(TaggerTagResources.tag) as countTags"
  }`
  &groupby=`TaggerTag.id`
  &sortby=`TaggerTag.tag`
  &sortdir=`ASC`  
  &tplWrapper=`@INLINE <div class="panel panel-primary"><div class="panel-heading"><span class="glyphicon glyphicon-tags"></span> Теги</div><div class="panel-body">[[+output]]</div></div>`
  &tpl=`@INLINE <a href="[[~20]]?tag=[[+alias]]" class="btn btn-primary">[[+tag]] <span class="badge">[[+countTags]]</span></a>`
]]
  

Вставим вышепредставленный код, например, в правую колонку шаблона Пост.

Реализация страницы "Вывод статей по тегу"

Данная страница будет выводить список статей, которые имеют указанный тег. Как Вы уже наверно догадались, получать тег эта страница будет из URL (из GET параметра tag).

Рассмотрим этот момент более подробно. На страницах каждый тег оформлен в виде ссылки, которая имеет в своём составе параметр tag.

Например, тег bootstrap имеет следующий URL:

 
http://site.ru/show-posts?tag=bootstrap
 

Следовательно, для того чтобы вывести соответствующие ресурсы необходимо:

1. Получить значение параметра tag из массива GET.
2. Создать запрос для выборки необходимых данных.
3. Указать данному запросу условие (where). Т.е. ограничить выборку только теми записями, которые имеют указанный тег.
4. Создать чанк для оформления результатов.

Вставим в шаблон "Статьи по тегу" базовый каркас страницы и вызов сниппета pdoPage:

  
[[!pdoPage?
  &element = `pdoResources`
  &limit=`2`
  &loadModels=`tagger`
  &class=`TaggerTagResource`
  &leftJoin=`{
    "NameTag": {
      "class": "TaggerTag",
      "on": "TaggerTagResource.tag = NameTag.id"
    },
    "Posts": {
      "class": "modResource",
      "on": "TaggerTagResource.resource = Posts.id"
    }
  }`
  &select=`{
    "TaggerTagResource": "*",
    "NameTag": "NameTag.tag, NameTag.alias",
    "Posts": "Posts.id, Posts.pagetitle, Posts.description"
  }`
  &where=`{
    "NameTag.alias": "[[!#GET.tag]]"
  }`
  &sortby=`TaggerTagResource.resource`
  &sortdir=`ASC`  
  &tplWrapper =`@INLINE <h2 class="h3">Всего результатов: [[+page.total]]</h2>[[+output]]`
  &tpl= `chunkTagRow`
]]
[[!+page.nav]]
  

Чанк chunkTagRow:

  
<div class="panel panel-default">
  <div class="panel-body">
    <h3 class="h4">[[+pagetitle]]</h3><p>[[+description]]</p>
    <p class="text-right"><a href="[[~[[+id]]]]" class="btn btn-primary" role="button">Читать далее...  </a></p>
  </div>
</div>