Сниппета tagLister

Опубликовано: 03 Ноя 2014

Выводить облако тегов мы будем с помощью сниппета 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 чуть ниже я удалю. Самое интересное для нас это класс: «tl-tag-weght1», «tl-tag-weght2», «tl-tag-weght3», «tl-tag-weght4», «tl-tag-weght5». С помощью них наши теги будут различаться. Чем чаще используется тег, тем больше он будет выглядеть в облаке. Только есть одно НО! Меня не устраивает, что теги показываются в столбик. Они должны выглядеть, построчно и без подсчёта количества. Я нашла несколько вариантов как можно добиться желаемого. Рассмотрим каждый из них.

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

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

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

2. Убрать подсчет тегов и расположить построчно, хороший вариант.

Чтобы не боятся обновлений, выносим этот шаблон в отдельный чанк, назовем его: 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` — Назначаем плейсхолдер , куда будут выводится результаты.
&showHidden=`1` — Показывать ресурсы скрытые от меню, по умолчанию `0`.
&limit=`50` — Ограничить количество показываемых ресурсов на странице, по умолчанию `5`.
&hideContainers=`true` — Не показывать ресурсы-контейнеры, по умолчанию `0`

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

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

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


Оставить комментарий




Разрешённые теги: <b><i><br>Добавить новый комментарий: