Красивое облако тегов под MODx
Я расскажу как сделать такое красивое облако тегов как на моем сайте. Объясню подробности. Необходимо подключить два файла(один флеш, другой javascript), настроить работу тегов на сайте, создать чанк для вызова облака и разумеется вставить вызов этого чанка. Сама эта система была разработана как плагин для WordPress, но наши ребята сделали так чтоб можно было использовать отдельно. А сам плагин написал Roy Tanck, называется - WP-Cumulus. А я прикрутил эту систему к Модх. Ну что ж начнем.
План
- Настраиваем работу тегов на сайте.
- Подключаем два файла
- Создаем сниппет для облака
- Создаем чанк для работы облака
- Вызываем чанк в нужном месте шаблона.
- Настройка.
1) Настраиваем работу тегов на сайте.
Чтобы теги работали, надо сначала придумать куда их записывать. Создадим TV-параметр - tags.
Поставим название и описание - Теги для документа.
Тип ввода - Text.
Ниже выберете шаблоны для которых должны работать теги.
Дальше создадим страничку для вывода документов по нужному тегу. Создаете документ в корне сайта.
Там должен быть специальный вызов Ditto.
Немного поясню.
| tpl | шаблон Ditto |
| tagData | TV для тегов |
| tagDelimiter | разделить между тегами, т.е. чем вы разделяете теги |
| depth |
глубина просмотра, т.е. сколько уровней вложенности будет просмотрено в поисках. |
Название странички по желанию, а псевдоним поставьте обязательно - tags (потом поясню почему)
2) Подключаем два файла
- Скачайте файл swfobject.js
- Скачайте файл tagcloud.swf
Положите эти два файла в /assets/files/
В <head> шаблона впишите:
<script type="text/javascript" src="/assets/files/swfobject.js"></script>
3) Создаем сниппет для облака
Название: TvTagCloud
Содержание:TvTagCloud.txt
Примечание: Данный сниппет завязан на то что страница из п.1 с вызовом Ditto имеет псевдоним tags.php, если вам нужно другое, то на 137 строке это меняется.
4) Создаем чанк для работы облака
Название: tags_cloud
Содержание: Chank.txt
5) Вызываем чанк в нужном месте шаблона.
Пишем вызов чанка {{tags_cloud}} там где нам нужно облако.
6) Настройка.
Настройка этого облака делается в чанке который мы создали.
Настройка внешнего вида.
var widget_so = new SWFObject("/assets/files/tagcloud.swf?r="+rnumber, "tagcloudflash", "230", "140", "9", "#ffffff"); - Основные параметры облака, "/assets/files/tagcloud.swf" – путь к флеш файлу, "230" – ширина, "140" – высота, "9" – не знаю за что отвечает эта цифра, "#ffffff" – цвет фона облака;
widget_so.addVariable("tspeed", "115"); - Определяет скорость вращения облака, менять надо только цифру 115;
widget_so.addVariable("distr", "true"); - Если true заменить на false, облако примет немного другой вид;
widget_so.addVariable("tagcloud", "здесь вызов TvTagCloud"); - Здесь данные которые генерит наш сниппет передаются через скрипт флеш файлу.
widget_so.write("tags"); - Указываем ID слоя в котором будет располагаться наше облако тегов, в нашем случае это tags.
widget_so.addVariable("tcolor", "0x333333"); - Определяет цвет тегов в облаке.
С остальными параметрами не разбирался и не знаю что они обозначают.
Настройка вывода информации, т.е. тегов.
Снова объясню параметры:
| &parent | ИД документа в котором находятся статьи с тегами (к сожалению перечисление нескольких родительских документов не работает) |
| &landing |
ИД страницы с выводом статей по заданному тегу (как раз та страница с вызовом Ditto, что обсуждалась в шаге 1), но так как у меня эта система не работала, пришлось вручную вбить tags.php и поэтому сниппет привязан к этому пути. |
| &tvTags | имя доп. параметра, содержащего теги |
| &showCount | включить/выключить отображение количества статей рядом с тегом |
Источники информации:
Понравилась статья?
Тогда подпишитесь на:
|
|
Также вас могут заинтересовать:
Комментариев
Комментарии работают на Disqus
