Урок 5. Внутренние страницы сайта на MODx. Как создать шаблон modx

Руководство по созданию MODx шаблонов | LoomStudio

Руководство по созданию MODx шаблонов

Обещанная статья по созданию шаблонов на MODx.

Данная статья написана мною исходя из достаточно большого практического опыта работы с MODx. Идеи изложенные здесь далеко не новы и опытный разработчик, вероятно не найдет здесь для себя ни чего нового.А вот новичкам изложенный здесь материал может быть не только интересен, но и полезен

На мой взгляд проще всего будет создать шаблон из готового HTML взятого здесь Шаблон взят абсолютно мной произвольно, вы можете взять любой другой, алгоритм описанный в данной статье, может быть использован для любого шаблона.

Шаг 1: Подготовка

Итак подключаемся к серверу на котором у нас уже стоит MODx и переходим в папку с системой(в случае если вы работаете на локальном компьютере убедитесь, что сервер запущен). переходим в папку с установленным MODx. Далее идем в папку assets/templates и создаем в ней папку, которая будет содержать все файлы в дальнейшем я буду использовать имя dark, используемые для шаблона: css, изображения, внешние JavaScript файлы.

Каким образом вы будете организовывать внутреннюю структуру этой директории остается на ваше усмотрение, но я, обычно, создаю папки css,img и js для хранения соответствующих частей шаблона.

для нашего шаблона копируем файл default.css в поддиректорию css, предварительно заменив все /img на ../img, а содержимое каталога img в соответствующий на сервере.

Шаг 2: Создание шаблона

Далее нам надо создать собственно сам шаблон. Для этого заходим в админ панель MODx, в верхнем меню выбираем пункт «Ресурсы(Resources)» -> «Управление Ресурсами(Manage Resour)» и нажимаем «Создать шаблон(New template)» видим следующую форму:Заполняем поля «имя шаблона(Template name)», «Описание(Description)», выбираем если надо категорию шаблона или создаем новую. В поле Код Шаблона(Template code)вставляем содержимое файла index.html из нашего тестового шаблона.

Для сокращения количества лишнего кода добавим сразу за тегом<head>

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

для таблиц стилей <link rel=»stylesheet» type=»text/css» href=»default.css» media=»screen»/> заменяем на <link rel=»stylesheet» type=»text/css» href=»/assets/templates/dark/css/default.css» media=»screen»/>
для изображений<img src=»img/[имя файла]«> на <img src=»/assets/templates/dark/img/[имя файла]«>
для JavaScript файлов <script src=»img/[имя файла]«> на <script src=»/assets/templates/dark/img/[имя файла]«>

