Модератор форума: Yuri_G |
Сообщество uCoz Модули uCoz Дополнительные функции Теги (Инструкция по применению) |
Теги |
Многие мечтали, многие пытались что-то сделать ручками и вот оно ... с последним обновлением системы uCoz нам выпала возможность реализовать данную функцию у себя на сайте без особых проблем.
Создание тегов – это процесс создания ключевых слов и связывания их с данными. Основная идея облака тегов заключается в отображении тегов в соответствии с их значением, их весом и частотой употребления по сравнению с другими тегами. Для этого используются такие элементы дизайна, как размер шрифта и цвет. Чем более важен какой-либо тег, тем большим размером шрифта и более ярким цветом он выделяется среди остальных тегов (по крайней мере, именно так должно быть). Облака тегов часто считают одним из традиционных элементов дизайна в Web 2.0. "Облака тегов" предлагают очень интересную модель навигации; и хотя эта техника иногда рассматривается как "альтернативная", ее не следует использовать в качестве замены традиционной навигационной модели, а лишь в качестве дополнительной возможности, предоставляющей посетителям возможность быстрее сориентироваться в структуре и содержимом сайта. Благодаря своей форме, напоминающей облака, дизайн тегов четко отделяет их от остальных элементов дизайна, размещенных на странице. Иными словами, можно рассматривать технологию тегов как независимую каталогизацию информации, которая связывает разные типы и виды информации, позволяет через теги находить связанные по смыслу (по тегам) документы. Согласен, идея прекрасная и действительно удобная и, видимо, появилась как попытка установления связей на сайтах с большим объемом разнородных документов. Есть даже термин для этого - Фолксономия
Итак приступим к созданию облака или списка тегов. Следует заметить, что не стоит создавать Облако, если у вас очень мало материалов с метками, т.к. это тогда будет бессмысленно. 1. Перед началом стоит активировать модуль "Поиск по сайту", т.к. ваши теги прямым образом будут связаны с этим модулем. 2. Постарайтесь как можно большему количеству материалов присвоить метки. Для этого в панельке управления материалом щелкните на значке "Теги материала", в появившемся AJAX-окне через запятую введите ключевые слова, относящиеся к данному материалу
Помните: чем больше у вас будет меток, тем эффектнее будет ваше облако! 3. Далее создаем информер (Панель управления ==> Инструменты ==> Информеры). Выбираем раздел информеров "Теги", а далее указываем настройки: способ вывода - Облако тегов или Список тегов (см. ниже различия), модули, для которых будет строиться облако тегов, имаксимальное количество тегов. 4. Нажимаем кнопку "Создать" и вставляем полученный код (например, $MYINF_1$) в нужный шаблон в нужное место. 5. Вот и все! Список тегов создан. По мере увеличения количества меток материалов будет изменяться картина этого списка.
Прикрепления:
6104946.jpg
(1.5 Kb)
·
6139393.jpg
(21.9 Kb)
·
8529558.jpg
(9.1 Kb)
·
0607483.jpg
(8.4 Kb)
Сообщение отредактировал SkyWalker - Пятница, 03 Апр 2009, 22:03:16
|
Делаем flash-облако тегов. Установка: 1. Создайте информер по образцу, написанному выше, и способ вывода выберите "Облако тегов" 2. Скачайте архив:
4. Затем, в том месте, где будет flash-облако тегов, вставьте код: Code <?if($USER_AGENT$='ie' && $USER_AGENT_VER$<7)?> $MYINF_4$ <?else?> <div id="yoblako" align="center">$MYINF_4$</div> <script type="text/javascript" src="ссылка_на_файл_swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; flashvars.mode = 'tags'; flashvars.minFontSize = '8'; flashvars.maxFontSize = '14'; flashvars.tcolor = '0x1D3D61'; flashvars.tcolor2 = '0x4D6D91'; flashvars.hicolor = '0xd193978'; flashvars.distr = 'true'; flashvars.tspeed = '100'; eTagz = document.getElementById('yoblako').getElementsByTagName('A'); flashvars.tagcloud = '<tags>'; for (var i=0; eTagz[i]; ++i) flashvars.tagcloud += '<a href=\'' + eTagz[i].getAttribute('href') + '\' style=\'' + parseInt(eTagz[i].style.fontSize) + '\'>' + eTagz[i].innerHTML.replace(/&/i, '%26') + '</a>'; delete eTagz; flashvars.tagcloud += '</tags>'; var params = {}; params.wmode = 'transparent'; params.bgcolor = '#FFFFFF'; params.allowscriptaccess = 'always'; var attributes = {}; attributes.id = 'yoblako'; attributes.name = 'tagcloud'; swfobject.embedSWF('ссылка_на_файл_tagcloud.swf', 'yoblako', '250', '200', '9.0.0', false, flashvars, params, attributes); </script> <?endif?> Пояснения: Применяя условный оператор для $USER_AGENT$='ie' && $USER_AGENT_VER$<7 - запрещаем выводить flash-облако для версии IE ниже 7 (для этих пользователей будет отображаться обычное текстовое облако) id="yoblako" - это идентификатор контейнера с облаком, в который будет помещён флеш-объект. Для идентификатора можно задать стили в CSS В таблицу стилей (CSS) добавьте параметр: #yoblako{outline:0;} Параметр запрещает отображение пунктирной рамки вокруг всего flash-объекта при нажатии на него. Можно выровнять контейнер по центру, добавляя align="center" внутрь тега div. $MYINF_4$ - это код Вашего информера, соответствующего облаку тегов юКоза, измените цифру, если необходимо. (В настройках информера "Теги" укажите число выводимых тегов: 50. Проверьте, что способ вывода установлен на "Облако тегов" ) В строках Quote <script type="text/javascript" src="ссылка_на_файл_swfobject.js"></script> ... swfobject.embedSWF('ссылка_на_файл_tagcloud.swf', 'yoblako', '250', '200', '9.0.0', false, flashvars, params, attributes); Настройка: В строке: Quote swfobject.embedSWF('ссылка_на_файл_tagcloud.swf', 'yoblako', '250', '200', '9.0.0', false, flashvars, params, attributes); *flashvars.minFontSize = "8"; - минимальный размер шрифта. *flashvars.maxFontSize = "14"; - максимальный размер шрифта. *flashvars.tcolor = "0xffffff"; - цвет самого редкого ярлыка. *flashvars.tcolor2 = "0x0be4f8"; - цвет самого популярного ярлыка. Для остальных ярлыков будет выбран цвет между этими двумя. *flashvars.hicolor = "0xd95800"; - цвет текста при наведении курсора на ярлык. *flashvars.tspeed = "100"; - скорость вращения Flash-Облака тегов *params.wmode = "transparent"; - этот параметр обозначает прозрачный фон. *params.bgcolor = "#333333"; - цвет фона Flash-Облака тегов. Дополнения: Если требуется поддержка символов расширенной латиницы (например, символов ĀāČčĒēĢģĪīĶķĻļŅņŠšŪūŽž), то скачивать и устанавливать этот архив Была решена проблема с символов & при помощи замены его используя аналог обозначения & в 16-ричной системе %26. eTagz[i].innerHTML.replace(/&/i, '%26') Чтобы удалить битые теги (которые остались в облаке, но материалы с ними удалены): 1. Заходим на страницу любого пользователя, кроме тех, которые имеют материалы. (можно создать локального пользователя для этого дела, например, с именем MrProper) 2. Находим модер-панель и кнопку "Удаление записей пользователя" (вот такой значок - ) 3. Выбираем любой модуль, который может содержать теги (например, модуль Новости сайта). Ставим галочку. 4. Включаем мозг. Думаем. Есть ли материалы у этого пользователя в этом модуле. Если пользователь создан Вами, как "мистер Пропер", то он не добавлял материалы, значит и ничего не удалится. Можно смело удалять несуществующие материалы. 5. Вводим код проверки и жмём "удалить". - Это ещё более изящный метод тыка, придуманный разработчиками для очистки битых тегов, но он работает. - Будьте осторожны с этими манипуляциями: не удалите случайно материалы пользователей. - Перед чисткой убедитесь, что у пользователя нет материалов. - Время самостоятельного обновления информеров - 15 минут. Чтобы не ждать 15 минут, а обновить сразу же информер с тегами, делаем по методу webanet: 1. Надо пройти в Панель Управления сайтом >> Информеры - найти Ваш информер с тегами - нажать на значок гаечного ключа () - всплывет окно для редактирования. 2. Вы ничего не меняете, а просто жмёте сохранить. 3. Идете на страницу с облаком, перезагружаете её и не находите битых тегов. Как добавить логотип внутрь облака (это оптическая иллюзия, на самом деле, логотип сзади): Если поступить просто, то нужно всего лишь присвоить контейнеру стиль с фоновым изображением. Например для ячейки таблицы: Quote <td style="background: url('images/logobgoblako.png') center center no-repeat;padding:0px 0px 0px 0px;"> Код для вставки облака </td> Quote <div style="background: url('images/logobgoblako.png') center center no-repeat;padding:0px 0px 0px 0px;"> Код для вставки облака </div> Если поступить сложнее, то: В Таблице стилей (CSS) создать отдельный класс для контейнера облака. В случае с ячейкой таблицы: Quote td.backoblako { background-image: url('images/logobgoblako.png'); /* Путь к фоновому рисунку */ background-position: center center; /* Положение фона Синтаксис background-position: [проценты | значение] | [left | center | right] || [top | center | bottom] */ background-repeat: no-repeat; /* Отменяем повторение фона */ } images/logobgoblako.png - ссылка на логотип. На страницах сайта, там где вставляется код облака, для ячейки присваиваем класс backoblako Quote <td class="backoblako"> Код для вставки облака </td> Если требуется сделать объект на всю ширину (или высоту) ячейки таблицы. Поможет вот что: Code <table border="0" width="100%" cellpadding="0" cellspacing="0" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0"> Вопрос-ответ: В: Почему, когда я смотрю сайт в Internet Explorer 6, то мне вместо флеш-облака тегов показывается обычное? О: Так и должно быть. С помощью строки: Code <?if($USER_AGENT$='ie' && $USER_AGENT_VER$<7)?> $MYINF_4$ <?else?> В: Когда я щелкаю на один из тегов, в большинстве случаев страница отображается коряво, а именно: смещается куда-нибудь второй контейнер, как правило вниз. Место на котором раньше находился контейнер становится занято найденными краткими описаниями статей и т.д. О: Это связано с ограничением количества выводимых символов в результатах поиска. Например, иногда материал обрывается на полуслове или происходит прерывание таблицы (если материал добавлялся в виде таблицы), в результате вышестоящая (относящаяся к дизайну) таблица, преждевременно закрывается. Старайтесь вставлять материалы используя контейнеры <div>. Это у всех так,и это нельзя исправить. В: Все сделал, но флеш-облако не отображается. О: Посмотрите, прописаны ли теги к материалу, проверьте, чтобы теги материалов не содержали спецсимволы типа ', &, " . Также, посмотрите, не заблокировал ли Ваш фаерволл все флеш-объекты с сайта. О: Если облако сделано с помощью виджета 3D облака тегов , то между его вставкой и появлением на странице может пройти некоторое время. Пока облако не появится будет просто пустой блок. О: Если скриптовое облако вставлено на сайте, где используется конструктор, то есть не через дизайн, то облако может не отображаться из-за того, что могло произойти вложение блоков друг в друга. O: Возможно не отображение облака на сайтах, работающих через дизайн. Когда код скрипта вставлялся в глобальный блок средствами бб кодов. Javascript нужно вставлять исключительно в html! Панель бб кодов делает скрипт нерабочим. В: Я создал флеш-облако тегов, но там всего отображается 35 тегов, хотя прописано больше. О: Возможно, Вы использовали виджет 3D облако тегов, а там 35 - максимальное количество тегов. Для того, чтобы сделать больше, поставьте флеш-облако тегов согласно инструкции. В: Теги выводятся по умолчанию через /search/tag1... но дело в том, что директория /search сначала была запрещена в robots.txt, потом в файле я снял это ограничение. Но при выводе самого информера облака тегов все теги выводятся в noindex, что собственно мне и нужно убрать, чтобы ссылки на теги были открыты для Яндекса. О: Это сделано специально, т.к. открытие для поисковиков страниц с результатами поиска может привести к частичному выкидыванию сайта из индекса поисковиков. Подробнее в письме от Платона Щукина В: Где можно посмотреть обозначения цветов в 16-ричной системе? О: http://www.artlebedev.ru/tools/colors/ Цвет тегов нужно прописывать так: '0xцвет' , т. е. с одинарными верхними кавычками и через 0х , где 0 - цифра. В: Создал облако тегов. При добавлении новых тегов, они не появляются в облаке. О: Подождите. Время обновления информеров = 15 минут. Благодарности:
|
Делаем flash-облако ссылок Помимо флеш-облака тегов, можно сделать флеш-облако ссылок (Для тех, кто хочет добавить "как бы теги" для страниц) Информация будет браться из файла xml, в котором будут лежать любые ссылки с присвоенными стилями, размерами, цветами и т.д. Допустим, есть файл site.ru/papka/tagcloud.swf И он забирает информацию о ссылках и тегах из файла site.ru/papka/tagcloud.xml В этом файле указываются ссылки и их параметры в формате: Quote <a href="адрес страницы" class="tag-link-12" rel="tag" style="font-size: 18pt;" color="0xff0099" hicolor="0x000099">Я ссылка</a> href="адрес страницы" - страница, на которую Вы попадете при нажатии на ссылку "Я ссылка" class="tag-link-12" - класс для ссылки "Я ссылка" style="font-size: 18pt;" - размер ссылки "Я ссылка" color="0xff0099" - цвет ссылки "Я ссылка", где ff0099 - значение цвета в 16-ричной системе hicolor="0x000099" - цвет ссылки "Я ссылка", при наведении на нее, где 000099 - значение цвета в 16-ричной системе Я ссылка - Название ссылки, которая будет во флеш-облаке. Соответственно, можно вручную указать размер каждой ссылки. Чтобы применить это себе, создайте файл tagcloud.xml в блокноте по образцу: Code <tags> <a href="ссылка на любой объект" class="tag-link-31" rel="tag" style="font-size: 18pt;" color="0x0000AA" hicolor="0x0000FF">Я ссылка</a> </tags> На страницу добавлять так называемое флеш-облако ссылок, вводимых вручную, используя код: Quote <embed src="ссылка_на_файл_tagcloud.swf" play="true" loop="true" wmode="Opaque" quality="high" bgcolor="" align="" width="200" height="200"> height="200" - высота в пикселях Не забудьте ссылка_на_файл_tagcloud.swf изменить на свою ссылку. Прикрепления:
tagcloud.swf
(44.6 Kb)
|
Вопрос собственно не конкретно про теги, а скорей что при нажатий на этот тег потом. Я про сортировку, где можно отсортировать выводимые материалы? Например, в облаке тегов есть тег "новости" нажимаем- то что нашлось, но новость самая старая по дате вверху, надо сделать наоборот - вверху новые по дате.
|
SINOPTIK4895, нигде. системными средствами это не предусмотрено
|
|
Добрый день!
Вопрос такой. Я б хотел вывести тэги со "страницы материала и комментарии к нему", чтобы отображалось на странице "вид материала". Вот сайт http://lordaron.ucoz.ru/load/ Прикрепления:
1180937.jpg
(35.2 Kb)
·
5357638.jpg
(93.4 Kb)
Сообщение отредактировал Lordar - Пятница, 26 Апр 2013, 15:22:13
|
Lordar, аналогичные теги вставить невозможно, так как системный код $TAGS$, выводящий теги в виде материалов не работает
|
сАнЁк3398, вы можете удалить код выводящий теги $TAGS$ из шаблона
на поисковиках не скажется, так как теги закрыты от индексации и имеют поисковые урлы |
quelgun, только для фильтрации материалов. от поиска они закрыты вообще и являются поисковыми ссылками.
итого: на индексацию не влияют |
Можно ли визуально улучшить отображение $TAGS$, то есть в странице материала и комментариев к нему после новости теги отображаются просто списком через запятую. Возможно ли сделать что-то типа - маленькая иконка затем тег, запятая, потом опять иконка - тег и т.д., то есть чтобы перед каждым отображаемым тегом была иконка, и есть ли параметр указывающий сколько их там выводить можно максимум.
Если есть такой вариант, то где это можно задать |
Farid-Gorbushka,
Цитата (Farid-Gorbushka) Можно ли визуально улучшить отображение $TAGS$, то есть в странице материала и комментариев к нему после новости теги отображаются просто списком через запятую. Возможно ли сделать что-то типа - маленькая иконка затем тег, запятая, потом опять иконка - тег и т.д., то есть чтобы перед каждым отображаемым тегом была иконка Можно. Цитата (Farid-Gorbushka) и есть ли параметр указывающий сколько их там выводить можно максимум. Нет, такого параметра нет - сколько добавили, столько и выведет. Есть ограничение на кол-во добавляемых, посимвольное - max - 150 символов на все теги материала. Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 |
| |||