На этом уроке рассмотрим, как с помощью компонентов Tagger и pdoTools организовать на сайте теги к статьям, поиск по этим тегам и облако тегов.

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

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

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

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

Компонент Tagger

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

MODX (компонент Tagger) - Создание группы
MODX - Создание группы для тегов

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

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

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

MODX (компонент Tagger) - Создание нового тега
MODX - Создание нового тега

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

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

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

MODX (компонент Tagger) - Список тегов
MODX - Список тегов

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

MODX (компонент Tagger) - Добавление тегов к тикету
MODX - Добавление тегов к тикету

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

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

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

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

Для вывода тегов, добавленных к статье необходимо открыть шаблон (Пост) и вставить в него вызов сниппета 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]] для создания запроса к базе данных, выбирающих из неё только записи, имеющие этот тег.
MODX (компонент Tagger) - Вывод тегов на странице тикета
MODX - Вывод тегов на странице ресурса

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

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

MODX - Схема Tagger (+таблица modResource)
MODX - Схема 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>`
]]

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

MODX (компонент Tagger) - Облако тегов
MODX - Облако тегов

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

Данная страница будет выводить список статей, которые имеют указанный тег. Как Вы уже наверно догадались, получать тег эта страница будет из 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>
MODX - Вывод статей, имеющих соответствующий тег
MODX - Вывод статей, имеющих соответствующий тег