Далее, в том месте где должно быть основное содержимое страницы заменяем текст шаблона на следующую конструкцию:[*#content*]

т.е в нашем случае

<div> <div> <h2>Porttitor posuere</h2> <p>October 24th, 2006 by Duis porttitor</p> <p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p> <blockquote><p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p></blockquote> <p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p> <p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies. </p> <h2>Adipiscing</h2> <p>September 31st, 2006 by Mauris</p> <p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam. Phasellus rutrum elit vel nisi. Cras mauris nulla, egestas quis, cursus at, venenatis ac, ante. Fusce accumsan enim et arcu. Duis sagittis libero at lacus. Suspendisse lacinia nulla eget urna.</p> <ul> <li>Tristique</li> <li>Aenean</li> <li>Pretium</li> </ul> <p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est. Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus. Fusce eleifend, dui ut posuere auctor, justo elit posuere sapien, at blandit enim quam fringilla mi.</p> </div> </div>

заменяем на

<div> <div> [*#content*] </div> </div>

Так же содержимое тега <title> можно заменить на [*pagetitle*] для того, что бы в заголовке браузера вместо Dark Ritual отображалось название текущего документа.

Шаг 3: Создание примитивной навигации

Рассмотрим создание простейшей навигации. Здесь я не буду приводить примеры создания динамических меню на wayfinder-е перечислять все его параметры илл описывать, как можно создать меню навигации без использования стандартных сниппетов MODx. Все гораздо проще. Для начала давайте посмотрим на наш шаблон.Точнее вот на эту его часть:

<h2>Something</h2> <ul> <li><a href="index.html">pellentesque</a></li> <li><a href="index.html">sociis natoque</a></li> <li><a href="index.html">semper</a></li> <li><a href="index.html">convallis</a></li> </ul>

Если приложить немного фантазии, то можно использовать подобную структуру, как меню навигации по сайту.Давайте посмотрим теперь, на админ-панель нашего сайта, в частности на дерево документов.

Вся информация, необходимая нам для создания простейшего меню находится здесь. Ниже приведен кусок кода меню, а потом я объясняю, как это работает.

<h2>Меню</h2> <ul> <li><a href="[~1~]">На главную</a></li> <li><a href="[~7~]">О компании</a></li> <li><a href="[~8~]">контакты</a></li> </ul>

как можно заметить, ссылки указывают на некую конструкцию [~x~], где x некое число. На самом деле это число, идентификатор документа если посмотреть на рисунок выше то можно заметить, что это число, которое указывается в скобках рядом с названием документа. А сама конструкция означает ссылку на документ с идентификатором x. Таким образом, можно добавить простейшую навигацию на ваш сайт. Конечно для создания сложной навигации лучше использовать Wayfinder или собственную систему навигации, но, если надо сделать простой сайт или создать прототип то такой способ вполне можно использовать.

Шаг 4: Декомпозиция, чанки

На примере создания меню, можно рассмотреть ещё одну проблему. Предположим на нашем сайте используется, не один, а допустим три шаблона. И нам нужно добавить в меню еще один пункт, в принципе, не проблема добавить еще один элемент в список и прописать ссылку… А если шаблонов не три, а тридцать(я конечно понимаю что для сайта на котором тридцать шаблоном меню так не делается, но общая картина ясна).Это один из случаев, когда можно применить встроенный в MODxмеханизм чанков. Небольших или как получится участков HTML кода с возможностью использования, особенностей MODx. Для создания чанка выполним следующие действия.

выделяем код нашего меню и вырезаем его из кода шаблона
вместо вырезанного кода пишем следующее {{menu}}
жмем «сохранить»
верхнее меню жмем «Ресурсы»->»управление ресурсами»
Чанки, создать чанк
имя menu, код чанка вставляем из буфера обмена

Если вы все сделали правильно, то у вас должно получиться нечто подобное.

сохраняем и смотрим что получилось. Если все сделано правильно, то… ни чего не должно произойти.

. Сейчас мы изменили только внутреннюю структуру шаблона, но не его внешний вид. Теперь точно так-же можно вынести в отдельные чанки заголовок, подвал страницы и часть между тегами <header> и </header> В идеале в шаблоне у нас должен остаться только скелет описывающий, взаимное расположение слоев на странице. В дальнейшем это сильно упростит изменение и редактирование сайта.Все это гораздо лучше понимаешь на опыте, когда приходится править в подвалах пятнадцати шаблонов телефон компании, а на следующий день выясняется что надо было поправить ещё и e-mail и надо править все по новой. Для себя я ввел правило: «Любой часть сайта содержимое которой может измениться должна быть размещена в чанке».

Вот в принципе и все. Первая попытка описать процесс создания простенького шаблона для MODx можно сказать состоялась. Все вопросы, сообщения об ошибках, замечания и благодарности прошу в коментарии или на почтуP.S: Если вы хотите, что бы я сделал установку сверстанного шаблона на ваш сайт, просто напишите мне цена вопроса 100$

Читайте так же:

loom-studio.net

Как создать шаблон для внутренних страниц сайта на MODx

Сегодня мы с вами сделаем еще один важный шаг на пути разработки сайта визитки – создадим шаблон и структуру внутренних страниц, которыми у нас являются: О нас, Услуги и прочие.

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

Для начала давайте создадим новый шаблон. Для этого переходим в раздел «Элементы» — «Управление элементами» — Вкладка «Шаблоны». Нажимаем кнопку «Новый шаблон» и начинаем заполнять все поля, по аналогии как это мы делали для главной, кто не читал, то можно сделать это вот тут.

vntr1

Вот как это сделал я.

vntr2

В поле – «Код шаблона (HTML)» нужно вставить следующий код:

<!DOCTYPE html> <html lang="en"> {{HEAD}} <body>  <div>  <div>  <div> {{HEADER}}  <div> <div> <ul> <li>You Are Here</li> <li>»</li> <li><a href="#">Home</a></li> <li>»</li> <li><a href="#">Grand Parent</a></li> <li>»</li> <li><a href="#">Parent</a></li> <li>»</li> <li><a href="#">Child</a></li> </ul> </div> <div> </div> <div> <div> <h3>Secondary Navigation</h3> <ul> <li><a href="#">Open Source Templates</a></li> <li><a href="#">Free CSS Templates</a> <ul> <li><a href="#">Free XHTML Templates</a></li> <li><a href="#">Free Website Templates</a></li> </ul> </li> <li><a href="#">Open Source Layouts</a> <ul> <li><a href="#">Open Source Software</a></li> <li><a href="#">Open Source Webdesign</a> <ul> <li><a href="#">Open Source Downloads</a></li> <li><a href="#">Open Source Website</a></li> </ul> </li> </ul> </li> <li><a href="#">Open Source Themes</a></li> </ul> </div> </div> <div></div> {{BOTTOM}} </div>  <div> </div> {{FOOTER}} </div>  </div>  </div>  </body> </html>

Давайте разберемся, что тут к чему.

Как вы видите, мы здесь зразу применили созданные нами ранее чанки, вот собственно наглядный пример удобности их использования.

У нас в структуре добавился новый HTML код, который нужно для удобства также разбить на чанки.

Во-первых, в отдельный чанк можно вынести хлебные крошки. Как создавать и редактировать чанки я рассказывал вот здесь.

Выделяем следующий участок кода и выносим его в отдельный чанк – «BREADCRUMB».

<div> <ul> <li>You Are Here</li> <li>»</li> <li><a href="#">Home</a></li> <li>»</li> <li><a href="#">Grand Parent</a></li> <li>»</li> <li><a href="#">Parent</a></li> <li>»</li> <li><a href="#">Child</a></li> </ul> </div>

На его место в шаблон ставим — {{BREADCRUMB}}.

Во-вторых, нужно создать чанк для вывода основного контента и дополнительного меню в сайдбаре. Назовем его «MAINCONTENT» и вставим туда следующий код:

<div> </div> <div> <div> <h3>Secondary Navigation</h3> <ul> <li><a href="#">Open Source Templates</a></li> <li><a href="#">Free CSS Templates</a> <ul> <li><a href="#">Free XHTML Templates</a></li> <li><a href="#">Free Website Templates</a></li> </ul> </li> <li><a href="#">Open Source Layouts</a> <ul> <li><a href="#">Open Source Software</a></li> <li><a href="#">Open Source Webdesign</a> <ul> <li><a href="#">Open Source Downloads</a></li> <li><a href="#">Open Source Website</a></li> </ul> </li> </ul> </li> <li><a href="#">Open Source Themes</a></li> </ul> </div> </div> <div></div>

На его место в шаблоне ставим — {{MAINCONTENT}}.

Все, все остальное оставляем как есть. У вас должна получиться следующая картина.

vntr3

В css файл, который находится в папке /assets/templates/retina/css/style.css прописываем следующий код.

#content{ display:block; float:left; width:600px; padding-bottom:20px; } #column{ display:block; float:right; width:300px; } #column .holder{ display:block; width:300px; margin-bottom:20px; } #column .holder p{ line-height:1.6em; } #column .holder h3.title{ display:block; width:100%; height:65px; margin:0; padding:15px 0 0 0; font-size:20px; line-height:normal; } #column .holder h3.title img{ float:left; margin:-15px 8px 0 0; padding:5px; border:1px solid #666666; } #column .holder p.readmore{ display:block; width:100%; font-weight:bold; text-align:right; line-height:normal; } #column div.imgholder{ display:block; width:290px; margin:0 0 10px 0; padding:4px; color:#666666; background-color:#F7F7F7; border:1px solid #CCCCCC; } #breadcrumb{ padding:20px 0; } #breadcrumb ul{ margin:0; padding:0; list-style:none; } #breadcrumb ul li{display:inline;} #breadcrumb ul li.current a{text-decoration:underline;} table{ width:100%; border-collapse:collapse; table-layout:auto; vertical-align:top; margin-bottom:15px; border:1px solid #CCCCCC; } table thead th{ color:#FFFFFF; background-color:#666666; border:1px solid #CCCCCC; border-collapse:collapse; text-align:center; table-layout:auto; vertical-align:middle; } table tbody td{ vertical-align:top; border-collapse:collapse; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; } table thead th, table tbody td{ padding:5px; border-collapse:collapse; } table tbody tr.light{ color:#666666; background-color:#F7F7F7; } table tbody tr.dark{ color:#666666; background-color:#E8E8E8; } #column .subnav{display:block; width:250px; padding:25px; background-color:#F9F9F9; margin-bottom:30px;} #column .subnav h3{ margin:0 0 20px 0; padding:0 0 14px 0; font-size:20px; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; color:#666666; background-color:#F9F9F9; line-height:normal; border-bottom:1px dotted #666666; } #column .subnav ul{ margin:0; padding:0; list-style:none; } #column .subnav li{ margin:0 0 3px 0; padding:0; } #column .subnav ul ul, #column .subnav ul ul ul, #column .subnav ul ul ul ul, #column .subnav ul ul ul ul ul{border-top:none; padding-top:0;} #column .subnav a{ display:block; margin:0; padding:5px 10px 5px 20px; color:#777777; background:url(images/black_file.gif) no-repeat 10px center #F9F9F9; text-decoration:none; border-bottom:1px dotted #666666; } #column .subnav a:hover{color:#00acef; background-color:#F9F9F9;} #column .subnav ul ul a, #column .subnav ul ul ul a, #column .subnav ul ul ul ul a, #column .subnav ul ul ul ul ul a{background:url(images/black_file.gif) no-repeat #F9F9F9;} #column .subnav ul ul a{padding-left:40px; background-position:30px center;} #column .subnav ul ul ul a{padding-left:50px; background-position:40px center;} #column .subnav ul ul ul ul a{padding-left:60px; background-position:50px center;} #column .subnav ul ul ul ul ul a{padding-left:70px; background-position:60px center;}

В этом же файле для класса — .main .entries убираем параметр — position:relative.

Теперь вставим переменную, которая обеспечит вывод контента из созданной в админке статьи.

Для этого в чанке «MAINCONTENT», вместо всего содержимого, между <div id=»content»></div>.

Вставляем:

[*content*]

У вас должно выйти следующее.

vntr4

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

Кто пропустил урок по созданию меню, рекомендую ознакомиться – вот по этой ссылке.

Логичнее всего, при создании конкретных типов услуг привязываться к меню «Услуги». Я создал дополнительные материалы, и у меня получилось вот такое дерево документов.

vntr5

Если мы посмотрим на сайт сейчас, то увидим, что верстка основного меню съехала. Все из-за того, что там не предусмотрен выпадающий список.

vntr6

Сейчас я дам вам инструменты, которые позволят убрать этот недочет.

&level — ограничение вывода по уровнях вложенности меню.

&hideSubMenus — этот инструмент позволяет скрыть подменю, а также выводить дочерние пункты при активном родительском пункте меню.

Мы в данной ситуации применим параметр — &level. В чанках «HEADER» и «FOOTER» немного подправляем код вывода меню:

[!Wayfinder? &startId=`0` &level=`1`!]

Вот что должно получиться.

vntr7

Если проверите сайт, то верстка снова станет на место.

Теперь переходим к боковому меню на внутренней странице.

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

[!Wayfinder? &startId=`3`!]

Только изменим id на то число, которое присвоено для меню услуг. В моем случае это «3».

Нужный нам чанк – «MAINCONTENT». Выделяем вот этот код:

<ul> <li><a href="#">Open Source Templates</a></li> <li><a href="#">Free CSS Templates</a> <ul> <li><a href="#">Free XHTML Templates</a></li> <li><a href="#">Free Website Templates</a></li> </ul> </li> <li><a href="#">Open Source Layouts</a> <ul> <li><a href="#">Open Source Software</a></li> <li><a href="#">Open Source Webdesign</a> <ul> <li><a href="#">Open Source Downloads</a></li> <li><a href="#">Open Source Website</a></li> </ul> </li> </ul> </li> <li><a href="#">Open Source Themes</a></li> </ul>

И вместо него вставляем, приведенный выше код. Вот что должно получиться.

vntr8

Результат нашей работы. Как видите ничего сложного.

vntr9

В чанке «MAIN», нужно найти код:

<ul> <li><a href="#">Lorem ipsum dolor sit amet</a></li> <li><a href="#">Sit atmet, consectetur lorem </a></li> <li><a href="#">Consectetur adispicing dolor</a></li> <li><a href="#">Lipsuim dolor amet adpispicing</a></li> <li><a href="#">Lipsuim dolor amet adpispicing</a></li> </ul>

И вставляем точно такую же конструкцию.

Вот мы с вами и разобрали, как создать и настроить внутреннюю страницу для сайта визитки на MODx.

Возможно, для кого-то найдутся непонятные моменты, не стесняйтесь, спрашивайте в комментариях. Как видите, в шаблоне есть отдельные блоки, которые повторяются, и я сразу затрагиваю их, что потом не объяснять один и тот же материал дважды.

Кстати, не забудьте назначить этот шаблон для всех страниц, кроме главной!

webprovincia.com

[Modx Evo] Меню как создать свой шаблон отображения от Василисы Белозеровой

Когда используете Wayfinder, то следите за параметром &level и выдавайте по возможности кэшированным, тоесть в квадратных скобках, без восклицательного знака.

Для того что бы создать свой шаблон отображения меню надо сделать так, как изложено ниже.

Пример меню на EVO MODX Wayfinder номер 1

Допустим в шаблоне есть меню такого вида:
<div><div><ul><class="menu"> <li><a href="index.html"><span><span>ГЛАВНАЯ</span></span> </a></li> <li><a href="o_nas.html"><span><span>О ШКОЛЕ</span></span> </a></li> <li><a href="programmyi_poxudeniya.html"><span><span>ОБ АВТОРЕ</span></span> </a></li> <li><a href="xudeem_pravilno.html"><span><span>ПОДДЕРЖКА</span></span> </a></li> <li><a href="dieta_dlya_poxudeniya.html"><span><span>ГАРАНТИИ</span></span> </a></li> <li><a href="otzyivyi.html"><span><span>ВОПРОСЫ</span></span> </a></li> <li><a href="kontaktyi.html"><span><span>КОНТАКТЫ</span></span></span> </a></li> <li><a href="czenyi.html"><span><span>ЦЕНА</span></span> </a></li></ul></div></div>
Записываем в шаблон
<div> <div> [[Wayfinder? &startId=`0`&level=`1` &rowTpl=`zagmenuleft`&outerTpl =`zx`]]</div> </div>

&startId - номер Id документа откуда будут браться пункты меню

&level - сколько уровней подменю выводить (число, по умолчанию =0)
Создаем чанк zagmenuleft
<li><a [+wf.id+][+wf.classes+] href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]><span><span>[+wf.linktext+]</a>[+wf.wrapper+]</span></span></li>
Создаем чанк zx
<ul><class="menu">[+wf.wrapper+]</ul>

Пример меню на EVO MODX Wayfinder номер 2

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

<ul> <li><a href="index.html">Главная</a></li> <li><a href="partners.html">Услуги</a></li> <li><a href="about.html">Стоимость</a></li> <li><a href="contact.html">Контакты</a></li> </ul>

Записываем в шаблон:
[!Wayfinder? &startId=`0` &rowTpl=`tpl_menu` !]
Создаем чанк tpl_menu с таким содержанием:
<li><a [+wf.id+][+wf.classes+] href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.linktext+]</a>[+wf.wrapper+]</li>
В файле стиля заменяем current на active:
#templatemo_menu ul li .active {color: #fff;}

