maxidebox@list.ru | +7 (929) 701 21 71
Облако тегов в MODX revolution

Облако тегов в MODX revolution

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

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

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

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

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

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

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

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

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

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

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

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

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

	
<div class="cloud">
    <h2>Облако тегов</h2>
    <ul class="tagcloud">
        
    </ul>
</div>
	

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

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

  • &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=""><a href=""></a> ()</li>
	

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

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

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

	
<span class=""><a href=""></a></span>
	

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

	
<div class="cloud">
    <h2>Облако тегов
        <p class="tagcloud">
     
        </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.

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

	

<h2>Результаты по запросу:</h2>
<ul>
  
</ul>
	

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

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

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

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

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

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

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

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

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

	
<li><a href=""><strong></strong></a></li>
	

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

Голосов: 6 | Просмотров: 110