Создание тегов материалов сайта. Теги modx

Теги modx revolution || создание сайтов

При разработке большинства веб сайтов требуется внедрять новостной блог, который необходим для размещения динамической информации на любом современном сайте. При постоянном наполнения сайта новостными ресурсами появляется необходимость организации удобной сортировки и поиска статей по разным параметрам.

Для организации поиска по ключевым словам идеально подходит приложение Simplesearch, которое мы рассмотрим в самое ближайшее время. А для группировки всех публикаций по тематике принято использовать теги - слова и словосочетания, которые явно характеризуют тематику публикации.

Группировка по тегам позволяет организовать поиск и сортировку всех публикаций в пределах новостного сайта или определенной категории, которые помечены специальным тегом. При совпадении тегов в нескольких публикациях посетитель может легко отсортировать только интересующие его публикации.

Теги modx revolution

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

Для реализации необходимого нам функционала мы будем использовать готовое приложение из репозитория - taglister.

Taglister MODX Revo

После установки приложения taglister можно переходить к настройкам отображения тегов на сайте. Давайте рассмотрим основные типы отображения тегов, которые могут нам потребоваться для удобной навигации по сайту и организации сортировки.

Вывод списка тегов под содержимым публикации
Организация поиска по тегам (при нажатии по тегу переход на страницу с выводом всех публикаций с таким же тегом)
Вывод облака тегов в категориях

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

Можно приступать к реализации поставленной цели. Учитывая тот факт, что на нашем сайте уже запущен блог, я подразумеваю, что у вас установлен пакет приложения pdoResources.

Вывод списка тегов на странице публикации новости

Для начала необходимо создать новый TV параметр с именем tags, в настройках ввода выбираем АВТОМЕТКА, а также выбираем шаблон, который используется для вывода статей нашего блога.

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

Прописываем код вывода списка тегов. Необходимо уточнить как у вас организован вывод тегов-в шаблоне или через чанк, в зависимости от этого будет производиться вызов tv через * или +. В моем случае вывод списка тегов будет напрямую в шаблоне, поэтому я буду размещать код в самом шаблоне и использовать *.

Создадим новый ресурс с именем РЕЗУЛЬТАТ ПОИСКА ПО ТЕГАМ и присвоим ему шаблон как для вывода анонсов новостей блога. Запомним идентификатор (номер) созданного нами ресурса. В моем случае идентификатор ресурса будет (17).

В моем шаблоне предусмотрено место для вывода списка тегов и выглядит это таким образом:

1 2 3 4

Вставим конструкцию вызова списка тегов, заменив ссылки статического кода.

1 2 3 4 5 6

<div> <span><i></i> ТЕГИ:</span> [ [!tolinks? &items=`[[*tags]]` &target=`17` &inputDelim=`,` &outputDelim=` `&tpl=`TagsList`]] </div>

Данная конструкция выполняет сразу несколько функций. Во первых происходит выборка данных, прописанных в tv параметре tags для текущего ресурса, а во вторых формируется список активных ссылок для перехода на страницу результатов поиска, на которой будет произведена выборка всех ресурсов с таким же тегом.

Теперь нам необходимо создать чанк для вывода ссылки для каждого тега. Название чанка произвольное, в моем случае это TagsList.

Содержимое данного чанка:

1	<a href="[ [++site_url] ][ [+url] ]"> [ [+item] ]</a>

Ресурс отображения результатов поиска по тегам MODX Revo

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

Код конструкции:

1 2 3 4 5 6 7 8 9 10 11 12

[ [!getResourcesTag? &parents=`2` &grSnippet=`pdoPage` &element=`pdoResources` &tpl=`blogPost` &hideContainers=`1` &includeTVs=`blog-photo,category,HitsPage` &includeContent=`1` &limit=`12` &sortby=`pagetitle` &sortdir=`ASC` ]]

Так как я не использую getResources и getPage, то я указал необходимоть использования обработчиков pdo. Параметр parents получает значение родителя или родителей, чьи потомки будут учавствовать в сортировке. В моем случае новостной блог находится в папке с идентификатором 2. Часто категории разбиты по отдельным родителям, в таком случае необходимо указать все идентификаторы родителей через запятую.

В качестве вывода результатов выборки необходимо указать чанк, который будет формировать результаты выборки. В моем случае это чанк с именем blogPost, который я использую для вывода анонсов публикаций на странице категорий. В нем ничего изменять не требуется.

Ну и дальше стандартные параметры выборки, которые выставляем в зависимости от ваших требований или предпочтений: количество результатов на странице, какие tv параметры необходимо отображать в результатах, тип сортировки и т.д.

Ниже устанавливаем код пагинации страниц:

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

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

Вывод облака тегов taglister MODX Revo

Для полноты картины функциональности нашего блога на MODX необходимо вывести облако тегов в сайдбаре блога, что позволит повысить юзабилити нашего новостного сайта. Для этого определяемся с местом вывода облака тегов и прописываем следующую конструкцию:

1 2 3 4 5 6 7

[ [!tagLister? &tv=`tags` &target=`17` &parents=`2` &limit=`20` &tpl=`tagsCloud` ]]

Структура конструкции напоминает оформление выьорки на странице результатов поиска. Мы также прописываем родителя, в моем случае это ресурс с идентификатором (2), указываем идентификатор ресурса, на который будет осуществляться переход при клике по тегу из облака (все тот же ресурс вывода результатов поиска по тегам).

Также необходимо определиться с максимальным количеством тегов в облаке, в моем случае это 20 тегов со всех публикаций, которые находятся в родителе с новостями. Для оформления самого облака тегов необходимо указать и создать новый чанк с именем tagsCloud.

