Инструкция по созданию сайта на MODx. Урок 13 — Постраничное разбиение новостной ленты

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

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

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

Постраничное разбиение новостной ленты

Для разбиения на страницы новостей нам понадобится в конструкцию вызова сниппета добавить следующие параметры:

&paginate —  параметр указывает, включить или отключить постраничное разбиение. Чтобы включить разбиение необходимо выставить значение 1.

&display — параметр указывает, сколько новостей выводить на странице. Так как сейчас у нас создано 5 новостей, то, чтобы продемонстрировать разбиение, выставим значение меньше 5, например, 2 новости.

Для реализации навигации между страницами, будем использовать плэйсхолдеры Ditto:

Чтобы постраничное разбиение отображалось правильно, не забудьте в настройках страницы, на которой будет выводиться лента новостей, отменить кэширование. Для этого снимите галочку «Кэшируемый» на вкладке «Настройка страницы» при редактировании ресурса «Новости».

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

[[Ditto? &tpl=`news-article` &dateSource = `pub_date` &dateFormat=`%d.%m.%Y` &paginate=`1` &display=`2` ]]
Страницы: [+previous+][+pages+][+next+]

Результатом этой конструкции должна стать разбитая на страницы лента новостей:

Текст ссылок «Далее» и «Назад» вы можете изменить в языковом файле russian-UTF8.inc.php сниппета Ditto, который находится в следующей директории:

assets\snippets\ditto\lang\

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

[[Ditto? &tpl=`news-article` &dateSource = `pub_date` &dateFormat=`%d.%m.%Y` &paginate=`1` &display=`2` ]]
<div class="pagination">
Страницы: [+previous+][+pages+][+next+]
</div>

Исходный HTML код ссылок навигации при этом будет следующим:

<div class="pagination"> 
Страницы: 
<a href='/news.html?start=0' class='ditto_previous_link'>< назад</a>
<a class='ditto_page' href='/news.html?start=0'>1</a>
<span class='ditto_currentpage'>2</span>
<a class='ditto_page' href='/news.html?start=4'>3</a> 
<a href='/news.html?start=4' class='ditto_next_link'>далее > </a> 
</div>

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

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

