Правильная пагинация для MaxSite CMS

MaxSite CMS – прекрасная система управления контентом сайта. Однако она молода и имеет некоторые возрастные недостатки, «угри», если угодно.

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

Разделение материалов на страницы реализовано средствами нескольких плагинов, ни один из которых не устраивал меня полностью.

Добавление от 8 июля 2010 г.
Плагин модифицирован. Теперь многоточия не выводятся между соседними страницами (то есть, не встречается вывод «1 … 2 3 4»).

Что есть на данный момент

1. Pagination – плагин от Макса (создатель MaxSite CMS). Выводит пагинацию вида «Первая предыдущая | 1 2 3 4 …. 7 | следующая последняя». И Все бы хорошо, но… Критика и пояснения — ниже.
   Именно на основании этого плагина я сделал свой, «идеальный».
2. Pagination2 – так же, от Макса, выводит пагинацию вида «Раньше | Позже».
3. Paginator 3000 – плагин от DRiVER. Просто не работает ни на одном из моих блогов (MaxSite 0.36, Paginator 1.2).

Плагин Pagination

Входит в дистрибутив MaxSite CMS, но, в связи с некоторыми особенностями, не соответствует моим высоким требованиям.

Критика

Результатом работы плагина Pagination при настройках «по умолчанию» является вывод пагинации следующего вида:

Первая · предыдущая |  1 ... 8 · 9 ·  10 · 11 ... 17  | следующая · последняя

Видна асимметрия: справа от номера активной страницы одна ссылка на смежную страницы, слева – две. Количество ссылок вокруг активной страницы настраивается, но одинаковым с обеих сторон оно будет только если задать в настройках «4 ссылки».

Неприятной особенностью является использование символьных разделителей между страницами и текстовыми ссылками. Код фрагмента выглядит так:

<div class="pagination">
	<a class="pagination-first" href="#">Первая</a> · 
	<a class="pagination-prev" href="#">предыдущая</a> |  
	<a class="pagination-start" href="#">1</a> 
	... 
	<a href="#">8</a> · 
	<a href="#">9</a> ·  
	<strong>10</strong> · 
	<a href="#">11</a> 
	... 
	<a class="pagination-end" href="#">17</a>  | 
	<a class="pagination-next" href="#">следующая</a> · 
	<a class="pagination-last" href="#">последняя</a>
</div>

Какие именно разделители использовать – настраиваемо, но «троеточие» между по бокам от крайних цифр останется таковым в любом случае.

Существуют и другие недостатки. Если по пунктам:

1. Плагин проверяет тип данных для корректного построения ссылок наподобие site.ru/tag/Некая+метка/next/4, где «tag» — тип данных. Для предопределенных типов данных работает прекрасно, но стоит создать страницу (скажем, «type/best.php») с неизвестным системе типом, как при формировании пагинации на ней получим ссылки типа site.ru/page_404/best/next/3, где «page_404» — определенный системой тип данных.
   Иначе говоря, с «неродными» типами данных плагин не работает.
2. Количество ссылок по бокам активной страницы различно и колеблется в зависимости от заданного в настройках диапазона.
3. При положении [номер активной страницы] – [диапазон] имеем пагинацию вида: 1…1 · 2 · 3… (ссылка на первую страницу дублируется).
4. При нахождении на первой или последней странице, отсутствует компенсация количества ссылок с возможной стороны (задано 6 ссылок, но при нахождении на первой странице будут выведены только три).
5. Используется символьное разделение ссылок, частично ненастраиваемое (стилизация через CSS ограничена).
6. Не очень понятно, зачем выводить ссылки «первая» и «последняя», если цифровые ссылки на эти страницы присутствуют всегда.

Требования к плагину

Понятно, что при выборе (чего угодно) нужно сформулировать требования. Мои требования к плагину пагинации таковы:

1. Удобство использования (юзабилити)
2. Настраиваемость
3. Рациональное теговое оформление (для удобства стилизации)

Модифицированный мной плагин

Скорректировав все недостатки оригинала, я добавил необходимое теговое оформление и еще пару мелочей. особенности плагина:

• Основан на оригинальном Pagination.
• Выводит постраничную навигацию вида «Первая ← предыдущая 1 2 3 4…7 следующая → последняя».
• В настройках указывается количество цифровых ссылок с каждой стороны от активной страницы, а не общее, как в оригинале.
• Если с одной из сторон от активной страницы ссылок «не хватает», то с другой стороны их будет выведено больше.
  К примеру, в настройках указано выводить по три ссылки с каждой стороны от активной страницы, а активной является вторая, будет выведено: «первая ← предыдущая 1 2 3 4 5 6 7… 43 следующая → последняя» (слева от активной страницы возможна только одна цифровая ссылка, справа выведены не три, а 3 + 2=5 ссылок).
• Если пагинация не нужна (единственная страница), она не выводится.
• Ссылки «Первая» и «предыдущая» не выводятся на первой странице, а «следующая» и «последняя» – на последней.
• Теговое оформление позволяет любую стилизацию средствами CSS.
  Выводимый код имеет вид:

  <div class="pagination_mod">
  	<span style="display: none;" class="pag-prev-text">Страницы: </span> 
  	<span class="pag-left">
  		<a class="pag-first" href="#">первая</a> 
  		<a class="pag-prev" href="#"><big>←</big> предыдущая</a> 
  	</span>
  	<span class="pag-list"> 
  		<a class="pag-start" href="#">1</a> 
  		<span>...</span> 
  		<a href="#">3</a> 
  		<a href="#">4</a> 
  		<a href="#">5</a>  
  		<strong>6</strong> 
  		<a href="#">7</a> 
  		<a href="#">8</a> 
  		<a href="#">9</a> 
  		<span>...</span> 
  		<a class="pag-end" href="#">43</a> 
  	</span>
  	<span class="pag-right"> 
  		<a class="pag-next" href="#">следующая <big>→</big></a> 
  		<a class="pag-last" href="#">последняя</a>
  	</span>
  </div>

  К примеру, в моем фотоблоге пагинация имеет вид:
• Перед текстом пагинации выводится скрытый элемент (содержимое настраивается). Сделано для случаев использования индивидуальных css‑файлов (мобильные устройства).

Установка

Распаковать архив в application\maxsite\plugins\, активировать в административной части сайта, настроить по вкусу.

Бонус

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

• Количество ссылок: 3
• Текст перед пагинацией: Страницы
• Текст для ссылки «Первая»: первая
• Текст для ссылки «предыдущая»: <big>←</big> предыдущая
• Текст для ссылки «следующая»: следующая <big>→</big>
• Текст для ссылки «последняя»: последняя
• Разделитель между страницами: [пробел]
• Разделитель между блоком страниц и текстовыми ссылками: [пробел]

И добавить в файл стилей следующий код:

/* pagination */
.pagination_mod {margin:.5em 0 0; height:4.5em; text-align:center}
.pagination_mod a {border:0}
.pag-list a, .pag-list strong {padding:.15em; width:1.2em; text-align:center; display:inline-block; border:1px transparent solid;}
.pag-list a:hover, .pag-list a:active, .pag-list strong {font-weight:normal; border:1px gray solid}
.pagination_mod span {position:relative}
.pag-left {margin-right:.8em; height:4.5em}
.pag-right {margin-left:.8em; height:4.5em}
a.pag-first, a.pag-last {position:absolute; top:2.2em; font-size:.9em; padding:0 .2em}
a.pag-last {left:0}
a.pag-first {right:0}
*+html a.pag-first, *+html a.pag-last {top:2.8em} /* for ie7 */
*|html[xmlns*=""] a.pag-first, *|html[xmlns*=""] a.pag-last {display:none!important} /* for opera */

Заключение

Обо всех проблемах работы плагина прошу писать в комментариях к этой записи.

18 декабря 2009
Категория: Web–разработка
Метки: MaxSite CMS, плагин
Комментировать ↓