Сегодня пойдет разговор, как можно вывести «Облако тегов» в MODX revolution.

Cоздадим страницу для вывода результатов при обращении к тегу или метке, выбор за Вами. Выводить облако тегов мы будем с помощью сниппета tagLister. Если он у Вас еще не установлен, скачивайте и устанавливайте.

Скачанный Вами сниппет tagLister включает в себя три сниппета:

• tagLister — Показывает облако тегов, т.е. список всех имеющихся тегов.

• tolinks — Показывает теги для одной страницы.

• getResourcesTag — Показывает все страницы помеченные определенным тегом, при обращении к этому тегу. Это расширение сниппета getResources, поэтому он делит те же параметры и добавлены свои.

  Для того что бы теги выводились, их нужно откуда-то брать. Поэтому, создаем новое дополнительное поле (TV). На вкладке «Общая информация» заполняем поля:

• имя: tags (Не рекомендую менять название, т.к. в параметрах tagLister это название для обращения к TV установлено по умолчанию.).

• заголовок: tags

• описание: Для отображения тегов

На вкладке «Параметры ввода», в строке «тип ввода» выберите «авто-метка», это исключит такие ошибки при перечислении тегов типа: Тег, тег, ТЕГ, тег и т.д. Кроме этого очень удобно, вкладка «Параметры вывода» — по умолчанию.

«Доступно для шаблонов» — отметьте все шаблоны, где Вы будете прописывать теги. Сохраняем.

Далее создаем чанк [[$cloud]] с шаблоном и вызовом сниппета [[tagLister]].

 
<div class="cloud">
    <h2>Облако тегов</h2>
    <ul class="tagcloud">
        [[tagLister?
            &parent=`0`
            &sortBy=`tag`
            &target=`32`
            &limit=`50`
        ]]
    </ul>
</div>
 

Чанк Вы можете назвать, как угодно, главное Вам понятно было. Разберем вызов сниппета:

• [[tagLister?]] — Кэшируемый вызов сниппета.

• &parent=`0` — ID родительского ресурса, в данном случае отбор по всем документам.

• &sortBy=`tag` — Сортировка по тегам (в алфавитном порядке), по умолчанию `count` — по количеству.

• &target=`32` — ID ресурса с вызовом сниппета getResourcesTag, страница результатов запроса. У Вас скорее всего будет будет другая.

• &limit=`50` — Количество выводимых тегов, по умолчанию `10`.

• &tv=`myTvName` — Добавить в том случае, если вы назвали (TV) с тегами по своему. По умолчанию `tags`.

Теперь добавьте теги к статьям и поместите вызов созданного чанка в то место, где у Вас будет облако тегов. Должно получиться, что-то вроде этого:

Если посмотреть исходный код, то увидим что tagLister использует список. Поэтому вызов сниппета в шаблоне мы поместили в теги. Откройте в своем браузере исходный код страницы и обратите внимания на class.

  
class="tl-tag tl-tag-weight5"
class="tl-tag tl-tag-alt tl-tag-weight1"
 

Классы присваиваются каждому тегу. Через строчку списка добавляется дополнительный класс: «tl-tag-alt» — альтернативная строчка. Мы не будем разбирать, что с ним можно сделать, ясно-понятно, что для придания строчки дополнительных стилей CSS. Лишние классы CSS чуть ниже мы удалим. Самое интересное для нас это класс: «tl-tag-weght1», «tl-tag-weght2», «tl-tag-weght3», «tl-tag-weght4», «tl-tag-weght5». С помощью них наши теги будут различаться. Чем чаще используется тег, тем больше он будет выглядеть в облаке. Только есть одно НО! Нас не устраивает, что теги показываются в столбик. Они должны выглядеть, как у на сайтах, где ранее видели или встречались облака тегов, построчно и без подсчёта количества. Мы нашли несколько вариантов, как можно добиться желаемого. Рассмотрим каждый из них.

Как не надо делать! Убрать подсчет тегов и расположить построчно.

По адресу: ваш_сайт /core /components /taglister /elements /shunks /tag.shunk.tpl находится шаблон такого содержания:

  
<li class="[[+cls]]"><a href="[[+url]]">[[+tag]]</a> ([[+count]])</li>
  

Плейсхолдер ([[+count]]), как раз и отвечает за вывод (подсчета тегов). Удалите его и «вуаля», цифры пропадут. Теги заменяем на , и мы добились того чего желали. Только при обновлении сниппета tagLister шаблон может перезаписаться в свое исходное состояние. Поэтому пойдем другим путем.

