Работа с CMS NetCat. Урок 19. Навигация на сайте

В сегодняшнем уроке мы разберём такую большую тему как навигация на сайте. Что будет рассмотрено:

• меню на сайте;
• карта сайта;
• хлебные крошки (путь по сайту);
• постраничная навигация.

Начнём по порядку.

Меню на сайте

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

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

Основа отображения меню (внешнего вида, функционала) формируется в шаблонах вывода навигации.

Рис.1 — Шаблоны вывода навигации

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

• prefix – предшествует списку выводимых объектов. Например, в нем можно открыть таблицу.
• suffix – идет после списка выводимых объектов. Например, в нем можно закрыть таблицу.
• active – выводит активный элемент, одна его ссылка (%URL) не совпадает с адресом текущей страницы. Например, мы находимся в полном выводе «Новости».
• active_link – выводит активный элемент, и его ссылка (%URL) совпадает с адресом текущей страницы. Например, мы находимся на странице списка новостей.
• unactive – выводит неактивный элемент.
• divider – разделитель между элементами списка навигации, например, Раздел 1 / Раздел 2. / - это разделитель.
• sortby – позволяет сортировать выводы списка в нужном порядке. Чаще всего этот элемент не указывается, тогда список сортируется по приоритету (Priority).
• nocache — флаг, позволяющий запретить кэширование (при наличии модуля «Кэширование»).

Используя любые из этих индексов можно сформировать простой массив данных для формирования меню следующего соержания:

$top_menu['prefix'] = "<ul>";
$top_menu['suffix'] = "</ul>";
$top_menu['active'] = "<li>%NAME</li>";
$top_menu['unactive'] = "<li><a href='%URL'>%NAME</a></li>";

Имя массива вы можете задавать произвольно. В данном примере используется имя $top_menu, что наглядно показывает в какой части сайта осуществляется вывод.

Давайте на простом примере разберём схему несложного сайта. Допустим что карта сайта у вас выглядит примерно таким образом:

Рис.2 — Шаблоны вывода навигации

После того, как мы добавим массив $top_menu в шаблон вывода навигации, а в коде шаблона ( в месте вывода меню ) пропишем строку:

s_browse_sub(0,$top_menu)

на сайте отобразится ваше меню:

Рис.3 — Отображение меню на сайте

С формированием простого массива разобрались, теперь давайте разберём функции, которые осуществляют вывод меню на сайте. Функций для вывода меню есть две:

1. Используя функцию s_browse_sub() ( в примере выше ). Данная функция может принимать 4 параметра: 2 обязательных и 2 необязательных.

s_browse_sub  (int $parent_sub, $template, $ignore_check = 0, $where_cond = '' )

Функция выводит список подразделов раздела $parent_sub в соответствии с шаблоном $template. C помощью флага $ignore_check можно игнорировать вывод только включённых разделов ( если $ignore_check равен 1, то выведутся все разделы ).

С помощью $where_cond можно дополнить запрос в секции WHERE.

$parent_sub — это целое число. В данный параметр записывается ID необходимого раздела. В примере выше этот параметр равен нулю, что говорит нам о том, что мы использовали корневой раздел для вывода меню. В том случае, если мы заменим 0 на 83 ( ID раздела «Наши услуги», Рис. 2 ), то увидим соответствующие изменения:

Рис.4 — Отображение меню на сайте

$template — имя массива. В нашем случае следует писать $top_menu.

$ignore_check = 0/1. Так как разделы в НетКэте можно делать скрытыми/выключенными ( на Рис.2 выключенные разделы выделены серым цветом ), с помощью данного параметра можно проигнорировать их текущее состояние, При установке значения в 1 будут выведены все пункты карты сайта указанного раздела.

$where_cond = ''. Очень удобный и нужный параметр задащий условие вывода. На практике его можно использовать в тех случаях, когда вы выводите меню нулевого уровня в нескольких местах. При этом вам нужно дать возможность редактору сайта самостоятельно выбирать где и какое меню выводить. Решить данную задачу можно решить следующим образом:

• в системных таблицах, пункт «Разделы» создаёте новое поле, типа логическая переменная, обязательное для заполнения. Полю задаёте понятные название и описание.
  
  
  Рис.5 — Настройка нового поля
  обратите внимание на то, что поле имеет название showtopmenu. Таких полей можно создать несколько. Теперь в настройке раздела вам будут доступны созданные поля:
  
  
  Рис.6 — Опции по включению меню
  
• в месте вывода меню прописываете вызов функции:
  
  

  s_browse_sub (0, $top_menu, 0, $where_cond = "showtopmenu='1'")

  
  