Чанк вывода облака тегов MODX

1	<span><a href="[ [+url]]">[ [+tag]]</a></span>

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

Надеюсь урок будет полезен при разработке ваших проектов.

P.S.: Отличная возможность использования списка тегов для генерации ключевых слов для публикаций, прописываем выборку списка тегов параметра в шапке шаблона публикации через код:

1 2 3 4 5 6 7

Чанк KeyList копируем с чанка вывода ссылок для тегов, только убираем a href.

Удачи в сайтостроении!

site-get.ru

Облако тегов в MODX revolution

Сегодня пойдет разговор, как можно вывести «Облако тегов» в MODX revolution.

Cоздадим страницу для вывода результатов при обращении к тегу или метке, выбор за Вами. Выводить облако тегов мы будем с помощью сниппета tagLister. Если он у Вас еще не установлен, скачивайте и устанавливайте.

Скачанный Вами сниппет tagLister включает в себя три сниппета:

tagLister — Показывает облако тегов, т.е. список всех имеющихся тегов.
tolinks — Показывает теги для одной страницы.
getResourcesTag — Показывает все страницы помеченные определенным тегом, при обращении к этому тегу. Это расширение сниппета getResources, поэтому он делит те же параметры и добавлены свои.

Для того что бы теги выводились, их нужно откуда-то брать. Поэтому, создаем новое дополнительное поле (TV). На вкладке «Общая информация» заполняем поля:
имя: tags (Не рекомендую менять название, т.к. в параметрах tagLister это название для обращения к TV установлено по умолчанию.).
заголовок: tags
описание: Для отображения тегов

На вкладке «Параметры ввода», в строке «тип ввода» выберите «авто-метка», это исключит такие ошибки при перечислении тегов типа: Тег, тег, ТЕГ, тег и т.д. Кроме этого очень удобно, вкладка «Параметры вывода» — по умолчанию.

«Доступно для шаблонов» — отметьте все шаблоны, где Вы будете прописывать теги. Сохраняем.

Далее создаем чанк с шаблоном и вызовом сниппета .

<div> <h3>Облако тегов</h3> <ul> [[tagLister? &parent=`0` &sortBy=`tag` &target=`32` &limit=`50` ]] </ul> </div>

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

— Кэшируемый вызов сниппета.
&parent=`0` — ID родительского ресурса, в данном случае отбор по всем документам.
&sortBy=`tag` — Сортировка по тегам (в алфавитном порядке), по умолчанию `count` — по количеству.
&target=`32` — ID ресурса с вызовом сниппета getResourcesTag, страница результатов запроса. У Вас скорее всего будет будет другая.
&limit=`50` — Количество выводимых тегов, по умолчанию `10`.
&tv=`myTvName` — Добавить в том случае, если вы назвали (TV) с тегами по своему. По умолчанию `tags`.

Теперь добавьте теги к статьям и поместите вызов созданного чанка в то место, где у Вас будет облако тегов. Должно получиться, что-то вроде этого:

Если посмотреть исходный код, то увидим что tagLister использует список. Поэтому вызов сниппета в шаблоне мы поместили в теги. Откройте в своем браузере исходный код страницы и обратите внимания на class.

class="tl-tag tl-tag-weight5" class="tl-tag tl-tag-alt tl-tag-weight1"

Классы присваиваются каждому тегу. Через строчку списка добавляется дополнительный класс: «tl-tag-alt» — альтернативная строчка. Мы не будем разбирать, что с ним можно сделать, ясно-понятно, что для придания строчки дополнительных стилей CSS. Лишние классы CSS чуть ниже мы удалим. Самое интересное для нас это класс: «tl-tag-weght1», «tl-tag-weght2», «tl-tag-weght3», «tl-tag-weght4», «tl-tag-weght5». С помощью них наши теги будут различаться. Чем чаще используется тег, тем больше он будет выглядеть в облаке. Только есть одно НО! Нас не устраивает, что теги показываются в столбик. Они должны выглядеть, как у на сайтах, где ранее видели или встречались облака тегов, построчно и без подсчёта количества. Мы нашли несколько вариантов, как можно добиться желаемого. Рассмотрим каждый из них.

Как не надо делать! Убрать подсчет тегов и расположить построчно.

По адресу: ваш_сайт /core /components /taglister /elements /shunks /tag.shunk.tpl находится шаблон такого содержания:

<li><a href="[[+url]]">[[+tag]]</a> ([[+count]])</li>

Плейсхолдер (), как раз и отвечает за вывод (подсчета тегов). Удалите его и «вуаля», цифры пропадут. Теги заменяем на , и мы добились того чего желали. Только при обновлении сниппета tagLister шаблон может перезаписаться в свое исходное состояние. Поэтому пойдем другим путем.

Как надо делать! Убрать подсчет тегов и расположить построчно.

Чтобы не боятся обновлений, выносим этот шаблон в отдельный чанк и назовем его: tag_user. Код чанка:

Как видите мы заменили теги, cохраняем. Теперь подключаем вновь созданный чанк, для этого переходим в чанк cloud. И внесем небольшие изменения.

<div> <h3>Облако тегов <p> [[!tagLister? &parent=`0` &sortBy=`tag` &target=`32` &limit=`50` &tpl=`tag_user` &altCls=``]] </p> </div>

Мы добавили два атрибута и изменили теги. Рассмотрим добавленные параметры:

&tpl=`tag_user` — Подключил созданный нами чанк `tag_user`, по умолчанию `tag`.
&altCls=`` — Отключил класс CSS, по умолчанию `tl-tag-alt`. Помните, эта та, альтернативная строчка.

