Реалізуємо висновок хмари тегів в modx revolution, інструкції

Сьогодні я розповім, як можна вивести «Хмара тегів» в MODX revolution.
І створимо сторінку для виведення результатів, при зверненні до тегу, або мітці, кому як більше подобається. Виводити хмара тегів ми будемо за допомогою сниппета tagLister. Якщо він у вас ще не встановлений, завантажуйте і встановлюйте.

Скачаний вами сниппет tagLister включає в себе три сниппета:
Реалізуємо висновок хмари тегів в modx revolution, інструкції


  • tagLister - Показує хмара тегів, тобто список всіх наявних тегів.
  • tolinks - Показує теги для однієї сторінки.
  • getResourcesTag - Показує всі сторінки помічені певним тегом, при зверненні до цього тегу. Це розширення сниппета getResources, тому він ділить ті ж параметри і додані свої.
Для того що б теги виводилися, їх потрібно звідкись брати. Тому, створюємо нове додаткове поле (TV). На вкладці «Загальна інформація» заповнюємо поля:
  • ім'я. tags (Не рекомендую міняти назву, тому що в параметрах tagLister це назва для звернення до TV встановлено за замовчуванням.)
  • Заголовок. tags
  • опис. Для відображення тегів
На вкладці «Параметри введення». в рядку «тип введення» виберіть «авто-мітка». Це виключить такі помилки, при перерахуванні тегів, як: Тег, тег, ТЕГ, тег і так далі. Крім цього, дуже зручно. Вкладка «Параметри виводу» - за замовчуванням.

«Доступно для шаблонів» - відзначте всі шаблони, де ви будете прописувати теги. Зберігаємо.

Якщо подивитися вихідний код, то побачимо що tagLister використовує список. Тому виклик сниппета в шаблоні я помістив в теги. Відкрийте в своєму браузері вихідний код сторінки і зверніть увагу на class.
Класи привласнюються кожному тегу. Через рядок списку додається додатковий клас: «tl-tag-alt» - альтернативна рядок. Я не буду розбирати що з ним можна зробити, ясно-зрозуміло, що для додання рядки додаткових стилів CSS. Зайві класи CSS трохи нижче я видалю. Найцікавіше для нас це клас: «tl-tag-weght1». «Tl-tag-weght2». «Tl-tag-weght3». «Tl-tag-weght4». «Tl-tag-weght5». За допомогою них наші теги будуть відрізнятися. Чим частіше використовується тег, тим більше він буде виглядати в хмарі. Тільки є одне АЛЕ! Мене не влаштовує, що теги показуються в стовпчик. Вони повинні виглядати як у мене на сайті, по рядках та без підрахунку кількості. Я знайшов кілька варіантів як можна домогтися бажаного. Розглянемо кожен з них.

Прибрати підрахунок тегів і розташувати через підрядник, поганий варіант.

Прибрати підрахунок тегів і розташувати через підрядник, ХОРОШИЙ ВАРІАНТ.


Щоб не бояться оновлень, виносимо цей шаблон в окремий чанк, назвемо його: tag_user. Код чанка:
Як бачите я замінив теги. Зберігаємо. Тепер підключаємо новостворений чанк, для цього переходимо в чанк cloud. І внесемо маленькі зміни.
Я додав два атрибути і змінив теги на. Розглянемо додані параметри:
  • tpl = # 96; tag_user # 96; - Підключив створений нами чанк # 96; tag_user # 96 ;, за замовчуванням # 96; tag # 96 ;.
  • altCls = # 96; # 96; - Відключив клас CSS, за замовчуванням # 96; tl-tag-alt # 96 ;. Пам'ятайте, це та, альтернативна рядок.
Тепер на кожен тег залишилося по два класи CSS, це «tl-tag» - загальний стиль і «tl-tag-weght» - з відповідними цифрами від 1 до 5, всього п'ять класів. Всі параметри в чанка cloud, можна внести безпосередньо в параметрах сниппета tagLister. Для цього потрібно перейти на вкладку елементи / tagLister / параметри /. Не рекомендується змінювати параметри за замовчуванням, тому що при оновленні можуть перезаписати в початковий вигляд. Для зміни перейти на вкладку «Додати набір параметрів». Після редагування кликати «Зберегти набір параметрів». Після збереження не забудьте експортувати власний набір параметрів і покласти скрипт в надійне місце. Наше хмара тегів зараз виглядає так:
Реалізуємо висновок хмари тегів в modx revolution, інструкції

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

Ось приблизний варіант стилів, під свій сайт підберете самі. Дивимося що вийшло.

Реалізуємо висновок хмари тегів в modx revolution, інструкції

У розділі: «Вміст ресурсу», створеної сторінки поміщаємо виклик сниппета # 91; # 91; getResourcesTag # 93; # 93; .
Давайте розберемо використані параметри.
  • # 91; # 91;! GetResourcesTag? # 93; # 93; - Чи не Кешована виклик сниппета.
  • parents = # 96; 0 # 96; - Пошук по всьому сайту, за замовчуванням # 96; поточний ресурс # 96 ;.
  • tpl = # 96; tag_result # 96; - Підключаємо чанк з шаблоном виведення результату, трохи нижче ми його створимо.
  • toPlaceholder = # 96; result # 96; - Призначаємо плейсхолдер # 91; # 91; + results # 93; # 93 ;, куди будуть виводиться результати.
  • showHidden = # 96; 1 # 96; - Показувати ресурси приховані від меню, за умовчанням # 96; 0 # 96 ;.
  • limit = # 96; 50 # 96; - Обмежити кількість показуються ресурсів на сторінці, за замовчуванням # 96; 5 # 96 ;.
  • hideContainers = # 96; true # 96; - Чи не показувати ресурси-контейнери, за замовчуванням # 96; 0 # 96;
Сподіваюся зрозуміло, результати запиту будуть виводиться маркованих списком. Кожен рядок формувати буде чанк tag_result. Код чанка tag_result:
Я не ставив завдання з барвистою сторінкою. Тому все просто. Повну документацію по сніпетів можна подивитися тут.

На цьому все, сподіваюся пост був корисний. Буду радий на ваші відгуки.

Підкажіть будь ласка як вирішити таку проблему: Зробив TV для тегів. Тип введення «Список (множинний вибір)». Призначив можливі значення «tag1 || tag2» .У параметрах виведення: тип виведення «Роздільник», роздільник ",". Зараз в метаданих поста теги виводяться правильно Якщо тегів у поста кілька то виводиться через кому, і посилання теж працюють правільно.Но в хмарі тегів, якщо є пости з декількома тегами, множинні теги виводяться так: «tag1 || tag2» .Як це виправити?

Важко ось так щось сказати суттєве. Можу припустити наступне: Можливі значення в параметрах введення записуються таким чином елемент == значення || елемент == значення || елемент == значення

Схожі статті