Как надо делать! Убрать подсчет тегов и расположить построчно.

Чтобы не боятся обновлений, выносим этот шаблон в отдельный чанк и назовем его: tag_user. Код чанка:

 
<span class="[[+cls]]"><a href="[[+url]]">[[+tag]]</a></span>
 

Как видите мы заменили теги, cохраняем. Теперь подключаем вновь созданный чанк, для этого переходим в чанк cloud. И внесем небольшие изменения.

 
<div class="cloud">
    <h2>Облако тегов
        <p class="tagcloud">
     [[!tagLister? &parent=`0` &sortBy=`tag` &target=`32` &limit=`50` &tpl=`tag_user` &altCls=``]]
        </p>
</div>
 

Мы добавили два атрибута и изменили теги. Рассмотрим добавленные параметры:

• &tpl=`tag_user` — Подключил созданный нами чанк `tag_user`, по умолчанию `tag`.

• &altCls=`` — Отключил класс CSS, по умолчанию `tl-tag-alt`. Помните, эта та, альтернативная строчка.

Теперь на каждый тег осталось по два класса CSS, это «tl-tag» — общий стиль и «tl-tag-weght» — с соответствующими цифрами от 1 до 5, всего пять классов. Все параметры в чанке cloud, можно внести непосредственно в параметрах сниппета tagLister. Для этого нужно перейти на вкладку элементы/tagLister/параметры/. Не рекомендуется изменять параметры по умолчанию, т.к. при обновлении могут перезаписаться в исходный вид. Для изменения перейти на вкладку «Добавить набор параметров». После редактирования кликать «Сохранить набор параметров». После сохранения не забудьте экспортировать пользовательский набор параметров и положить скрипт в надежное место. Наше облако тегов сейчас выглядит так:

Подключаем стили CSS:

 
.tagcloud .tl-tag {
    line-height:normal;
}

.tagcloud .tl-tag a {
    color:#777777;
    padding:2px;
    background-color:#F9F9F9;
    text-decoration:none;
}

.tagcloud .tl-tag a:hover {
    background:#B8F2F5;
    color:#000000;
}

.tagcloud .tl-tag-weight5 {font-size:1.7em;}
.tagcloud .tl-tag-weight4 {font-size:1.5em;}
.tagcloud .tl-tag-weight3 {font-size:1.3em;}
.tagcloud .tl-tag-weight2 {font-size:1.1em;}
.tagcloud .tl-tag-weight1 {font-size:0.9em;}
  

Вот примерный вариант стилей, под свой сайт подберете сами. Смотрим что получилось.

Дальше нам нужно создать страницу на которой будут показаны результаты при переходе по тегу. Для таких страниц у нас есть специальная папка. Создаем новую страницу с названием: «Результат по запросу:». Указываем для нее подходящий шаблон и отмечаем поля: «Не показывать в меню» и «Опубликован». Во вкладке «Настройки» убираем отметку с «Использовать HTML-редактор», «Кэшируемый». Сохраняем и обновляем страницу. Далее «ID» созданной страницы нужно указать в параметре &target=`` в чанке cloud.

В разделе: «Содержимое ресурса» созданной страницы помещаем вызов сниппета [[getResourcesTag]].

  
[[!getResourcesTag?
    &parents=`0`
    &tpl=`tag_result`
    &toPlaceholder=`results`
    &showHidden=`1`
    &limit=`50`
    &hideContainers=`true`
]]
<h2>Результаты по запросу:</h2>
<ul>
[[!+results]]
</ul>
 

Давайте разберем использованные параметры.

• [[!getResourcesTag?]] — Не кэшируемый вызов сниппета.

• &parents=`0` — Поиск по всему сайту, по умолчанию `текущий ресурс`.

• &tpl=`tag_result` — Подключаем чанк с шаблоном вывода результата, чуть ниже мы его создадим.

• &toPlaceholder=`result` — Назначаем плейсхолдер [[+results]], куда будут выводится результаты.

• &showHidden=`1` — Показывать ресурсы скрытые от меню, по умолчанию `0`.

• &limit=`50` — Ограничить количество показываемых ресурсов на странице, по умолчанию `5`.

• &hideContainers=`true` — Не показывать ресурсы-контейнеры, по умолчанию `0`

Результаты запроса будут выводится маркированным списком. Каждую строку формировать будет чанк tag_result. Код чанка tag_result:

  
<li><a href="[[~[[+id]]]]"><strong>[[+pagetitle]]</strong></a></li>
 

Полную документацию по сниппету можно посмотреть здесь.