Теперь на каждый тег осталось по два класса CSS, это «tl-tag» — общий стиль и «tl-tag-weght» — с соответствующими цифрами от 1 до 5, всего пять классов. Все параметры в чанке cloud, можно внести непосредственно в параметрах сниппета tagLister. Для этого нужно перейти на вкладку элементы/tagLister/параметры/. Не рекомендуется изменять параметры по умолчанию, т.к. при обновлении могут перезаписаться в исходный вид. Для изменения перейти на вкладку «Добавить набор параметров». После редактирования кликать «Сохранить набор параметров». После сохранения не забудьте экспортировать пользовательский набор параметров и положить скрипт в надежное место. Наше облако тегов сейчас выглядит так:

Подключаем стили CSS:

.tagcloud .tl-tag { line-height:normal; } .tagcloud .tl-tag a { color:#777777; padding:2px; background-color:#F9F9F9; text-decoration:none; } .tagcloud .tl-tag a:hover { background:#B8F2F5; color:#000000; } .tagcloud .tl-tag-weight5 {font-size:1.7em;} .tagcloud .tl-tag-weight4 {font-size:1.5em;} .tagcloud .tl-tag-weight3 {font-size:1.3em;} .tagcloud .tl-tag-weight2 {font-size:1.1em;} .tagcloud .tl-tag-weight1 {font-size:0.9em;}

Вот примерный вариант стилей, под свой сайт подберете сами. Смотрим что получилось.

Дальше нам нужно создать страницу на которой будут показаны результаты при переходе по тегу. Для таких страниц у нас есть специальная папка. Создаем новую страницу с названием: «Результат по запросу:». Указываем для нее подходящий шаблон и отмечаем поля: «Не показывать в меню» и «Опубликован». Во вкладке «Настройки» убираем отметку с «Использовать HTML-редактор», «Кэшируемый». Сохраняем и обновляем страницу. Далее «ID» созданной страницы нужно указать в параметре &target=`` в чанке cloud.

В разделе: «Содержимое ресурса» созданной страницы помещаем вызов сниппета .

[[!getResourcesTag? &parents=`0` &tpl=`tag_result` &toPlaceholder=`results` &showHidden=`1` &limit=`50` &hideContainers=`true` ]] <h3>Результаты по запросу:</h3> <ul> [[!+results]] </ul>

Давайте разберем использованные параметры.

[[!getResourcesTag?]] — Не кэшируемый вызов сниппета.
&parents=`0` — Поиск по всему сайту, по умолчанию `текущий ресурс`.
&tpl=`tag_result` — Подключаем чанк с шаблоном вывода результата, чуть ниже мы его создадим.
&toPlaceholder=`result` — Назначаем плейсхолдер , куда будут выводится результаты.
&showHidden=`1` — Показывать ресурсы скрытые от меню, по умолчанию `0`.
&limit=`50` — Ограничить количество показываемых ресурсов на странице, по умолчанию `5`.
&hideContainers=`true` — Не показывать ресурсы-контейнеры, по умолчанию `0`

Результаты запроса будут выводится маркированным списком. Каждую строку формировать будет чанк tag_result. Код чанка tag_result:

<li><a href="[[~]]"><strong>[[+pagetitle]]</strong></a></li>

Полную документацию по сниппету можно посмотреть здесь.

Голосов: 141 | Просмотров: 889

proweb63.ru

Синтаксис тегов в MODX Revolution MODX

Для упрощения логики парсинга, ускорения и избежания путаницы, все таги в MODX Revolution сделаны в едином формате, отличаются лишь токеном или набором токенов перед строкой, которая идентифицирует Элемент контента или Контент тег для его обработки; например [[tokenIdenticator]].

Формат тегов в MODX Revolution

Элементы контента Evolution (Старый) Revolution (Новый) Примеры для Revolution

Шаблоны	нет представления тегом	нет представления тегом
Поля ресурса	[field]	[[*field]]	[[*pagetitle]]
Переменные шаблона	[templatevar]	[[*templatevar]]	[[*tags]]
Чанки	{{chunk }}	[[$chunk]]	[[$header]]
Сниппеты	[[snippet]]	[[snippet]]	[[getResources]]
Плагины	нет представления тегом	нет представления тегом
Модули	нет представления тегом	не существует в Revolution, используйте ПСМ
Контент теги
Заполнители	[+placeholder+]	[[+placeholder]]	[[+modx.user.id]]
Ссылки	[~link~]	[[~link]]	[[~[[*id]]? &scheme=`full`]]
Системные настройки	[(system_setting)]	[[++system_setting]]	[[++site_start]]
Языки	нет представления тегом	[[%language_string_key]]
Комментарий (см. ниже))		[[-это комментарий]]

Принятие нового формата в Revolution позволило новому парсеру быть полностью рекурсивным, использующем механизм, который не зависит от регулярных выражений.

Ранее какждый таг парсился независимо в особом порядке, один уровень за раз, встроенные теги ожидали своего прохода. Теперь теги парсятся так как они идут по очереди не зависимо от типа элемента, что они представляют и встроенные теги парсятся перед внешними для возможности создания более сложных конструкций из тего. Вместе с возможностью использования предварительно зарезервированного ? & и = символов в теговых строках, MODX контент теги являют мощный набор возможностей для управления контентом.

Теги комментарии

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

Так начиная с версии MODX Revolution 2.2, любой тег, что начинается с тире (-) игнорируется парсером и любые теги, которые он включает будут игнорироваться. До этой версии можно было использовать аналогичный приём, но теги в них парсились и оказывали влияние на производительность.

[[- этот комментарий может быть удалён]]

Структура Тега

Тег содержит много частей:

