MODx Украина » Красивое облако тегов

Красивое облако тегов под MODx

 

Я расскажу как сделать такое красивое облако тегов как на моем сайте. Объясню подробности. Необходимо подключить два файла(один флеш, другой javascript), настроить работу тегов на сайте, создать чанк для вызова облака и разумеется вставить вызов этого чанка. Сама эта система была разработана как плагин для WordPress, но наши ребята сделали так чтоб можно было использовать отдельно. А сам плагин написал Roy Tanck, называется - WP-Cumulus. А я прикрутил эту систему к Модх. Ну что ж начнем.


План

  1. Настраиваем работу тегов на сайте.
  2. Подключаем два файла
  3. Создаем сниппет для облака
  4. Создаем чанк для работы облака
  5. Вызываем чанк в нужном месте шаблона.
  6. Настройка.

1) Настраиваем работу тегов на сайте.


Чтобы теги работали, надо сначала придумать куда их записывать. Создадим TV-параметр - tags.

Поставим название и описание - Теги для документа. 

Тип ввода - Text.

Ниже выберете шаблоны для которых должны работать теги.

Дальше создадим страничку для вывода документов по нужному тегу. Создаете документ в корне сайта.

Там должен быть специальный вызов Ditto.

[!Ditto? &parents=`0` &depth=`5` &tpl=`ditto_news` &sortBy=`createdon` &tagData=`tags` &tagDelimiter=`, ` &dateFormat=`%d.%m.%Y` &truncText=`далее...`!]
 

Немного поясню.

tpl шаблон Ditto
tagData  TV для тегов
tagDelimiter разделить между тегами, т.е. чем вы разделяете теги
depth

глубина просмотра, т.е. сколько уровней вложенности будет просмотрено в поисках.

 

Название странички по желанию, а псевдоним поставьте обязательно - tags (потом поясню почему)

2) Подключаем два файла

  1. Скачайте файл swfobject.js
  2. Скачайте файл 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"); - Определяет цвет тегов в облаке.

 

С остальными параметрами не разбирался и не знаю что они обозначают.
 

Настройка вывода информации, т.е. тегов.

 

[[TvTagCloud? &parent=`1` &landing=`22` &tvTags=`tags` &showCount=`1`]]

Снова объясню параметры:

&parent ИД документа в котором находятся статьи с тегами (к сожалению перечисление нескольких родительских документов не работает)
&landing

ИД страницы с выводом статей по заданному тегу (как раз та страница с вызовом Ditto, что обсуждалась в шаге 1), но так как у меня эта система не работала, пришлось вручную вбить tags.php и поэтому сниппет привязан к этому пути.

&tvTags имя доп. параметра, содержащего теги
&showCount включить/выключить отображение количества статей рядом с тегом


 

Источники информации:

w-blog.rumodx.ru


   

Понравилась статья?

Тогда подпишитесь на:

  1. RSS-ленту
  2. Email рассылку
  3. Twitter ленту
  4. Facebook ленту или нашу Facebook страницу!

Также вас могут заинтересовать:


Комментариев
Комментарии работают на Disqus

Поиск по сайту

Подпишитесь на обновления

Что такое RSS?

Подписка на RSS ленту

Введите email адрес:


MODx

 
Описание Сниппеты
Установка - Jot
Настройка - Ditto
  - Wayfinder
  - eForm
   

Последние публикации

Facebook

Анонсы последних статей

Друзья сайта

Система Orphus
SliceFactory Extension Factory