Объемное облако тегов Cumulus для HostCMS

18 июля 2011 года

Сегодня я расскажу вам, как «прикрутить» облако тегов Cumulus к HostCMS.

Этот способ был изначально опубликован мною на форуме HostCMS осенью 2009 года. С тех пор он претерпел ряд изменений и улучшений, отраженных на страницах этой темы.

Здесь же я буду держать всегда самую последнюю версию этого способа, учитывающую все изменения.

Прежде всего, хочу сказать что разместить на страницах своего сайта это симпатичное облачко очень просто!

Для этого нам потребуются следующие компоненты:

  • Само облако тегов, в виде swf-файла;
  • Плагин swfobject для jQuery;
  • И немного уличной магии на php и xsl.

Облака и плагин вы можете скачать в архиве, который приложен к этой статье (ссылка на него — в конце статьи).

Подготовительные работы крайне просты — в корневой папке HostCMS мы создадим папку cumulus, в которую и положим swf-файл с облаком и js-файл и jQuery-плагином.

Ну и, разумеется, если у вас в макете не подключена js-библиотека jQuery, то ее необходимо подключить.

Теперь займемся интеграцией.

Сначала создадим новый xsl-шаблон. Дадим ему название «УниверсальноеОблакоТэговCumulus» и скопируем в него следующий код:


<?xml version="1.0" encoding="UTF-8"?	
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="UTF-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>

	<!-- УниверсальноеОблакоТэговCumulus  -->

	<xsl:template match="/">
		<xsl:choose>
			<xsl:when test="/document/InformationSystem/tags/node()">
				<xsl:apply-templates select="/document/InformationSystem/tags"/>
			</xsl:when>
			<xsl:when test="/shop/tags/node()">
				<xsl:apply-templates select="/shop/tags"/>
			</xsl:when>
		</xsl:choose>
	</xsl:template>

	<xsl:template match="tags">

		<!--Зададим минимальный и максимальный размер шрифта-->
		<xsl:variable name="max_size" select="24"/>
		<xsl:variable name="min_size" select="9"/>

		<!--Определим количество элементов для наиболее распространенной метки-->
		<xsl:variable name="tag_count" select="tag/count"/>
		<xsl:variable name="max_tag_count" select="($tag_count[not(. < $tag_count)])[1] - 1"/>

		<!--Вычислим коэффициент размерности шрифта для меток с различным количеством элементов-->
		<xsl:variable name="coeff_size">
			<xsl:choose>
				<xsl:when test="$max_tag_count > 0">
					<xsl:value-of select="($max_size - $min_size) div $max_tag_count"/>
				</xsl:when>
				<xsl:otherwise>0</xsl:otherwise>
			</xsl:choose>
		</xsl:variable>

		<xsl:variable name="domain">
			<xsl:choose>
				<xsl:when test="/document/current_alias/node()">
					<xsl:value-of select="/document/current_alias"/>
				</xsl:when>
				<xsl:when test="/shop/current_alias/node()">
					<xsl:value-of select="/shop/current_alias"/>
				</xsl:when>
			</xsl:choose>
		</xsl:variable>

		<xsl:variable name="cloud_content">
			<xsl:apply-templates select="tag">
				<xsl:with-param name="min_size" select="$min_size"/>
				<xsl:with-param name="total" select="sum(tag/count)"/>
				<xsl:with-param name="coeff_size" select="$coeff_size"/>
				<xsl:with-param name="domain" select="$domain"/>
			</xsl:apply-templates>
		</xsl:variable>

		<h2>Метки</h2>

		<!--Подключим библиотеку-загрузчик Flash-->
		<script type="text/javascript" src="/cumulus/jquery.swfobject.1-1-1.js"></script>

		<!--Создадим контейнер для Flash-облака.
		ОБРАТИТЕ ВНИМАНИЕ! Если на странице несколько облаков, то id у их контейнеров должен быть разным!-->
		<div id="smallcloudflashcontent">
			<!--Выведем сюда классическое облако тегов, для тех у кого отключен Flash или Javascript-->
			<div class="TagsCloud">
				<xsl:value-of disable-output-escaping="yes" select="$cloud_content"/>
			</div>
		</div>

		<!--Подключим Flash-облако с помощью библиотеки SWFObject-->
		<script type="text/javascript">
			<xsl:text disable-output-escaping="yes"><!-- </xsl:text>var tags_list = \'<tags><xsl:value-of disable-output-escaping="yes" select="$cloud_content"/></tags>\';                            
        
			$(\'#smallcloudflashcontent\').flash(
				{ 
				swf: \'/cumulus/tagcloud.swf\',
				width: 190,
				height: 190,
	            wmode: \'transparent\',			
				allowScriptAccess: \'always\',
	            allowFullScreen: false,
				flashvars: { 
				tcolor: \'0x333333\',			
				mode: \'tags\', 
				distr: \'true\', 
				tspeed: \'100\', 
				tagcloud: tags_list
				}
			},
				{ version: 8 }
			);

			<xsl:text disable-output-escaping="yes">--></xsl:text>
		</script>
	</xsl:template>

	<!-- Облако из групп -->
	<xsl:template match="tags/tag">
		<xsl:param name="min_size"/>
		<xsl:param name="total"/>
		<xsl:param name="coeff_size" select="10"/>
		<xsl:param name="domain" select=""/>

		<xsl:variable name="tag_url">
			<xsl:choose>
				<xsl:when test="path/node()">
					<xsl:value-of select="parent::*/parent::*/path"/>
				</xsl:when>
				<xsl:otherwise>
					<xsl:value-of select="parent::*/parent::*/url"/>
				</xsl:otherwise>
			</xsl:choose>
		</xsl:variable>

		<xsl:variable name="size" select="round($min_size + ((count - 1) * $coeff_size))"/>

		<xsl:text disable-output-escaping="yes"><</xsl:text>a href="http://<xsl:value-of select="$domain"/><xsl:value-of select="$tag_url"/>tag/<xsl:value-of select="tag_path_name"/>/" style="font-size: <xsl:value-of select="$size"/>pt"<xsl:text disable-output-escaping="yes">></xsl:text><xsl:value-of select="tag_name"/><xsl:text disable-output-escaping="yes"><</xsl:text>/a<xsl:text disable-output-escaping="yes">></xsl:text><xsl:text> </xsl:text></xsl:template>