[[ (отрывающие теги)! (опционально - некешируеммый флаг)elementToken (опционально - токен идентифицирующий тип элемента, если он не сниппет, $=чанк, *=поле ресурса/ТВ, +=заполнитель/плейсхолдер и др.)elementName@propertyset (опционально - идентификатор Набора параметров):filterName=`modifier`:... (опционально - один или несколько фильтров вывода)? (опционально; показывает начало строки параметров)&propertyName=`propertyValue` &... (опционально; любые дополнительные параметры разделённые &)]] (закрывающие теги)

Теги можно располагать на одной линии или в несколько. Любой вариант является приемлемым:

[[!getResources? &parents=`123` &limit=`5`]] [[!getResources? &parents=`123` &limit=`5` ]]

Параметры

Все теги - а не только сниппеты, в MODX принимают параметры и могут их использовать. Например, давайте возьмём чанк 'Hello' с содержимым:

Привет [[+name]]!

Теперь можно передать параметр этому чанку:

[[$Hello?name=`Виктор`]]

Это выведет

Привет Виктор!

Синтакс для параметров такой же как и в Эволюшн.

Кеширование

В Evolution сниппеты, которые должны были быть обработаны с каждым запросом должны быть на некешированной странице или Сниппет сам по себе должен был вызываться некешированно: [!snippet!]

В Revolution любой тег может быть вызван некешированно сразу же после двойных скобок: [[!snippet]], [[!$chunk]], [[!+placeholder]], [[!*template_var]], и др

Если у вас продвинутая установка, в которой настройка site_url - устанавливается по запросу, но ваши ссылки [[~[[*id]]]] не генерируются правильно, помните, что любой тег может вызываться некешированно включая ссылку или анкор-тег: [[!~[[*id]]]]

В то же время, это вам нужно будет лишь тогда, когда site_url устанавливается динамически и отличается при запросах. Обычно используется кешированная запись.

Порядок парсинга

Если вы можете вызвать сниппет некешированно, то он будет выполнен в последнюю очередь парсинга.

Если у вас ещё ниже есть закешированные заполнители, то они будут определены перед выполнением Сниппета - это значит, что они получат последнее значение хранимое в кеше этого Сниппета ранее (или пустое, если ещё не было установлено).

Если вы хотите вызвать Сниппет некешированно, который установит заполнители, то вам нужно убедится, что заполнители некешированные тоже:

[[!Profile]] Привет [[!+username]]

Оригинал статьи Tag Syntax

modx.ws

Теги для материалов - Minyta

Теги в материале будут представлять собой набор ссылок, перейдя по которым мы будем попадать на страницу с выводом кратких анонсов. Вот созданием этой страницы сейчас и займёмся.

Создаем новый материал в дереве ресурсов, для этого у меня есть специальная папка «служебные».Заполняем поля:Заголовок: Поиск по материаламПсевдоним: tagПоставить галочку – Не показывать в меню и Опубликован

Обратите внимание на ID создаваемого ресурса (у меня 27) – он в последующем потребуется.

Переходим во вкладку Настройки страницы и убираем галочки Использовать HTML-редактор, Доступен для поиска и Кэшируемый

Нажимаем кнопку сохранить, чтобы изменения вступили в силу и возвращаемся на вкладку Создание/редактирование документа.Заполняем поле содержимое ресурса:

[[!getResources? &parents=`1,4,10` &tpl=`shablon_for_block_anons` &tplLast=`shablon_for_block_anons_last` &includeTVs=`1` &processTVs=`1` &includeContent=`1` &limit=`100` &hideContainers=`1` &tvFilters=`tags==%[[GET]]%` ]]

Думаю стоит пояснить значение этих строк. По первых, getResources – это такой сниппет для работы с ресурсами сайта, аналог Ditto. Он заключен в скобки [[! ]] – восклицательный знак говорит о том, что его вызов кэшироваться не будет.

Параметры:Parents – указываем id ресурсов-папок, материалы которых будут выводиться при поиске.tpl – шаблон вывода ресурсовtplLast – шаблон вывода последнего ресурсаincludeTVs – включаем обработку TV параметровprocessTVs – тоже надо включить, чтобы TV параметры работалиincludeContent – указываем, что надо выводить содержимое ресурсов, в противном случае будет выведен массив данных ресурсов (иногда так же является полезным)limit – число документов для отображения, пока поставим 100, чтобы вывести все, потом можно будет выставить необходимое.hideContainers – скроем (не будем выводить) ресурсы являющиеся папкамиtvFilters – фильтр на основе, которого будем решать выводить ресурс или нет.

Примерное содержание чанка shablon_for_block_anons: div> h5>a href="[[~[[+id]]]]">[[+pagetitle]]/a>/h5> p>[[+introtext]]/p> /div>

tplLast=`shablon_for_block_anons_last` - следует использовать, если шаблон последнего документа отличается от остальных, к примеру, у последнего нижний край закругленный или любое другое отличие. В остальном это точно такой же шаблон вывода как и shablon_for_block_anons.

На параметре tvFilters думаю стоит остановиться более подробно. Есть материалы где в TV под именем tags будут храниться теги (метки) в таком виде: «метка1,метка2,метка3». При нажатии на ссылка к примеру метка2 в строке запроса (методом GET) будет передано имя этой метки, его мы получим с помощью специального сниппета GET. Результатом его работы как раз и будет слово метка2 при нажатии на соответствующую ссылку.

Теперь надо выбрать только те ресурсы, в которых в TV tags встречается слово метка2, для этого используется кострукция &tvFilters=`tags==%метка2%`, где % обозначает, что перед словом и после него могут быть другие символы, без них будет вестись поиск по точному совпадению.

Вывод тегов в шаблоне

[[tags_snippet? &input=`[[*tags]]`]]

Вроде почти всё готово.Теперь можно заходить в материал и пробовать заполнять TV параметр tags

Для начала надо будет самому вписать нужные теги через запятую (без пробела), а вот потом в ресурсах появиться возможность выбора тегов из уже использованных.К примеру, у меня на сайте уже есть ресурсы с тегами MODx Revo, MODx Evo и PHx, а для нового ресурса я хочу сделать теги MODx Revo и TV.

Для это надо нажать на ссылку MODx Revo из уже имеющихся тегов и вписать новый тег TV в строку ввода. Конечно, можно было вписывать все теги вручную, но это не так удобно, да и могут возникнуть проблемы если в написании тегов будут допущены ошибки. Вот что получилось у меня:

Не забываем сохраниться и можно переходить на сайт смотреть результат трудов.

По всем замечаниям и пожеланиям всегда можете обращаться ко мне. Как это сделать смотрите на странице Контакты.

minyta.ru

Урок 6. Переменные шаблона MODX

Добро пожаловать на 6 урок Переменные шаблона. В предыдущем занятии мы исследовали концепцию чанков. Мы создали несколько чанков и научились как использовать для конструирования шаблона. Также мы упомянули несколько других методов использования чанков и обучились синтаксису и способу вызова чанков в шаблоне. В этом занятии мы будем исследовать крутые элементы MODx – Переменные шаблона – Template Variables (TVs).

В предыдущих уроках мы начали процесс портирования шаблона Themeforest в MODX и в процессе обучения мы прошли основы работы с шаблонами и чанками. Наш вебсайт выглядит уже довольно-таки круто, но это по-прежнему сайт ламера в том смысле, что ничто в этом сайте собственно не принадлежит самому сайту и все выдаваемое содержимое принадлежит в реальности самому шаблону. В этом уроке мы начнем процесс замены этого ламерского статического контента динамическим контентом, который будет выдаваться на основании страниц сайта, а не страниц шаблона.

Работа с контентом в MODX Revolution

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

Области шаблона, которые будут преобразованы в Переменные шаблона MODX Revolution

Моя цель сводится к тому, чтобы в конце занятия мы заменим содержимое этих трех областей содержимым, которое мы будем вводить на домашней странице во вкладке ресурсы. В процессе мы начнем изучать основы переменных шаблона (ПШ или ТВ). Ну что ж, поехали.

Создание контента в MODX Revolution

Давайте посмотрим на базовый ресурс в MODX Revolution. Если вы зайдете на вкладку ресурсы и откроете ресурс Home для редактирования, вы увидите несколько полей. Мы их уже коротко рассматривали на 4 уроке. Давайте освежим их в своей памяти:

Редактирование ресурса в MODX Revolution

На этой картинке видно, что по умолчанию для редактирования доступно 14 полей. Каждое поле имеет подсказку, которая объясняет для чего тот или иной тег предназначен. Вы можете увидеть эти подсказки, когда наведете курсором на любое поле.

Подсказки для полей ресурса

Вы можете заполнять эти поля или несколько из них, когда вы создаете новый ресурс. Потом к этим полям можно обратится используя соответствующий тег шаблона. Например, вы можете выбрать поле description для мета описания и потом вызвать это поле в теге мета описания в начале вашего шаблона и так далее. Вы увидите, что поле Menu title важно, когда мы начнем работать со сниппетом Wayfinder для создания навигации сайта (это будет очень скоро)

Как вы видите, ресурс по умолчанию дает нам возможность использования одной областью контента:

Область контента

Важно определится куда попадет этот контент в нашем сайте. Мы можем вызывать данный введенный здесь контент ресурса используя тег [[*content]]. В простой странице шаблона с одной областью контента всё было бы очень просто и ясно. Например, если мы посмотрим на страницу About, которая идет вместе с шаблоном над которым мы работаем, то видна лишь одна область контента:

Страница About

Теперь для нашей домашней страницы мы можем скопировать код, который отвечает за вывод трех областей контента в наше окно ресурса и таким образом сделать вывод домашней страницы. Но мне кажется всё же более разумным сделать эти три области независимыми со своими собственными областями контента. Мы сделаем это используя переменные шаблона. Что такое переменные шаблона (TV)?

Переменные шаблона – это простые пользовательские поля, которые вы можете добавлять в свой шаблон. Они относятся к конкретному шаблону и не могут быть использованы в других шаблонах, только если вы не введете соотношение к этим другим шаблонам. Они позволяют вам быть более гибкими в построении сайта и использовать больше полей, чем задано в ресурсе по умолчанию.

Переменные шаблона являются просто полями, которые добавляются к вашему ресурсу, и имеют такой же синтаксис как и поля по умолчанию: [[*ПШимя]].

Переменные шаблона имеют типы ввода и вывода, которые могут быть не просто простыми полями техста. Это могут быть также поля изображений, поля url, поля даты и другие. Вы даже можете создавать пользовательские типы ПШ. Но давайте не будем забегать вперед. На данном уроке мы расмотрим лишь основы и не забывайте, что более детально про ПШ можно почитать в руководствах (ссылки в конце записи). В будущем мы будем говорить больше о ПШ, потому что они являются мощным и гибким инструментом, но давайте перейдем к основам.

Лучший способ изучения курса, это пробовать все на практике. С открытым для редактирования ресурсом Home перейдите на закладку переменных шаблона Template Variables:

Переменные шаблона MODX Revolution

Обратите внимание на поле по-умолчанию Resource Content, которое мы видели на основном табе как переменную шаблона. Теперь мы будем использовать это поле контента основного ресурса для области 1 в нашем шаблоне (см 1 изображение). Далее создадим две ПШ для других областей контента – 2 области и 3 области. Давайте вначале наполним первую область каким-либо содержанием, чтобы мы могли отслеживать изменения.

Для справки, вот эти три области:

Области для замены Переменными шаблона

Откройте шаблон для редактирования и прокрутите вниз к коду, который отвечает за 1 область. Вы можете использовать для нахождения этого кода Firebug (плагин Mozilla). В моем случае, этот код будет выглядеть вот так:

Заметим этот статический код, моим тегом контента и в результате получим:

И теперь моя страница будет выглядеть приблизительно вот так:

Новый вид страницы

Как вы видите 1 область пуста. Это из-за того, что нет никакого контента в нашем поле ресурса Home. Давайте введем какой-нибудь контент. Откройте ресурс Home для редактирования и добавте какое-нибудь содержание на ваш выбор:

Добавление контента в ресурс MODX Revolution

Сохраните этот ресурс и давайте посмотрим на наш сайт. Текст, который мы ввели в контент-поле ресурса теперь появился в 1 области.

Смена контента на 1й странице

Отлично, давайте перейдем к остальным областям. Также мы хотим, чтобы эти области были с изменяемым контентом, поэтому нужно создать две ПШ, которые имеют поля ввода текста.

Создание переменных шаблона в MODX Revolution

Для создания переменных шаблона перейдите во вкладку Элементы (Elements) и нажмите правой кнопкой мыши на Переменные шаблона (Template Variables) для создания новой ПШ. Вы также можете нажать на иконку ярлыка Новая переменная шаблона (New TV).

Создание переменной шаблона в MODX Revolution

В окне создания переменной шаблона введите имя переменной и ее подпись. Постарайтесь дать вашей переменной шаблона имя, которое покажет ее предназначение. Подпись переменной шаблона важна так как она будет подсказкой для редактора/контент-менеджера сайта и покажет что представляет собой это поле.

Описание переменной шаблона в MODX Revolution

Также можно добавить описание к переменной шаблона. Мы же хотим, чтобы в будущем редактор сайта смог использовать редактор текста, когда вводит контент в этом поле и мы обозначаем, что тип ввода в этом поле – Rich Text. Как я уже упомянул, есть еще другие типы ввода и вывода, которые мы рассмотрим в дальнейшем. Недостающую информацию можно всегда почерпнуть в официальной документации.

Редактирование переменной шаблона MODX Revolution

Давайте теперь сделаем переменной шаблона для 3 области.

Подсказка: Если вы знаете, что переменная шаблона, которую вы собираетесь создать, очень похожа к уже созданной, то вы можете сократить процесс используя опцию Duplicate TV вместо создания новой переменной шаблона.

В моём случае области 2 и 3 очень схожи. Нажмём на переменной шаблона, которую нужно продублировать и выберем Duplicate TV:

Быстрое создание копии переменной шаблона

В всплывающем окне введите имя новой переменной шаблона и выберите дублирование значений. Ваша новая переменная шаблона будет иметь тот же доступ к шаблону, описание, типы ввода, вывода. Вам необходимо отредактировать описание переменной шаблона, так как оно уже будет относится к новой переменной и сделать другие необходимые изменения.

Теперь, если вы откроете ресурс Home для редактирования и пройдете на вкладку Template Variables и теперь видно две новые области контента как и задумывалось.

Области новых переменных шаблона

Теперь нам доступны для редактирования эти две области (и для контент-редактора нашего сайта), давайте вставим их в шаблон так, чтобы их содержимое автоматически парсировалось в нашу главную страницу. Отроем шаблон и посмотрим на контент во 2 и 3 областях, чтобы знать что заменить нашими тегами шаблона (можно для этих целей использовать firebug).

В моем случае код:

После редактирования приобретёт следующий вид:

Теперь, если мы посмотрим на домашнюю страницу, то увидим то, что все три области начинаются с контента, который был вставлен динамически с троих наших полей, два из которых – это только что созданные переменные шаблона.

Переменные шаблона в действии

Для простоты сейчас не буду обращать внимание на колонки в первой области или изображения во второй и третьей областях или на их специальные классы форматирования. Вы можете это выяснить посмотрев на код шаблона и добавив соответствующий код и изображения в области контента используя текстовый редактор движка.

Можно добавлять неограниченное количество переменных шаблона к шаблону, я добавлю еще 3 переменных шаблона, каждую по названию областей, поэтому у меня будут следующие переменные шаблона: Theme Features, Success Theme, и MODX Rocks, которые не являются статическими, а могут быть введены через вкладку Template variables. Также я могу использовать одно из существующих полей, например Long title, для одного из названий. В целом всё зависит от вас. Как и что хотите, то делайте с вашим шаблоном.

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

Что дальше?

Мы добавили немного динамичности нашему шаблону и у нас это хорошо получилось, теперь я думаю, самое время добавить несколько функциональных кусочков к этому сайту. В MODX функциональность к сайту добавляется через сниппеты, поэтому в следующем уроке мы начнем со сниппетов.

Также можно почитать:

modx.ws

Tags - Школа MODX