То есть здесь мы дописали необходимое условие. Дословно можно объяснить так: Если пункт показа в верхнем меню включен, меню выводится. Третий параметр при этом нужно указывать в состояние 0 или 1.

2. Есть ещё одна функция для вывода меню:

s_browse_level ( int $level, $template, $ignore_check = 0, $where_cond = '' )

Данная функция выводит список разделов уровня $level в соответствии с шаблоном $template. Обратите внимание, что нумерация уровней начинается с нуля, т.е. Для вывода списка разделов верхнего уровня первый параметр функции должна быть равен нулю.

На практике это выглядит следующим образом:

1. В шаблон вывода навигации прописываете:

$browse_sub[0]['prefix'] = "<ul>";
$browse_sub[0]['suffix'] = "</ul>";
$browse_sub[0]['active'] = "<li><b><a href=%URL>%NAME</b></a>".s_browse_level(1,$browse_sub[1])."</li>";
$browse_sub[0]['active_link'] = "<li><b>%NAME</b>".s_browse_level(1,$browse_sub[1])."</li>";
$browse_sub[0]['unactive'] = "<li><a href=%URL>%NAME</a></li>";
$browse_sub[0]['divider'] = "";

2. В месте вывода в шаблоне сайта прописываете:

s_browse_level(0,$browse_sub[0])

Дословно: выводить все разделы нулевого уровня в соответствии с шаблоном $browse_sub[0]. Как вы видите в шаблоне вывода присутствует вызов следующего первого уровня:

s_browse_level(1,$browse_sub[1])

В этом случае шаблон вывода навигации будет выглядеть как:

$browse_sub[1]['prefix'] = "<ul>";
$browse_sub[1]['suffix'] = "</ul>";
и т.д.

Таким образом реализуется многоуровневый вывод меню сайта, то есть последовательно описываются шаблоны вывода навигации, начиная с последнего. Например, у вас на сайте есть 3 уровня вложенности: корень — первый уровень — второй уровень. Вам нужно на сайте вывести горизонтальное меню с выпадающими пунктами. Во-первых, вы верстаете HTML-шаблон вывода. Во-вторых, прописываете шаблоны вывода навигации:

# Второй уровень
$browse_sub[2]['prefix'] = "<ul>";
$browse_sub[2]['suffix'] = "</ul>";
$browse_sub[2]['active'] = "<li><b><a href=%URL>%NAME</a></b>";
$browse_sub[2]['active_link'] = "<li><b>%NAME</b>";
$browse_sub[2]['unactive'] = "<li><a href=%URL>%NAME</a>";
$browse_sub[2]['divider'] = "";

# Первый уровень
$browse_sub[1]['prefix'] = "<ul>";
$browse_sub[1]['suffix'] = "</ul>";
$browse_sub[1]['active'] = "<li><b><a href=%URL>%NAME</b></a>".s_browse_level(2,$browse_sub[2]);
$browse_sub[1]['active_link'] = "<li><b>%NAME</b>".s_browse_level(2,$browse_sub[2]);
$browse_sub[1]['unactive'] = "<li><a href=%URL>%NAME</a>";
$browse_sub[1]['divider'] = "";

# Нулевой уровень
$browse_sub[0]['prefix'] = "<ul>";
$browse_sub[0]['suffix'] = "</ul>";
$browse_sub[0]['active'] = "<li><b><a href=%URL>%NAME</b></a>".s_browse_level(1,$browse_sub[1]);
$browse_sub[0]['active_link'] = "<li><b>%NAME</b>".s_browse_level(1,$browse_sub[1]);
$browse_sub[0]['unactive'] = "<li><a href=%URL>%NAME</a>";
$browse_sub[0]['divider'] = "";

В-третьих, в коде сайта прописываем вывод меню:

s_browse_level(0,$browse_sub[0])

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

В шаблона вывода навигации есть возможность использовать макропеременные:

• %NAME — название элемента (раздела)
• %URL — адрес к текущему элементу (разделу)
• %PARENT_SUB — номер родительского раздела (только для разделов)
• %KEYWORD — ключевое слово раздела (только для разделов)
• %SUB — номер раздела (только для разделов)
• %COUNTER — номер выводимого элемента в списке (начиная с нуля)

Если вам не хватает данных макропеременных, вы можете использовать внутренний массив $data[]. Он содержит все данные из таблицы Subdivision о текущей выводимой функции в разделе.
Например:

$browse_sub[0]['unactive'] = "<li><a href=".$data[$i][Hidden_URL].">".$data[$i][Subdivision_Name]."</a></li>";