Пример меню на EVO MODX Wayfinder с подменю

Создайте картинки 4 шт - меню актив, меню при наведении, подменю актив, подменю при наведении.

Пропишите стили css

/* меню левое*/

ul.menuleft { color : #FFFFFF; list-style:none;margin-left : 3px;}

ul.menuleft li a { color : #FFFFFF; font-size : 23px; text-decoration: none; font-family: "Monotype Corsiva"; padding: 5px 0 3px 32px; line-height: 35px;}ul.menuleft{ padding-left:15px;}

ul.menuleft li li a:hover, ul.menuleft li li a:active{color: #67bcdd;}

ul.menuleft li a:hover { background:url(images/zv.jpg) left center no-repeat;}

ul.menuleft .active li a { background:url(images/zvamin.jpg) left center no-repeat;}ul.menuleft .active a { background:url(images/zva.jpg) left center no-repeat;}

ul.menuleft li li a:hover { background:url(images/zvmin.jpg) left center no-repeat;} /* /меню левое*/

Стандартные шаблоны EVO MODX Wayfinder

outerTpl шаблон всего контейнера меню:

<ul> [+wf.wrapper+] </ul>

rowTpl шаблон пункта меню:

<li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li[+wf.classes+]>

innerTpl — шаблон контейнера под-меню:

<ul[+wf.classes+]>[+wf.wrapper+]</ul>

innerRowTpl — шаблон под-пунктов:

<li[+wf.classes+]><a href="[+wf.link+]"title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

hereTpl — шаблон активного пункта меню:

<li[+wf.classes+]><span>[+wf.linktext+]</span>[+wf.wrapper+]</li>

Плейсхолдеры для шаблонов:

[+wf.classes+] — будет заменен классом (включая)
[+wf.classnames+] — будет заменен именем класса (без)
[+wf.link+] — место для гиперссылки (значения href)
[+wf.title+] — место для текста атрибута title для ссылки
[+wf.linktext+] — место вставки текста гиперссылки
[+wf.wrapper+] — место вставки подменю
[+wf.id+] — место вставки уникального id
[+wf.attributes+] — место вставки атрибутов ссылки
[+wf.docid+] — место вставки идентификатора текущего документа
[+wf.description+] — описание документа

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

Что бы отображалось подменю только активного меню

&hideSubMenus=`true`

Не обращать внимания на галочки показывать или не показывать в меню:

&ignoreHidden=`true`

Не переносить строку при выводе:

&removeNewLines=`true`

Не выводить все документы указанные через запятую:

&excludeDocs=`1, 4, 46`

Класс (css) отображения активного пункта меню:

&hereClass=`active`

Сортировка

&sortOrder (порядок сортировки)

ASC - по порядку
DSC - против порядка

По умолчанию: ASC

&sortBy (сортировать по)

id
menutitle (название пункат меню)
pagetitle (название документа)
introtext
menuindex
published (по дате публикации)
hidemenu
parent (по родителю)
isfolder
description (описание документа)
alias(название ссылки)
longtitle (расширенный заголовок)
type (тип докумена)
template (номер шаблона)

По умолчанию: menuindex (номер в меню)