Профиль и настройки
Заказы Лицензии Техническая поддержка Выйти
Регистрация
Регистрируясь, вы подтверждаете свое согласие с соглашением об использовании персональных данных.
Восстановление пароля
Вход
Поддержка

Навигация на сайте

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

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

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

Меню на сайте

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

Как происходит вывод меню на сайте под управлением 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 в шаблон вывода навигации, а в коде шаблона ( в месте вывода меню ) пропишем строку:

nc_browse_sub(0,$top_menu)

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


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

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

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

nc_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 — Опции по включению меню

  • в месте вывода меню прописываете вызов функции: 
    nc_browse_sub (0, $top_menu, 0, $where_cond = "showtopmenu='1'")

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

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

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

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

Пример 1. Вам нужно вывести список разделов и чтобы у текущего раздела показывался список подразделов:

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

$browse_sub[1]['prefix']      = "<ul>"; 
$browse_sub[1]['suffix']      = "</ul>"; 
$browse_sub[1]['active']      = "<li><b><a href='%URL'>%NAME</b></a></li>"; 
$browse_sub[1]['active_link'] = "<li><b>%NAME</b></li>"; 
$browse_sub[1]['unactive']    = "<li><a href='%URL'>%NAME</a></li>"; 
$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>".nc_browse_level(1,$browse_sub[1])."</li>";
$browse_sub[0]['active_link'] = "<li><b>%NAME</b>".nc_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]. Как вы видите при формировании шаблона вывода нулевого уровня в него сразу добавляется код первого уровня текущего раздела, который будет видно только у активного(текущего раздела):

nc_browse_level(1,$browse_sub[1])

Как видно, шаблон $browse_sub[1] должен быть объявлен выше, чтобы корректно отрабатывал код nc_browse_level(1,$browse_sub[1]).

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

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

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

nc_browse_level(0,$browse_sub)

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

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

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

Использование s_browse_

Если вам не хватает данных макропеременных, или вы хотите использовать PHP условия, вы можете использовать функции с префиксом s_browse_, в которых доступен внутренний массив $data[] и выполняется eval() шаблонов. Массив $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> \".\$db->get_var(\"SELECT COUNT(Message_ID)
  FROM MessageXX WHERE Subdivision_ID=\".\$data[\$i][Subdivision_ID]).\"</li>";

где XX - номер компонента подключенного в разделах.

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

Важно: в функциях s_browse_ недоступна макропеременная %NEXT_LEVEL.

Важно:  функции s_browse_ не выбирают автоматически уровень шаблона как это делается в %NEXT_LEVEL, поэтому необходимо при вызове функции передавать один конкретный уровень шаблона, например

s_browse_level(0,$browse_sub[0])

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

$left_menu[0]['active']     = "<li>%NAME \".s_browse_sub(\$data[\$i][Subdivision_ID],\$left_menu[1]).\"</li>\n";

Также шаблон следующего уровня $left_menu1[1] не будет доступен в области видимости функции s_browse_sub, поэтому нужно получить к нему доступ через глобализацию:

$left_menu[0]['prefix'] = "\"; global \$left_menu; \$result.=\"<ul>";

Полный пример на 3 уровня вложенности:

$left_menu[0]['prefix'] = "\"; global \$left_menu; \$result.=\"<ul>";
$left_menu[0]['suffix'] = "</ul>";
$left_menu[0]['active']     = "<li>%NAME \".s_browse_sub(\$data[\$i][Subdivision_ID],\$left_menu[1]).\"</li>\n";
$left_menu[0]['unactive']   = "<li><a href='%URL' title='%NAME'>%NAME</a>\".s_browse_sub(\$data[\$i][Subdivision_ID],\$left_menu[1]).\"</li>\n";

$left_menu[1]['prefix'] = "\"; global \$left_menu; \$result.=\" <ul>";
$left_menu[1]['suffix'] = "</ul>";
$left_menu[1]['active']     = "<li>%NAME\".s_browse_sub(\$data[\$i][Subdivision_ID],\$left_menu[2]).\"</li>\n";
$left_menu[1]['unactive']   = "<li ><a href='%URL' title='%NAME'>%NAME</a>\".s_browse_sub(\$data[\$i][Subdivision_ID],\$left_menu[2]).\"</li>\n";

$left_menu[2]['prefix'] = "<ul>";
$left_menu[2]['suffix'] = "</ul>";
$left_menu[2]['active'] =   "<li>%NAME</li>\n";
$left_menu[2]['unactive'] = "<li><a  href='%URL' title='%NAME'>%NAME</a></li>\n";         

echo s_browse_sub(0, $left_menu[0]);

Важно: в случае если шаблон навигации описывается в шаблоне компонента(префикс/системные настройки), то необходимо дополнительно вывести массив шаблон из области видимости компонента в общую:

global $left_menu;

Карта сайта

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

  • в шаблон вывода навигации прописать: 
    $browse_map['prefix']   = "<ul>";
$browse_map['unactive'] = "<li><a href=%URL>%NAME</a>\".s_browse_sub(\$data[\$i][Subdivision_ID],\$browse_template).\"<li>";
$browse_map['active']   = "<li><a href=%URL>%NAME</a>\".s_browse_sub(\$data[\$i][Subdivision_ID],\$browse_template).\"</li>";
$browse_map['suffix']   = "</ul>";
  • в место вывода карты прописать вызов функции: 
    s_browse_sub(0,$browse_map)

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

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

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

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

Для вывода хлебных крошек на сайте под управлением 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']   = " &darr; ";
$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 — Количество объектов на странице

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

Описание проекта
Сохранить и свернуть