Навигация по сайту и ее реализация средствами Cotonti Siena

Настройка блока навигации является важным этапом в создании сайта любой тематики и сложности. Реализовать ее можно по-разному – от простого “ручного” способа до сложного автоматизированного с помощью плагина. Балансировать необходимо еще и вокруг таких факторов, как удобство и скорости загрузки. Ранее мы уже разбирались с теоретическими моментами навигации. Сегодня разберемся конкретно и подробно.

Типовые элементы навигации сайта

Как правило, навигация среднестатистического сайта начинается с кнопки “Главная”. Уточнять что это страница не стоит. Понятно, что это не раздел.

В качестве завершающего элемента разработчики чаще всего используют ссылку на страницу контактов или обратной связи. Здесь уже возможны варианты, поскольку коммерческие сайты часто могут предусматривать древовидную структуру филиалов или точек продаж. И все же это не является обязательным приемом. Если перед вами не стоит задача предоставления подробной информации о филиалах, можно обойтись и одной страницей. Это может быть основная страница standalone-плагина Contacts или Feedback.

При использовании скриптовой формы обратной связи в качестве страницы контактов можно использовать системную страницу или даже раздел.

Все, что находится между кнопками “Главная” и “Контакты”, определяется спецификой сайта. Здесь могут находиться ссылки на каталог продукции, разделы блога, страницу о компании, архив сайта и многое другое. О том, как их сформировать расскажем дальше.

Ручное формирование навигации веб-сайта

Особых пояснений здесь не требуется – этот вариант подойдет для любителей “чистого HTML” и для владельцев сайтов с компактной структурой. В таких случаях не стоит перегибать палку и выдумывать автоматизацию для 4-5 элементов. Особенно если все эти разделы статичны, т. е. их изменения не предполагаются или предполагаются, но редко.

Самым важным моментом является формирование атрибута href и текста ссылки. Здесь начинаются варианты. Для раздела все несложно:

<a href="{PHP|cot_url('page', 'c=catalog')}">{PHP.structure.page.catalog.title}</a>

Обращаем внимание на желательность использования функции cot_url() для формирования атрибута href. Если текст должен соответствовать названию, используйте массив $structure. В противном случае его можно указать вручную или – что мы считаем более корректным – с помощью lang-строки. Например:

<a href="{PHP|cot_url(‘page', ‘c=catalog')}">Каталог нашей продукции</a>

или

<a href="{PHP|cot_url('page', 'c=catalog')}">{PHP.L.theme-catalog}</a>

С указанием ссылок на страницы немного сложнее. Атрибут href формируем с помощью все той же cot_url(), а вот текст ссылки из названия страницы так просто мы не получим. Так что указываем или вручную или через lang-строку:

<a href="{PHP|cot_url('page', 'c=catalog&al=how-to-buy')}">Как купить</a>

или

<a href="{PHP|cot_url('page', 'c=catalog&al=how-to-buy')}">{PHP.L.theme-howtobuy}</a>

Для ссылок на standalone-плагины или модули универсального правила нет. Если разработчик позаботился о соответствующей lang-строке, используем ее. Иначе – просто впишем его вручную. А функция cot_url() в данном случае выглядит предельно просто:

<a href="{PHP|cot_url('contacts')}">Контакты</a>

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

Навигация по сайту с помощью расширений

Начнем с наиболее радикального способа – использования специального плагина. Сколько их существует в природе точно неизвестно, поэтому остановимся на одном, который гарантированно поддерживается – Menugenerator. Это простое и удобное расширение, которое специально предназначено для тех, кто предпочитает работать с сайтов из-под админки:

Как видно из скриншота, для каждой ссылки можно указать:

• текст,
• ссылку,
• описание,
• экстраполе (например, для класса или другого атрибута),
• ограничение для выбранной группы.

Путь формируется в классическом для Cotonti формате с разделителями в виде точек. Плагин прост и удобен в использовании – за исключением двух важных моментов:

1. Он не “следует” за реальной структурой сайта.
2. Текст ссылки нельзя локализовать.
3. Подсчет количества страниц в разделе не реализован.

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

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

Для тех, кто стремится к необслуживаемой навигации, которая может реплицировать структуру, мы можем предложить вариант из нескольких плагинов. Он немного более сложен в плане создания, чем простое размещение TPL-тега плагина Menugenerator. Однако в плюсе вы получите главное – полную автономность.

Прежде всего, определим, что именно будет являться элементами навигации. Это могут быть:

• главная страница сайта,
• разделы страниц,
• страницы,
• standalone-части плагинов.

Первый и последний пункты алгоритмизировать не имеет большого смысла. Разделы можно вывести (и весьма гибко) с помощью плагина Catlist, а страницы – с помощью Pagelist.

Возникает вопрос о том, как группировать эти элементы. Немного проще все с разделами. Здесь можно использовать поле structure_path и обрабатывать его с помощью оператора MySQL-оператор LIKE. Например,

{PHP|sedby_catlist('catlist.nav', '0', 'structure_path ASC', 'structure_path LIKE "10.%"')}

или еще проще:

{PHP|sedby_catlist('catlist.nav', '0', 'structure_path ASC', 'structure_path > 100 and structure_path < 120')}

Отдельно остановимся на многоуровневом меню. Конечно, можно программировать такое меню целиком. Но это снова отдельный плагин и снова практически “одноразовый” алгоритм. Гораздо проще разбить навигацию на логические элементы и вывести их с помощью того же Catlist:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarPhones" data-bs-toggle="dropdown" aria-expanded="false">
    Смартфоны
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarPhones">
  {PHP.phones_str|sedby_catlist('catlist.header','','structure_path ASC','structure_code in ($this)')}
  <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="{PHP|cot_url('page', 'c=phones)}">Смартфоны</a>
  </div>
</li>

Что касается страниц, то здесь немного сложнее, но “выкрутиться” можно, используя код раздела или специальное экстраполе. Причем экстраполе можно использовать и для группировки и для сортировки:

{PHP|sedby_pagelist('pagelist.nav, 6, 'page_some_extrafield ASC', 'page_some_extrafield LIKE "navitem.%"')}

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

Еще один момент: поскольку и Catlist и Pagelist поддерживают плагин i18n, пункты меню будут интернационализированы. И еще: все изменения в структуре сайта будут отражены в навигации.

При включенном кэшировании редактирование, добавление или удаление элементов структуры влечет за собой очистку кэша.

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

Выводы и заключение

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

1. Вручную
2. С помощью специализированного плагина
3. Адаптируя для этого существующие плагины

Первый вариант – самый бюджетный и самый гибкий. Если у вас присутствуют особые требования к формированию навигации, которые очень сложно или даже невозможно программировать, делайте все вручную. Или если навигация примитивная или очень простая. Главное в этом – не делать ошибок или опечаток. В минусе получите сложные и большие шаблоны.

Второй вариант подойдет для любителей работать с разметкой сайта из админки. Правда спецплагин всегда будет иметь ограничения и вряд ли будет учитывать изменения в структуре сайта. И это не вариант для многоязычных сайтов.

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

В прошлый раз мы разбирались с минификацией CSS и JavaScript ресурсов.