Реализация тегов в MODx Revo - tagLister

Сейчас мы с вами реализуем облако тегов, с помощью компонента “tagLister”. Для этого нам необходимо скачать и установить два дополнения:

• getResources (на основе него работает поиск по тегам)
• tagLister (собственно, сам компонент для реализации тегов)

Когда мы инсталлируем компоненты, нам нужно создать дополнительное поле “tags”, где будут содержаться наши теги:

• Имя – tags
• Подпись – Теги
• Описание – (можно не запонять)
• Категория – элементы страниц
• Параметры ввода – авто-метка
• Параметры вывода – по умолчанию
• Доступно для шаблонов – Пост

Важно, чтобы TV-поле называлось именно “tags”, иначе придется переопределять предустановки компонента:

Теперь я более подробно расскажу про сам компонент. В составе него идет 3 сниппета:

• getResourcesTag – данный сниппет ищет статьи, помеченные определенным тегом. Работает на основе getResources, следовательно, наследует его параметры.
• tagLister – сниппет для вывода облака тегов.
• toLinks – сниппет, который преобразовывает теги статьи в ссылки на страницы, на которых у нас будет подборка статей, помеченных определенным тегом.

Чтобы приступить, нам необходимо создать шаблон “Поиск по тегам” со следующим кодом:

<html lang="ru">
  <head>
	[[$meta]]
  </head>  
  <body>
	<div class="wrapper">
	  [[$headerInner]]
	  <main id="blog" class="inner-bottom-xs">
		<div class="container">
		  <div class="row">
			<div class="col-md-9">
			  <div class="posts sidemeta">
				[[!getResourcesTag?
				   &element=`pdoResources`
				   &elementClass=`modSnippet`
				   &grSnippet=`pdoPage`
				   &tpl=`postTpl`
				   &hideContainers=`1`
				   &pageVarKey=`page`
				   &parents=`2`
				   &includeTVs=`image,tags`
				   &includeContent=`1` 
				 ]]
			  </div>
			  <hr/>
			  [[!+page.nav]]
			</div>			
			<div class="col-md-3">
			  [[$blogSidebar]]
			</div>
		  </div>		  
		</div>
	  </main>
	  [[$footer]]
	</div>
	[[$scripts]]
  </body>
</html>

В параметре «tplPageWrapper» нужно указать чанк, найдете его на тестовом сайте. Я использовал вместо getResources – pdoResources, чтобы выборка происходила быстрее. В видео я объясню, что значит каждый из параметров и вы сможете посмотреть это в официальной документации.

Итак, у нас готов шаблон. Теперь в корне сайта нам необходимо создать ресурс – “Поиск по тегам”:

На данном ресурсе у на будут выводиться релевантные выбранному тегу статьи. Отлично!

Теперь вспомните: где у нас выводятся теги? Правильно! В шаблоне “Пост” и в чанке “postTpl”. Сейчас мы с вами выведем теги для статьи, но прежде нужно добавить в нашу тестовую статью какие-нибудь “тестовые теги” (указываем через запятую, сохраняем):

В шаблоне теги у нас выводятся в двух местах, причем их стиль отображения отличается. Если в первом случае, нам достаточно просто вызвать сниппет toLinks (шаблон ссылка – по умолчанию), то во втором случае, нужно создать чанк “tagRowTpl”:

<span><a href="[[+url]]" class="[[+cls]]">[[+item]]</a></span>

И в шаблоне нужно прописать в следующих местах вызовы toLinks:

Вызов первый:

[[!tolinks? 
&items=`[[*tags]]` 
&target=`5`
]]

Вызов второй:

[[!tolinks? 
&items=`[[*tags]]` 
&tpl=`tagRowTpl` 
&target=`5`
]]

Заметили параметр target? Он как раз ведет на тот ресурс, который мы создали. Теперь нам нужно сделать аналогичный вызов в чанке postTpl:

Помните разницу? Здесь мы вызываем TV с префиксом и знаком “+”. Также не забудьте включить TV-параметр в выборку в шаблоне “Блог”:

Ну, что? Проверим? Покликайте по тегам на странице статьи или блога. Работает! Можете создать другую статью и сделать отличные от созданной раннее тегами.

Теперь выведем облако тегов в сайдбаре. Я не буду управлять их размером, выведу 15 популярных:

Вызов tagLister:

[[!tagLister? 
&tv=`tags` 
&target=`5`
&limit=`15`
&tpl=`tagListerTpl`
&allTpl=`tagListerTpl`
]]

Код чанка “tagListerTpl”:

	<a href="[[~[[+target]]]]?[[+tagVar]]=[[+tag]]">[[+tag]]</a>

Все! У нас получилось! Теги реализованы. Согласитесь, что все очень быстро и просто!

Автор Петропавловский Артем

Основатель и ведущий разработчик DART Agency. Пишу о разработке, продажах и процессах в IT.