[(allow_duplicate_alias)]	разрешены или нет повторяющиеся псевдонимы при использовании дружественных URL
[(automatic_alias)]	генерируются ли псевдонимы документов на основе заголовков страниц автоматически
[(base_url)] или [(site_url)]	адрес сайта
[(cache_default)]	документ 'кэшируемый' по умолчанию
[(captcha_words)]	слова, используемые для настройки Captcha
[(custom_contenttype)]	разделенный запятыми список типов содержимого, обслуживаемых MODx
[(default_template)]	идентификатор шаблона используемого по умолчанию для новых документов
[(editor_css_path)]	путь к CSS-файлу используемого визуальным редактором
[(emailsender)]	основной адрес электронной почты на сайте
[(emailsubject)]	тема письма подтверждения регистрации веб-пользователей
[(error_page)]	идентификатор страницы ошибки '404'
[(etomite_charset)] или [(modx_charset)]	кодировка сайта
[(fck_editor_autolang)]	указывает, установлен ли FCKeditor для автоматического определения языка
[(fck_editor_style)]	указывает стиль используемый в FCKeditor
[(fck_editor_toolbar)]	указывает на пользовательскую панель инструментов, добавленную в FCKeditor
[(filemanager_path)]	корневая папка для доступа файлового менеджера MODx
[(friendly_alias_urls)]	используются ли псевдонимы в дружественных URL
[(friendly_urls)]	используются ли дружественные URL
[(friendly_url_prefix)]	префикс для дружественных URL
[(friendly_url_suffix)]	суффикс для дружественных URL
[(manager_language)]	язык системы управления
[(manager_layout)]	layout for the MODx Content Manager.
[(manager_theme)]	шаблон системы управления
[(number_of_logs)]	количество записей протокола на одной странице
[(number_of_messages)]	количество сообщений на одной странице
[(number_of_results)]	количество элементов, отображаемых в списках и результатах поиска
[(publish_default)]	публикация новых ресурсов после создания по умолчанию
[(rb_base_dir)]	физический путь к папке файлов
[(rb_base_url)]	адрес (URL) папки файлов
[(reset_template)]	indicates if all templates or just documents assigned the current default_template are reset when the default template is changed in the manager.
[(resolve_hostnames)]	indicates if MODx will try to resolve visitors' hostnames when they visit the site (applies to MODx internal logs).
[(search_default)]	новые ресурсы после создания доступны для поиска по умолчанию
[(server_offset_time)]	поправка (количество часов) между временем на месте вашего пребывания и на месте нахождения сервера
[(server_protocol)]	HTTP или HTTPS (SSL) соединение
[(settings_version)]	версия MODx
[(show_preview)]	determines if preview is shown when viewing documents in MODx Content Manager.
[(signupemail_message)]	сообщение, которое будет отсылаться менеджерам, когда создается учетная запись нового менеджера
[(site_id)]	(replaceThisText)
[(site_name)]	название сайта
[(site_start)]	идентификатор стартовой страницы
[(site_status)]	статус сайта online (1) или offline (0)
[(site_unavailable_message)]	сообщение, выводимое в случае недоступности сайта (когда выбран статус 'Оффлайн') или в случае возникновения ошибки. Это сообщение выводится только в том случае, когда не выбрана страница 'Сайт недоступен'
[(site_unavailable_page)]	идентификатор ресурса, который должны будут увидеть посетители, если попытаются зайти на сайт, когда он недоступен
[(strip_image_paths)]	используются абсолютные или относительные ссылки для изображений, файлов, анимации и т.д.
[(top_howmany)]	количество лучших показателей в отчетах статистики
[(track_visitors)]	регистрировать посещения
[(udperms_allowroot)]	разрешено ли пользователям создавать ресурсы в корневой папке
[(unauthorized_page)]	ID ресурса, который должны будут увидеть посетители, если попытаются зайти на закрытую страницу (403 – доступ запрещен)
[(upload_files)]	разделенный запятыми список расширений файлов, которые могут быть загружены через файловый менеджер
[(upload_maxsize)]	максимальный размер загружаемых файлов в байтах
[(use_alias_path)]	используются вложенные URL
[(use_captcha)]	использовать код CAPTCHA при авторизации
[(use_editor)]	использовать HTML-редактор
[(use_udperms)]	indicates if user permissions are enabled for the site.
[(webpwdreminder_message)]	сообщение, которое будет отсылаться веб-пользователям, когда они запрашивают напоминание пароля
[(websignupemail_message)]	сообщение, которое будет отсылаться веб-пользователям, когда создается учетная запись нового веб-пользователя
[(which_editor)]	используемый HTML-редактор

i--gu.ru

Реализуем вывод облака тегов в MODX revolution | Инструкции

Сегодня я расскажу, как можно вывести «Облако тегов» в MODX revolution. И создадим страницу для вывода результатов, при обращении к тегу, или метке, кому как больше нравится. Выводить облако тегов мы будем с помощью сниппета tagLister. Если он у вас еще не установлен, скачивайте и устанавливайте.

Скачанный вами сниппет tagLister включает в себя три сниппета:

tagLister — Показывает облако тегов, т.е. список всех имеющихся тегов.
tolinks — Показывает теги для одной страницы.
getResourcesTag — Показывает все страницы помеченные определенным тегом, при обращении к этому тегу. Это расширение сниппета getResources, поэтому он делит те же параметры и добавлены свои.

Для того что бы теги выводились, их нужно откуда-то брать. Поэтому, создаем новое дополнительное поле (TV). На вкладке «Общая информация» заполняем поля:

имя: tags (Не рекомендую менять название, т.к. в параметрах tagLister это название для обращения к TV установлено по умолчанию.)
заголовок: tags
описание: Для отображения тегов

На вкладке «Параметры ввода», в строке «тип ввода» выберите «авто-метка». Это исключит такие ошибки, при перечислении тегов, как: Тег, тег, ТЕГ, тег и так далее. Кроме этого, очень удобно. Вкладка «Параметры вывода» — по умолчанию.

«Доступно для шаблонов» — отметьте все шаблоны, где вы будете прописывать теги. Сохраняем.