.pagination a {text-decoration:underline;} /*подчеркивание ссылок*/
.pagination a:hover {text-decoration:none;} /*убрать подчеркивание ссылок при наведении*/
.pagination .ditto_currentpage {color:#fff; background-color:#B2C629; border:1px solid #6f7b1a; padding: 1px 3px; margin:2px;  font-weight:bold; } /*оформление текущей страницы: цвет текста, цвет фона, цвет и ширина границы, размер отступов, текст жирным шрифтом*/
.pagination .ditto_previous_link, .pagination .ditto_next_link{margin:0 10px;} /*отступы для ссылок «далее» и «назад»*/
.pagination .ditto_page{ padding: 2px 5px;}/* отступы для номеров страниц*/

Отправляемся на страницу «Новости», чтобы посмотреть, что же получилось после добавления стилей.

А получилось у нас вот что:

При этом вы можете изменять цвета, отступы и все CSS стили, как вам только вздумается. Я лишь привел один из возможных вариантов оформления.

Теперь у вас уже есть лента новостей с постраничным разбиением. Но у представленного метода есть один недостаток, который проявляется, когда страниц будет уж слишком много. Плэйсхолдер [+pages+] будет выводить все номера страниц. Если их будет очень много, то номера страниц не поместятся в один ряд, что не всегда согласуется с задуманным дизайном. Для того чтобы исправить это, мы применим сниппет MODx, который будет выводить номера страниц Ditto, и в том случае, когда число страниц превышает определенное количество — разрывать список многоточием "...".

Создаем постраничную навигацию с разрываемым списком страниц:

Для создания нового сниппета отправляемся: Элементы → Управление элементами → Сниппеты → Новый сниппет.

В поле «Название сниппета» вводим: dittoSplitPagination.

В поле «Описание» вводим любое понятное для вас описание, например: для разбиения на страницы Ditto.

В область «Код сниппета (php)» помещаем следующий Php-код:

<?php
// Snippet: splitPagination
// Must be placed immediately following a Ditto call
// Based on the function written by Aaron Hall, evilwalrus.org
if (!function_exists("generatePagination")) {
function generatePagination($curPage, $totResults, $resultsPerPage)
{
        $totPages = ceil($totResults / $resultsPerPage);
        
        $pagesBefore = $curPage - 1;
        $pagesAfter = $totPages - $curPage;
        
        $tabArr = array();
        
        if($totPages > 15) {
                
                if($pagesBefore > 7) {
                        $tabArr = array(1,2,0);
                        
                        if($pagesAfter > 7)
                        {
                                for($i=($curPage-(4)); $i<$curPage; $i++) { $tabArr[] = $i; }
                        } else {
                                for($i=($totPages-11); $i<$curPage; $i++) { $tabArr[] = $i; }
                        }
                } else {
                        for($i=1; $i<$curPage; $i++) { $tabArr[] = $i; }
                }
                
                $tabArr[] = $curPage;
                
                if($pagesAfter > 7) {
                        if($pagesBefore > 7) {                          
                                for($i=($curPage+1); $i<=$curPage+4; $i++) { $tabArr[] = $i; }
                        } else {
                                for($i=($curPage+1); $i<13; $i++) { $tabArr[] = $i; }
                        }
                        $tabArr[] = 0;
                        $tabArr[] = $totPages-1;
                        $tabArr[] = $totPages;
                } else {
                        for($i=($curPage+1); $i<=$totPages; $i++) { $tabArr[] = $i; }
                }
                
        } else {
                for($i=1;$i<=$totPages;$i++) { $tabArr[] = $i; }
        }
                        
        return $tabArr;
        
}
}
$id = isset($id) ? $id.'_' : '';
$total = isset($total) ? $total : $modx->getPlaceholder($id."total");
$start = isset($start) ? $start : $modx->getPlaceholder($id."start");
$display = isset($display) ? $display : $modx->getPlaceholder($id."perPage");
$currentPage = isset($currentPage) ? $currentPage : $modx->getPlaceholder($id."current");
$landing = isset($tagDocumentID) ? $tagDocumentID : $modx->documentObject['id'];
if ($total == 0 || $display==0) {
        return false;
}
$page = ceil($start/$display);
$return = isset($return) ? $return : 0;
$paginationArray = generatePagination($page, $total, $display);
$ph = "";
$cInc = $_GET[$id.'start'];
foreach($paginationArray as $page) {
        $inc = ($page-1)*$display;
        if($page == 0) {
                $ph .= "..."; // print an elipse, representing pages that aren't displayed
        } else if ($inc==$cInc) {
                $ph .= "<span class=\"ditto_currentpage\">$page</span>";                
        } else {
                $ph .= "<a class=\"ditto_page\" href='".ditto::buildURL("start=".$inc,$landing,$id)."'>$page</a>";
        }
        

}
$modx->setPlaceholder($id."splitPages",$ph);
if ($return) return $ph;
?>

На рисунке ниже показано, как выглядят заполненные поля при создании сниппета dittoSplitPagination.

После сохранения отправляемся редактировать вызов сниппета Ditto в чанке newsline. Вызов сниппета оставляем без изменений, а вот вывод ссылок навигации мы исправим: добавляем вызов только что созданного сниппета dittoSplitPagination, а плэйсхолдер Ditto [+pages+] заменяем на [+splitPages+].

После этого конструкция в чанке newsline примет следующий вид:

[[Ditto? &tpl=`news-article` &dateSource = `pub_date` &dateFormat=`%d.%m.%Y` &paginate=`1` &display=`2` ]]
<div class="pagination">
Страницы: [[dittoSplitPagination]][+previous+][+splitPages+][+next+]
</div>

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

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

На этом работу с новостной лентой мы заканчиваем. Единственное, что бы я вам посоветовал сделать, это выставить значение параметра &display, для того чтобы видеть разбиение мы устанавливали этот параметр в 2. Сейчас, когда мы прописали все стили, и увидели, что навигация отображается так, как нам хочется. Выставим этот параметр на десяточку. Чтобы на каждой странице помещалось по 10 новостей.

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

Работа с модулем «Doc Manager»

И в завершение давайте сделаем так, чтобы наши созданные новости не показывались в меню, ведь сейчас они в виде выпадающего списка отображаются в главном меню сайта, нам они в меню не нужны. Для того чтобы убрать названия новостей из меню, мы при редактировании ресурсов с новостью должны убрать галочку «Показывать в меню» либо можем воспользоваться очень удобным встроенным модулем «Doc manager» для массового изменения свойств созданных ресурсов.

Использовать «Doc manager» очень удобно, когда необходимо изменить настройки нескольких страниц одновременно. Чтобы с помощью модуля отменить показ в меню страниц отправляемся на вкладку: Модули → Doc Manager → Другие свойства. Из выпадающего списка «Доступные свойства» выбираем пункт «Показывать/Не показывать в меню», после чего ниже устанавливаем чекбокс «Не показывать в меню». Затем следует указать диапазон ID ресурсов, которые мы хотим отменить для показа. В моем случае это ресурсы с ID от 11 до 15. У вас эти идентификаторы могут отличаться, чтобы точно определить, посмотрите в дереве документов, какими ID обладают ваши страницы с новостями. После указания ID ресурсов жмите кнопку «Отправить». Внешний вид вкладки «Другие свойства» модуля Doc manager показан на рисунке ниже:

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

Измененные чанки, сниппеты и файлы сегодняшнего урока:

Все описанные в уроке действия вы можете посмотреть в видео к уроку.

Видео урок по организации постраничного разбиения ленты новостей в MODx

Автор: Ефимов Виктор

Вы можете также посмотреть другие уроки по созданию сайта на MODx: