[Modx Revo] создание меню Wayfinder
Создание меню на Revo modx дело не трудное.
Создать простое меню на Modx Revo с помощью Wayfinder
Мы скачали из интернета html шаблон сайта, загрузили его на хостинг и создали столько страниц, сколько пунктов меню, придав им всем Шаблон "Home". В содержимое этого Шаблона добавили код.
Находим в Шаблоне код меню:
<ul>
<li class="selected"><a href="#" >Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
Вместо него пишем:
[[!Wayfinder? &startId=`0` &level=`1` &hereClass=`selected`]
Наше меню готово. startId - номер папки из которой будут отображаться пункты меню. level -уровень меню. hereClass - класс активного пункта меню.
Вот видео процесса:
Создание меню с картинкой на Modx Revo
Допустим у нас имеется такой код меню в шаблоне:
<ul id="catleftmenu"> <li class="active">
<img src="/assets/base/image/8.jpg" alt="" width="109" height="68" />
<a href="#"><span>Проекты</span></a>
</li>
<li>
<img src="/assets/base/image/5.jpg" alt="" width="109" height="68" />
<a href="#"><span>Каменный дом</span></a>
</li>
<li>
<img src="/assets/base/image/1.jpg" alt="" width="109" height="68" />
<a href="#"><span>Технологии</span></a>
</li>
<li>
<img src="/assets/base/image/7.jpg" alt="" width="109" height="68" />
<a href="#"><span>Материалы</span></a>
</li>
<li>
<img src="/assets/base/image/4.jpg" alt="" width="109" height="68" />
<a href="#"><span>Дом под ключ</span></a>
</li>
<li>
<img src="/assets/base/image/2.jpg" alt="" width="109" height="68" />
<a href="#"><span>13 300 кв.м.</span></a>
</li>
<li>
<img src="/assets/base/image/6.jpg" alt="" width="109" height="68" />
<a href="#"><span>Галерея</span></a>
</li>
<li>
<img src="/assets/base/image/3.jpg" alt="" width="109" height="68" />
<a href="#"><span>Расчет стоимости</span></a>
</li>
</ul>
Тогда вместо всего этого в шаблон мы вписываем такую конструкцию (и устанавливаем пакет Wayfinder):
[[!Wayfinder? &startId=`0` &level=`1` &rowTpl=`menuleft` &outerTpl=`ml`]]
Далее создаем два чанка отображения нашего меню. Все стандартные чанки отображения можно посмотреть тут.
Чанк для &rowTpl у нас отвечает за внутренности, второй за внешность) Пройдите по ссылке, там все подробно расписано.
Итак создаем чанк ml и вписываем туда такое содержание:
<ul id="catleftmenu">[[+wf.wrapper]]</ul>
Синтаксис плейсхолдеров для Modx Revo выглядит так: [[+placeholder]]
Далее создаем чанк menuleft:
<li [[+wf.classes]]><img src="/assets/base/image/[[+leftmenu]].jpg" alt="" width="109" height="68" />
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]><span>[[+wf.linktext]]</span></a>[[+wf.wrapper]]</li>
Создаем дополнительное поле TV, называем его leftmenu и делаем доступным к шаблону страниц, на которые можно перейти с помощью создаваемого меню. Затем в настройках каждой страницы из меню в это дополнительное поле вписываем цифру, соответствующую номеру картинки, например для первого пункта меню это цифра 8.
Все, меню заработало.
&outerClass=`название класса меню` &innerClass=`название класса вложенного меню`
Как вывести только контейнеры в меню Modx revo Wayfinder