равносильно записи:

$browse_sub[0]['unactive'] = "<li><a href=%URL>%NAME</a></li>";

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

$browse_sub[0]['unactive'] = "<li><a href=%URL>%NAME</a> ".listQuery("SELECT count(Message_ID) as count
FROM MessageXX WHERE Catalogue_ID=$catalogue AND Subdivision_ID=".$data[$i][Subdivision_ID],"\$data[count]")."</li>";

Обратите внимание на слэши перед знаками $ и ", они обязательны, поскольку обработка этого массива должна осуществляться внутри функции, а не на этапе обработки макета дизайна.

Карта сайта

Список всех разделов (карты сайта) на самом сайте выводится так же весьма просто. Для этого карты сайта нужно создать новый раздел, к нему подключить макед дизайна следующего содержания:

• в шаблон вывода навигации прописать:
  
  

  $browse_map['prefix'] = "<ul>";
  $browse_map['unactive'] = "<li><a href=%URL>%NAME</a>".s_browse_sub($data[$i][Subdivision_ID],$browse_template)."";
  $browse_map['active'] = "<li><a href=%URL>%NAME</a>".s_browse_sub($data[$i][Subdivision_ID],$browse_template)."";
  $browse_map['suffix'] = "</ul>";

  
  
• в место вывода карты прописать вызов функции:
  
  

  s_browse_sub(0,$browse_map)

  
  

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

Значения параметров функции s_browse_sub были описаны выше.

Хлебные крошки (путь по сайту)

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

Главная страница → Раздел → Подраздел → Текущая страница

Для вывода хлебных крошек на сайте под управлением CMS NetCat нужно использовать фунцию s_browse_path ( $template ) или s_browse_path_range ( $from, $to, $template ). Обе функци выводит навигацию типа «хлебные крошки» (путь до текущей страницы) в соответствии с шаблоном $template.

Первая функция выводит путь полностью, а вторая выводит только путь указанного диапазона (минимальное значение $from – (-1), максимальное значение $to - $sub_level_count).

Например, использование фукции ".s_browse_path_range (-1,$sub_level_count-1,$browse_global)." приведёт к тому, что будут выведены все разделы, кроме корневого. Шаблон вывода нафигации может выглядеть следующим образом:

$browse_global['suffix'] = " ↓ ";
$browse_global['active'] = "<b>%NAME</b> ";
$browse_global['unactive'] = "<a href='%URL'>%NAME</a> &rarr; ";

Постраничная навигация

Постраничная навигация необходима для разбиения больших списков объектов на списки поменьше с возможностью переходов по страницам. Для отображения блока навигации используется массив $browse_msg[], значения которого указываются в настройках макета дизайна. Макропеременная %PAGE обозначает номер страницы, макропеременная %URL – ссылку на соответствующие страницы. Возможно также использование макропеременных %FROM и %TO, соответственно обозначающих номера начального и конечного объекта на странице

$browse_msg['prefix'] = ""; // Префикс перед блоком навигации
$browse_msg['suffix'] = ""; // Суффикс после блока навигации
$browse_msg['active'] = "%PAGE"; // Формат вывода текущей страницы
$browse_msg['unactive'] = "<a href=%URL>%PAGE</a>"; // Формат вывода ссылок
$browse_msg['divider'] = " "; // Разделитель между ссылками

и далее, прописать вызов функции вывода в нужном месте:

browse_messages ( $cc_env, $range )

Массив $cc_env является неизменным параметром данной функции и содержит переменные окружения текущего компонента раздела. Параметр $range определяет количество выводимых страниц. Вместо этой переменной обычно пишется число.

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

• $prevLink — ссылка на предыдущую страницу в листинге шаблона (если текущее положение в списке – его начало, то переменная пустая)
• $nextLink — ссылка на следующую страницу в листинге шаблона (если текущее положение в списке – его конец, то переменная пустая)
• $recNum — максимальное количество записей, выводимых в списке
• $totRows — общее количество записей в списке
• $begRow — номер записи (по порядку), с которой начинается листинг списка на данной странице
• $endRow — номер записи (по порядку), которой заканчивается листинг списка на данной странице

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

Новости $begRow - $endRow из $totRows ".opt($prevLink, "<a href=$prevLink>пред.</a>")." ".browse_messages($cc_env, 10)." ".opt($nextLink, "<a href=$nextLink>след.</a>")

На странице вы увидите примерно следующее:

Рис.7 — Вывод навигации

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

Настроить количество отображаемых объектов на одной странице можно в настройках компонента в заданном поле:

Рис.8 — Количество объектов на странице

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