Далее, создаем чанк [[$cloud]] с шаблоном и вызовом сниппета [[tagLister]].

<div> <h3>Облако тегов</h3> <ul> [[tagLister? &parent=`0` &sortBy=`tag` &target=`32` &limit=`50` ]] </ul> </div> Чанк вы можете назвать как угодно, лишь бы вам понятно было. Разберем вызов сниппета:

[[tagLister?]] — Кэшируемый вызов сниппета.
&parent=`0` — ID родительского ресурса, в данном случае, отбор по всем документам.
&sortBy=`tag` — Сортировка по тегам (как я понял, в алфавитном порядке), по умолчанию `count` — по количеству.
&target=`32` — ID ресурса с вызовом сниппета getResourcesTag, страница результатов запроса. У вас скорее всего будет будет другая.
&limit=`50` — Количество выводимых тегов, по умолчанию `10`.
&tv=`myTvName` — Добавить в том случае, если вы назвали (TV) с тегами по своему. По умолчанию `tags`

Теперь, добавьте теги к статьям и поместите вызов созданного чанка в то место, где у вас будет облако тегов. Должно получиться что-то вроде этого:

Если посмотреть исходный код, то увидим что tagLister использует список. Поэтому вызов сниппета в шаблоне я поместил в теги . Откройте в своем браузере исходный код страницы и обратите внимания на class.

class="tl-tag tl-tag-weight5" class="tl-tag tl-tag-alt tl-tag-weight1" Классы присваиваются каждому тегу. Через строчку списка добавляется дополнительный класс: «tl-tag-alt» — альтернативная строчка. Я не буду разбирать что с ним можно сделать, ясно-понятно, что для придания строчки дополнительных стилей CSS. Лишние классы CSS чуть ниже я удалю. Самое интересное для нас это класс: «tl-tag-weght1», «tl-tag-weght2», «tl-tag-weght3», «tl-tag-weght4», «tl-tag-weght5». С помощью них наши теги будут различаться. Чем чаще используется тег, тем больше он будет выглядеть в облаке. Только есть одно НО! Меня не устраивает, что теги показываются в столбик. Они должны выглядеть как у меня на сайте, построчно и без подсчёта количества. Я нашел несколько вариантов как можно добиться желаемого. Рассмотрим каждый из них.

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

По адресу: ваш_сайт/core/components/taglister/elements/shunks/tag.shunk.tpl, находится шаблончик такого содержания: <li><a href="[[+url]]">[[+tag]]</a> ([[+count]])</li> Плейсхолдер ([[+count]]) как раз и отвечает за вывод (подсчета тегов). Удалите его и «вуаля», цифры пропадут. Теги заменяем на , и мы добились того чего желали. Только при обновлении сниппета tagLister, шаблончик может перезаписаться в свое исходное состояние. Поэтому пойдем другим путем.

Убрать подсчет тегов и расположить построчно, ХОРОШИЙ ВАРИАНТ.

Чтобы не боятся обновлений, выносим этот шаблон в отдельный чанк, назовем его: tag_user. Код чанка: <span><a href="[[+url]]">[[+tag]]</a></span> Как видите я заменил теги . Сохраняем. Теперь подключаем вновь созданный чанк, для этого переходим в чанк cloud. И внесем маленькие изменения. <div> <h3>Облако тегов</h3> <p> [[!tagLister? &parent=`0` &sortBy=`tag` &target=`32` &limit=`50` &tpl=`tag_user` &altCls=``]] </p> </div> Я добавил два атрибута и изменил теги на . Рассмотрим добавленные параметры:

&tpl=`tag_user` — Подключил созданный нами чанк `tag_user`, по умолчанию `tag`.
&altCls=`` — Отключил класс CSS, по умолчанию `tl-tag-alt`. Помните, эта та, альтернативная строчка.

Подключаем стили CSS:

Вот, совсем не плохо я думаю. Поехали дальше. Дальше нам нужно создать страницу, на которой будут показаны результаты при переходе по тегу. Для таких страниц у меня есть специальная папка. Создаем новую страницу с названием: «Результат по запросу:». Указываем для нее подходящий шаблон, отмечаем поля: «Не показывать в меню» и «Опубликован». На вкладке «Настройки», убираем отметку с «Использовать HTML-редактор», «Кэшируемый». Сохраняем и обновляем страницу. Далее «ID» созданной страницы нужно указать в параметре &target=``, чанка cloud.

В разделе: «Содержимое ресурса», созданной страницы помещаем вызов сниппета [[getResourcesTag]].

[[!getResourcesTag?]] — Не кэшируемый вызов сниппета.
&parents=`0` — Поиск по всему сайту, по умолчанию `текущий ресурс`.
&tpl=`tag_result` — Подключаем чанк с шаблоном вывода результата, чуть ниже мы его создадим.
&toPlaceholder=`result` — Назначаем плейсхолдер [[+results]], куда будут выводится результаты.
&showHidden=`1` — Показывать ресурсы скрытые от меню, по умолчанию `0`.
&limit=`50` — Ограничить количество показываемых ресурсов на странице, по умолчанию `5`.
&hideContainers=`true` — Не показывать ресурсы-контейнеры, по умолчанию `0`

Надеюсь понятно, результаты запроса будут выводится маркированным списком. Каждую строку формировать будет чанк tag_result. Код чанка tag_result: <li><a href="[[~[[+id]]]]"><strong>[[+pagetitle]]</strong&gt</a></li> Я не ставил задачу с красочной страницей. Поэтому все просто. Полную документацию по сниппету можно посмотреть здесь.

На этом все, надеюсь пост был полезен. Буду рад на ваши отклики.

marabar.ru