Modx Revolution Pdomenu разные шаблоны для каждого уровня

Question

Интересно, как определить шаблон для каждого уровня в параметрах pdoMenu, если я хочу создать многоуровневое меню на моей веб-странице?

Например, структура меню выглядит примерно так:

<ul>
  <li>
    <div></div>
    <img src="assets/img/1.png" />
    <a>Link 1</a>
    <ul>
      <li>
        <a>Sub link 1</a>
      </li>
      <li>
        <a>Sub link 2</a>
      </li>
    </ul>
  </li>
  <li>
    <div></div>
    <img src="assets/img/2.png" />
    <a>Link 2</a>
    <ul>
      <li>
        <a>Sub link 1</a>
      </li>
      <li>
        <a>Sub link 2</a>
      </li>
    </ul>
  </li>
</ul>

Как вы можете видеть, первый уровень меню включает теги div и img, а второй - нет. Вот почему мне нужно определить различные шаблоны через pdoMenu. К сожалению, нет исчерпывающих примеров для параметров pdoMenu. Кажется, что pdoMenu предоставляет эту функцию только для параметра "&levelClass", который дает приращение для класса css для каждого уровня.

Может быть, я должен использовать какой-то другой подход для этой цели? Pdoresources или getresources?

Answer 1

У Wayfinder есть несколько вариантов шаблонов меню, которые вы можете изучить: https://docs.modx.com/extras/evo/wayfinder

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

Для вашего первого уровня вы бы использовали простой вызов getResources, который ограничивает его до 1 уровня глубины, но в этом.tpl у вас будет второй вызов getResources.

Например:

[[!getResources?
  &parents=`1`
  &depth=`1`
  &tpl=`firstLevel`
]]

затем firstLevel будет выглядеть примерно так:

<li>
  <a href="[[~[[+id]]]]">[[+pagetitle]]</a>
  [[!getResources?
      &parents=`[[~[[+id]]]]`
      &depth=`0`
      &tplWrapper=`menuWrapper`
      &tpl=`secondLevel`
    ]]
</li>

menuWrapper бы просто завернуть secondLevel и выглядеть так:

<ul>[[+output]]</ul>

secondLevel будет выглядеть так:

<li>
  <a href="[[~[[+id]]]]">[[+pagetitle]]</a>
</li>

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

В качестве примечания: если вы хотите добавить изображения, вы можете использовать css, например:

li ul li:first-child:before {
    content: url('../images/image.png');
}