Блог на MODx Revolution. Главное меню, чанк header

Здесь мы с вами отредактируем созданный в позапрошлом уроке чанк шапки сайта header. Сделаем вывод одноуровневого главного меню, — установим сниппет под названием Wayfinder.

Итак, отройте «Диспечер пакетов» и загрузите Wayfinder. После установите его стандартным способом посредством админки системы:

Wayfinder для MODx Revolution

Настройка главного меню сайта

1. На вкладке Элементы из левой панели откройте для редактирования код чанка под названием header, который мы с вами создали в одном из прошлых уроков.

2. Заменяем блок ненумерованного списка с идентификатором #nav на вызов сниппета Wayfinder со следующими параметрами:

[[!Wayfinder? 
&startId=`0`
&level=`1`
&outerTpl=`navigation`
]]
  • startId — идентификатор родительского ресурса, т.е. корневого документа. В данном случае пишем 0. См. дерево документов на первом скриншоте читаемой вами статьи.
  • level — уровень вложенности списка элементов. Т.к. меню у нас одноуровневое, пишем 1.
  • outerTpl — шаблон контейнера <ul>… </ul>. Пишем ещё несуществующий шаблон navigation, т.к. исходная HTML-разметка у SimpleMagazine имела вид <ul id=»nav»>… </ul>.

3. Создаем шаблон, вернее чанк, контейнера элемента ненумерованного списка. Вставьте в многострочное поле ввода кода следующий текст:

<ul id="nav"[[+wf.classes]]>[[+wf.wrapper]]</ul>

Чанк UL для Wayfinder на MODx Revolution

Дополнительно, чтобы не усердствовать с дальнейшими настройками Wayfinder, откроем файл стилей «assets/templates/simplemagazine/css/main.css» и заменим строку:

#header #nav li.current a

на

#header #nav li.active a

Аналогичные действия повторим и для второго файла со стилями — «skin.css».

Итоги:

Итак, вывод одноуровневого главного меню настроен. Чанк header имеет такой вот достаточно незамысловатый вид:

<!-- HEADER -->
<div id="header">
<h1 id="logo">simple<span>magazine</span></h1>
<!-- NAVIGATION -->
[[!Wayfinder? 
&startId=`0`
&level=`1`
&outerTpl=`navigation`
]]        
</div> <!-- /header -->

MODx Revolution - Wayfinder - Главное меню

Опубликовано 2-01-2013 в 09:23


Комментариев к записи: 5

  1. Евгения:

    Как можно увеличить количество кнопок (ссылок), отображаемых в главном меню сайта? 7 отображаются нормально, а с добавлением 8-ой все уезжает на второй слой, хотя место есть в строке пустое :( (( Как добавить еще одну кнопку?

    • Администратор:

      Это вопрос по верстке. Используйте отладчик Google Chrome и посмотрите стили. CSS подкорректируйте.

  2. Сергей:

    Здравствуйте, всё было понятно, пока не застопорился на словах «outerTpl — шаблон контейнера … . Пишем ещё несуществующий шаблон navigation, т.к. исходная HTML-разметка у SimpleMagazine имела вид … .»

    Мне, чайнику, не ясно, о чём идёт речь. Что такое «шаблон контейнера ul … ul? Откуда взять значения для outerTpl? У меня на сервер загружен ModX, шаблон поставлен, вот теперь пытаюсь меню на русском заставить работать. Чанк делаю. Пожалуйста, помогите с этим outerTpl!

  3. Сергей:

    И ещё, пожалуйста, скажите, где урок с «созданный в позапрошлом уроке чанк шапки сайта header»? Я не могу сориентироваться в уроках, так как с этой страницы ссылок нет, а порядок уроков не указан (номера бы урокам).

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты