На Deep-CMS «напал»:

Typical Programmer

Хлебные крошки и меню

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

Хлебные крошки

Вывести «хлебные крошки» в шаблон очень просто. У нас в шаблоне доступна предопределенная переменная $id — это уникальный идентификатор документа. Достаточно указать этот идентификатор в качестве «отправной точки» и система вернет готовый к выводу массив «хлебных крошек»:

<?php foreach (dataHelper::getBreadcrumbs($id) as $item) { ?>
    <a href="<?=$item['page_alias']?>"><?=$item['node_name']?></a>
<?php } ?>

Вот так все просто. Как видно из примера — каждый элемент массива содержит в себе название узла и его УРЛ. Этого вполне достаточно. Если Вы не заметили, то в примере не готовый к использованию вариант. Он не учитывает находимся ли мы на главной или нет, не учитывает нужно ли вообще показать главную и не имеет разделителя между пунктами, декоративной стрелочки.

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

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

<div class="breadcrumbs">
    <?php if (request::getURI() != '/') { ?>
        <?php foreach (dataHelper::getBreadcrumbs($id, true) as $k => $item) { ?>
            <?=$k>0?' » ':''?>
            <a href="<?=$item['page_alias']?>"><?=$item['node_name']?></a>
        <?php } ?>
    <?php } ?>
</div>

Что тут нового?

В данном примере идет обращение к методу getURI() класса request для того чтобы проверить, не на главной ли мы странице. И если на главной, то нет смысла строить «хлебные крошки».

Так же мы ввели в цикл счетчик $k нумерация которого начинается с нуля, а эта информация позволит нам указать, что перед самым первым пунктом не нужно выводить стрелочку разделитель.

Как вообще можно видеть, мы не разбираем конкретики, в какое место шаблона нужно вставлять этот код, как внешне должны выглядеть «хлебные крошки». Может быть у Вас в верстке ссылки обернуты в дополнительные элементы. Может быть Вы повторяете «хлебные крошки» в шаблоне дважды — сверху и снизу. Все эти детали — Ваши личные предпочтения и полет дизайнерской фантазии.

Вывод меню

Все меню, которые были созданы в административном разделе выводятся не сложнее «хлебных крошек». Допустим, мы в административном разделе создали два меню и прикрепили к ним некоторые документы. Пусть у верхнего меню будет идентификатор равный 1, а у левого 2.

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

<div id="topmenu">
  <?php foreach (dataHelper::getMenuItems(1) as $item) { ?>
    <a href="<?=$item['page_alias']?>"><?=$item['node_name']?></a>
  <?php } ?>
</div>

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

Теперь рассмотрим как выводить вложенные пункты на примере левого меню:

<?php $leftMenu = dataHelper::getMenuItems(2); ?>
<?php echo htmlHelper::drawTreeLinksList($leftMenu); ?>

Это интересное место. В первой строке все понятно, мы получаем коллекцию узлов в переменную $leftMenu. А вот во второй строке мы эту переменную передаем на генерацию разметки вложенных ul-li-a списков. В результате в шаблоне генерируется дерево вложенных списков, где пункты меню в точности повторяют порядок и вложенность узлов в дереве документов административного раздела.

Сократим код в одну строку:

<?=htmlHelper::drawTreeLinksList(dataHelper::getMenuItems(2))?>

Да, в угоду удобству и простоте вывода здесь нет удобства в оформлении. Однако в 99% случаев любая задача оформления вложенных меню решается на уровне CSS.

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

Deep: 2014-02-15 23:39:28 (обновлено 2014-02-16 12:19:57)

Оставить комментарий

Комментарии:

protection