October CMS - Static Pages Plugin
В этом видео мы создадим меню для нашего сайта.
И пусть наше меню будет содержать все наши StaticPages-страницы созданные нами в прошлом видеоуроке.
Переходим в пункт меню плагина StaticPages и кликая по кнопке Add создаем новое меню.
Присвоем имя "Main menu - left"
Далее создаем элемент меню. Он у нас будет один единственный и будет автоматически генерировать меню состоящее из всех имеющихся у нас StaticPages-страниц.
Укажем заголовок для меню - "All Pages", Тип - "All Static Pages". Так же установим галку - "Replace this item with its generated children"
Меню готово.
Как вы понимаете само меню у нас на странице не появится. Нам потребуется указать место где оно будет появляться. Для этого открываем наш static-layout и добавляем компонент меню - Static menu. Заходим в редактор свойств меню и зададим ему имя - "topMenuLeft".
Теперь в layout укажем место для вывода нашего меню.
<div class="navbar-collapse collapse">
{% component 'topMenuLeft' %}
</div>
Это самый простой способ вывода. Но меню можно кастомизировать и выводить таким образом каким нам это требуется. Давайте сделаем это.
Для этого создадим partial - menu-items.
И ззапишем в него следующий код:
<ul class="{{ class }}">
{% for item in items %}
<li
class="{{ item.isActive or item.isChildActive ? 'active' : '' }}
{{ item.items ? 'dropdown' : '' }}"
>
<a
{% if item.items %}class="dropdown-toggle" data-toggle="dropdown"{% endif %}
href="{{ item.url }}"
>
{{ item.title }}
{% if item.items %}<span class="caret"></span>{% endif %}
</a>
{% if item.items %}
{% partial 'menu-items' items=item.items class='dropdown-menu' %}
{% endif %}
</li>
{% endfor %}
</ul>
Возвращаемся в static-layout и заменим вывод меню на новый -
<div class="navbar-collapse collapse">
{% partial 'menu-items' items=topMenuLeft.menuItems class='nav navbar-nav' %}
</div>
Переходим на главную страницу сайта и тестируем. Все работает!
