В этой статье рассмотрим, как в MODX с помощью дополнения Tagger добавить к ресурсам метки или хэштеги, а также как их использовать для поиска соответствующих ресурсов и создания облака тегов.
Для создания тегов к статьям, облака тегов и страницы, которая будет выводить ресурсы в соответствии с переданным ей тегом, будем использовать компоненты Tagger и pdoTools.
Установку необходимых компонентов произведём на странице "Управление пакетами" (Приложения -> Установщик):
pdoResources
и pdoPage
.Работу с 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
Следовательно, для того чтобы вывести соответствующие ресурсы необходимо:
tag
из массива GET.where
). Т.е. ограничить выборку только теми записями, которые имеют указанный тег.Вставим в шаблон "Статьи по тегу" базовый каркас страницы и вызов сниппета 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 Revolution сталкивались с проблемой переноса сайта на хостинг. В данной статье описан способ переноса сайта MODx Revo на хостинг.
Дополненный перевод официальной документации: Документация MIGx. Плейсхолдеры, параметры и примеры вызовов сниппета getImageList.
Статья, в которой рассмотрим, как на сайт, работающий под управлением MODX Revolution, интегрировать Google reCaptcha. Разбирать reCaptcha будем на базе компонента MODX ReCaptchaV2, который интегрируем в форму обратной связи (FormIt) и на страницу регистрации (Login).