В этой статье мы добавим AJAX пагинацию (порядковая нумерация страниц с возможностью перемещения по ним без перезагрузки страницы) и поиск по ключевым словам для блога нашего сайта на MODx Revo.
Вступление
Важное примечание: я заранее набросал простые стили на элементы сайта, которые мы сейчас добавим. При непосредственном создании сайта стили накидываются уже на структурированные элементы, сейчас мы обучаемся организации “скелета” и смотреть способы и навыки стилизации мы не будем. Из прошлых уроков мы уже знаем, как создавать разные структурные элементы страниц и что значат конструкции в квадратных скобках.
В прошлом уроке мы добавили систему блога с системой дополнительных полей (настройка каждой отдельной статьи), ниже будут полезные ссылки:
Создание шаблона для блога
Начнём мы с создания шаблона для главной страницы блога и страницы поиска по тегам. Он будет общий. Т.к. мы хотим, чтобы эти страницы принципиально не отличались друг от друга и у них будут общие элементы, что логично.
Назовём шаблон “Блог”, категория “Блог” и поместим туда содержание основного шаблона и нашего ресурса с одноименным названием:
<!DOCTYPE html>
<html lang="ru">
[[$head]]
<body>
[[$header]]
<main>
<h1>[[*pagetitle]]</h1>
<div class="navig-dop">
[[$navig-top]]
</div>
<section class="section-blog">
[[*content]]
</section>
</main>
[[$footer]]
[[$scripts]]
</body>
В ресурсе “Блог” оставим только вывод статей:
[[!pdoPage?
&element=`getResources`
&parents=`5`
&limit=`[[решетка3.tv.max-news]]`
&tpl=`news_output`
]]
Не забудем сменить шаблон для нашего ресурса “Блог”.
Добавление пагинации
Теперь мы добавим саму пагинацию по страницам, для этого модифицируем код только что созданного шаблона:
...
<h1>[[*pagetitle]]</h1>
<div class="navig-dop">
[[$navig-top]]
</div>
<section class="section-blog" id="tickets-wrapper">
<div id="tickets-rows">
[[*content]]
</div>
[[!+page.nav]]
</section>
...
Мы добавили id к нашей главной секции и к блоку, где будет выводиться результат работы сниппета.
Хорошо, шаблон мы подготовили, осталось изменить код в ресурсе “Блог”:
[[!pdoPage?
&element=`getResources`
&parents=`5`
&limit=`[[решетка3.tv.max-news]]`
&tpl=`news_output`
&ajax=`1`
]]
Просто включаем AJAX для этого сниппета.
Подключение скриптов
Теперь нам нужно подключить jquery, у меня под рукой есть версия 2.1.1 – она подойдёт. Создадим новую папку в директории нашего сайта “js” и закинем туда наш скрипт. После заходим в админку сайта и подключаем его, разместив следующий код в чанке “scripts”:
<script src="[[++site_url]]assets/components/js/jquery-2.1.1.js"></script>
После добавим скрипт, который позволит заработать нашей пагинации, но стоит заметить, что нам он нужен только для ресурса с id равным 5 и для будущего ресурса поиска по тегам – обернём скрипт в дополнительную конструкцию:
[[*id:is=`5` :or:if=`[[*id]]`:is=`id ресурса поиска`:then=`
<script>
if (window.history && history.pushState) { var JustLoaded = true; function loadPage(href) { var parent = $('решеткаtickets-wrapper'); parent.css({opacity: .3}); if (!href.match(/page=\d+/)) { href += href.match(/\?/) ? '&page=1' : '?page=1'; } $.get(href, function(response) { if (response && response['total']) { parent.find('решеткаtickets-rows').html(response['output']); parent.find('.pagination').html(response['pagination']); parent.css({opacity: 1}); } }, 'json'); } $(document).on('click', 'решеткаtickets-wrapper .pagination a', function(e) { e.preventDefault(); var href = $(this).prop('href'); history.pushState({href: href}, '', href); loadPage(href); JustLoaded = false; }); $(window).on('popstate', function(e) { if (!JustLoaded && e.originalEvent.state && e.originalEvent.state['href']) { loadPage(e.originalEvent.state['href']); } JustLoaded = false; }); history.replaceState({href: window.location.href}, ''); }
</script>
`]]
Хорошо, теперь наш скрипт будет работать только на нужном ресурсе. Зайдём в ресурс с настройками и установим лимит статей на “2”, а после зайдём на сайт и проверим, всё ли мы правильно сделали. Отлично, у нас появилась пагинация и при переключении страница не перезагружается – всё работает как надо.
Установка поиска по тегам
Теперь мы добавим поиск по тегам (ключевым словам), для начала мы установим дополнение “tagLister” через менеджер пакетов.
Создание TV
Теперь нужно создать TV (дополнительное поле) для статей, которое будет хранить в себе все теги: Имя – tags (дополнение заранее подготовлено к такому имени, хотите сменить или оно уже занято – нужно менять настройки дополнения), категория – блог, подпись – теги, параметры ввода – авто-метка, доступно для шаблонов – блог-пост.
Зайдём в каждую статью и укажем теги (для проверки корректности работы, мы добавим каждой статье уникальный тег и общий тег).
Модификация чанка вывода статей
Теги мы добавили, но где они будут отображаться? Нам нужно модифицировать код чанка “news_output”:
<article style="background-image:url('[[++site_url]][[#[[+id]].tv.a-img]]')">
<span class="a-date">[[#[[+id]].publishedon:strtotime:date=`%d.%m.%Y`]]</span>
<span class="a-avtor">[[#[[+id]].tv.a-avtor]]</span>
<h3>[[+pagetitle]]</h3>
<p>[[#[ [+id]].content:ellipsis=`100`]]</p>
<a href="[[++site_url]]blog/[[#[[+id]].alias]]" title="Читать - [[+pagetitle]]"></a>
<div class="tag">#
[[!tolinks?
&items=`[[#[[+id]].tv.tags]]`
&target=`id ресурса поиска`
&tpl=`tags_output`
]]
</div>
</article>
Сниппет tolinks выводит список тегов ресурса. Мы хотим, чтобы он выводил этот список в определённом виде, поэтому задаём tpl=`tags_output`. Создадим его и поместим туда следующий код, не забудем указать категорию “Блог”:
<span><a href="[[++site_url]][[решеткаid ресурса поиска.alias]]?tag=[[+item]]">[[+item]]</a></span>
Добавим облако тегов
Хорошо, теперь добавим облако тегов на страницу блога и на страницы статей, для этого дополним код этих шаблонов (поместим код сразу после блока с классом “navig-dop”):
<div class="navig-tag">
<h3>Поиск по решеткатегам</h3>
[[!tagLister?
&tv=`tags`
&target=`id ресурса поиска`
&limit=`15`
&tpl=`tag_output_mass`
&allTpl=`tag_output_mass`
]]
</div>
Сниппет tagLister выводит список всех используемых ресурсами тегов шаблоном, располагающимся в чанке “tag_output_mass”.
Создадим чанк “tag_output_mass”, категория – блог, следующее содержание:
<span><a href="[[++site_url]][[решеткаid ресурса поиска.alias]]?tag=[[+tag]]">[[+tag]]</a></span>
Создание страницы поиска по тегам
Мы сделали все, кроме самой страницы с поиском по тегам, создадим этот ресурс: шаблон – блог, опубликован, уберём галочку “использовать HTML-редактор”, псевдоним – tag, заголовок – поиск по тегам, в содержимое поместим следующий код:
[[!pdoPage?
&tvFilters=`tags==%[[!решеткаGET.tag]]%`
&element=`getResources`
&parents=`5`
&tpl=`news_output`
&hideContainers=`1`
&includeContent=`1`
&limit=`[[решетка3.tv.max-news]]`
&ajax=`1`
] ]
Стоит заметить, что мы используем pdoPage, а не предлагаемый дополнением сниппет, т.к. если мы будем использовать стандартный – пагинация встанет криво.
Сохраним и перейдём на наш сайт, нужно всё проверить. Для начала посмотрим отображаются ли теги в облаке и под каждой статьей, да, все отображается. Перейдём по какому ни будь тегу, отлично, нас перебросило на страницу поиска по тегам, и пагинация также работает с AJAX.
Заключение
Поздравляю, вы добавили AJAX пагинацию и поиск по тегам (ключевым словам) в блоге на MODx Revo. В следующем ролике мы сделаем большую галерею с изображениями и видео материалами с возможностью полномасштабного просмотра картинок.
Работать с MODx очень удобно и мы убедились в этом на практике, наш ролик по этой теме на YouTube занимает всего 8 минут. Мы и дальше будем продолжать делиться с вами полезной информацией, разумеется, её аналоги можно было найти в интернете и ранее, но мы постараемся сэкономить ваше время, чтобы вы могли уделить больше внимания самой разработке.
Вам нужно создать сайт или обновить его? - Не теряйте времени, обращайтесь к профессионалам!
Источник: Веб студия WITECH
