Обновлено: 03 октября 2014, 16:58
 Marabar

Реализуем вывод облака тегов в MODX revolution

Сегодня я расскажу, как можно вывести «Облако тегов» в MODX revolution.
И создадим страницу для вывода результатов, при обращении к тегу, или метке, кому как больше нравится. Выводить облако тегов мы будем с помощью сниппета 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>
Как видите я заменил теги . Сохраняем. Теперь подключаем вновь созданный чанк, для этого переходим в чанк cloud. И внесем маленькие изменения.
<div class="cloud">
    <h2>Облако тегов</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&gt</a></li>
Я не ставил задачу с красочной страницей. Поэтому все просто. Полную документацию по сниппету можно посмотреть здесь.

На этом все, надеюсь пост был полезен. Буду рад на ваши отклики.
   Marabar Инструкции 0    6 +1

Комментарии ()

  1. adminsha 13 мая 2013, 13:03 # 0
    Спасибо за статью! Помогла!
    1. Marabar 13 мая 2013, 18:24 # 0
      На здоровье. Админша? Здорово!
      1. adminsha 15 мая 2013, 10:22 # 0
        Это рабочий логин :)
    2. Alexandr 01 сентября 2013, 12:11 # 0
      Подскажите пожалуйста как решить такую проблему:Сделал TV для тегов. Тип ввода «Список(множественный выбор)». Назначил возможные значения «tag1||tag2».В параметрах вывода: тип вывода «Разделитель», разделитель ",".Сейчас в метаданных поста теги выводятся правильно
      [[!tolinks? &items=`[[+tv.tags]]` &keyTag=`tag` &target=`1`]]`]]
      Если тегов у поста несколько то выводится через запятую, и ссылки тоже работают правильно.Но в облаке тегов, если есть посты с несколькими тегами, множественные теги выводятся так: «tag1||tag2».Как это исправить?
      1. Marabar 01 сентября 2013, 19:15 # 0
        Трудно вот так что-то сказать существенное. Могу предположить следующее: Возможные значения в параметрах ввода записываются таким образом элемент==значение||элемент==значение||элемент==значение
      2. s-teplov 04 декабря 2013, 14:22 # 0
        Вопрос на засыпку. Как на странице вывода по тегу указать, по какому именно тегу выводится информация?
        1. Marabar 29 декабря 2013, 17:25 # 0
          Странно, только сегодня заметил ваш вопрос. Если актуально, вот решение:

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

          [[!getUrlParam? &name=`tag`]]

          На этом всё))

          1. Vitaly Trakhtenberg 05 марта 2016, 15:27 # 0
            Нет, все же не всё ))
            Сначала попробовал посмотреть в документации rtfm.modx.com/extras/revo/geturlparam — но ничего не нашел :(
            Проблема в обрезании передаваемого параметра. То есть на странице результата я хочу показать, по какому тэгу этот список.
            URL страницы результата
            [тут_был_домен]/home/rezultat-po-zaprosu.html?tag=рекламные+акции&key=tags
            Результат на странице
            рекламные �
            Код на странице
            <h2>[[!getUrlParam? &name=`tag`]]</h2>
            Другие двухсловные тэги обрезает второе слово.

            В чем причина? И как лечить?
            1. Aleksey Nazarov 31 мая 2016, 04:34 # +1
              Мне помог параметр max. В документации написано, что по умолчанию значение равно 20 символам, но по факту оказалось 10, все что свыше обрезалось.

              [[!getUrlParam? &name=`tag` &max=`60`]]
        2. Дмитрий 24 марта 2015, 18:15 # 0
          Здравствуйте! Подскажите пожалуйста, как реализовать вывод результатов на той же странице, в элементе, типа .collapse (в bootstrap)?
          Такой код дает секундное мигание, и переход к началу страницы… Можно ли обозначить якорь и зафиксировать результат?

          <div class="row">
                      <div class="col-sm-12">
                          <div class="block" data-toggle="collapse" data-target="#demo">
                              [[$cloud]]
                          </div>
              
              
                          <div id="demo" class="collapsing">
          [[!getResourcesTag?
              &parents=`0`
              &tpl=`tag_result`
              &toPlaceholder=`results`
              &showHidden=`1`
              &limit=`50`
              &includeContent=`1`
              &hideContainers=`1`
             
          ]]
          
          <h2>Результаты по запросу:</h2>
              <ul>
                [[!+results]]
              </ul>
          		
          
                         </div>
                      </div>
                  </div>
          Спасибо!
          1. Marabar 24 марта 2015, 18:26 # 0
            А если в чанк tag_user добавить якорь?
            <span class="[[+cls]]"><a href="[[+url]]#demo">[[+tag]]</a></span>
            
            1. Дмитрий 24 марта 2015, 19:20 # 0
              О, вот как это делается!) Я на Revo второй день, логика начинает проясняться..) Спасибо! Осталаст проблемма с миганием: при collapse.in — вываливает сразу все, при collapsing — на секунду мигает… Есть ли в рево какие-то решения, подскажите)
              1. Marabar 24 марта 2015, 19:32 # 0
                Немного не понял про мигание. Я отключаюсь, буду только 26-го.
                1. Дмитрий 24 марта 2015, 19:34 # 0
                  Спасибо, Вы очень помогли на текущем этапе!
          2. Polygran Polygran 22 июня 2016, 18:31 # 0
            Как решить проблему с буквой (Ё) во время сортировки по аляовиту? она ир перед А, то после Я?))
            1. biper 17 мая 2018, 11:40 # 0
              а если то же самое на pdotools?
              меняю вызов, не работает:

              
              [[!pdoResources?
                  &parents=`8`
                  &tpl=`tag_result`
                  &toPlaceholder=`results`
                  &showHidden=`1`
                  &limit=`50`
                  &hideContainers=`true`  
              ]]
              
              <h2>Результаты по запросу:</h2>
                  <ul>
                    [[!+results]]
                  </ul>
                    [[!+page.nav]]
              
              1. Marabar 17 мая 2018, 12:22 # 0
                Может надо указать TV с тегами в параметре?
                &includeTVs = ``
                



              Вы должны авторизоваться , чтобы оставлять комментарии.

              Marabar 21 сентября 2018, 00:32
              Login в MODX revolution 25
              Marabar 17 мая 2018, 12:22
              Выводим облако тегов в MODX revo 17
              medortex 14 июля 2017, 16:26
              Меню Аккордеон в MODX revo 54
              Madao 16 мая 2017, 18:28
              msMiniCartDynamic 3
              Семён 05 мая 2017, 23:30
              Создание ресурсов из фронтенда 41
              Филитович Владимир 26 февраля 2017, 22:25
              Apache 2.2.22, установка и настройка 41
              valery 30 ноября 2016, 15:51
              phpMyAdmin 3.5.1, установка и настройка 3