</xsl:stylesheet>

Нажмем на копку «Применить».

Xsl-шаблон у нас готов, и он одинаково хорошо подходит как для вывода облака тегов инфосистемы, так и для вывода облака тегов магазина.

Кроме того. шаблон построен таким образом, что если у пользователя отключен javascript, или произошла какая-то ошибка при загрузке js-файлов, то у него в браузере отобразиться обычное облако тегов в виде html-ссылок. Этоже облако в виде ссылок будет видно и роботам поисковых систем — flash-облако красиво, но для них не понятно, потому показываться оно будет только живым людям.

Теперь нам нужно найти место в коде шаблона страницы, или в коде макета сайта, где должно будется выводиться наше облако тегов.

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

Для инфосистемы он будет таким:


<?php
/* Отображаем тэги ИС */

// автоматическое определение id текущей инфосистемы из настроек структуры
// для шаблона главной страницы нужно вбить id вручную, 
// заменив следующую строку, например, на $InformationSystemId = 1;
$InformationSystemId = to_int($GLOBALS[\'LA\'][\'InformationSystemID\']);

$xsl_name = \'УниверсальноеОблакоТэговCumulus\';

// Определим текущий домен сайта, для передачи его в XML
$site = &singleton(\'site\');
$alias_row = $site->GetAlias($_SERVER[\'HTTP_HOST\']);
$current_alias = $site->GetCurrentAlias($alias_row[\'site_id\']);

$property = array();

$external_propertys = array();

// Передадим текущий домен сайта в XML
$external_propertys[\'current_alias\'] = $current_alias;

$InformationSystem = &singleton(\'InformationSystem\');
$InformationSystem->ShowTagsCloud($InformationSystemId, $xsl_name, $property, $external_propertys);
?>

А для интернет-магазина — таким:


<?php
/* Отображаем тэги Магазина */

// автоматическое определение id текущего магазина из настроек структуры
// можно вбить id вручную, заменив следующую строку, например, на $shop_id = 1;
$shop_id = to_int($GLOBALS[\'LA\'][\'shop_id\']);

$xsl_name = \'УниверсальноеОблакоТэговCumulus\';

// Определим текущий домен сайта, для передачи его в XML
$site = &singleton(\'site\');
$alias_row = $site->GetAlias($_SERVER[\'HTTP_HOST\']);
$current_alias = $site->GetCurrentAlias($alias_row[\'site_id\']);

$property = array();

$external_propertys = array();

// Передадим текущий домен сайта в XML
$external_propertys[\'current_alias\'] = $current_alias;

$shop = &singleton(\'shop\');
$shop->ShowTagsCloud($shop_id, $xsl_name, $property, $external_propertys);
?>

Сохраняем наш шаблон (или макет), обновляем в браузере страничку сайта и любуемся на наше красивое облако!

В приложенном к статье архиве, вы можете найти swf-файл с облаком, плагин swfobject для jQuery, xsl-шаблон и фрагменты php-кода для вставки в макет.