Работаю по всей России

vasilisa1210@mail.ru

Главная » Уроки » Уроки по ModX Revo » [Modx Revo] создание меню Wayfinder

[Modx Revo] создание меню Wayfinder

Создание меню на Revo modx дело не трудное.

ПОДРОБНО О ВСЕХ ПАРАМЕТРАХ  Wayfinder Revo

Создать простое меню на 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=`название класса вложенного меню`

 ПОДРОБНО О ВСЕХ ПАРАМЕТРАХ  Wayfinder Revo

Как вывести только контейнеры в меню Modx revo Wayfinder