В данном уроке выведем все категории блога с (количеством статей) в сайтбар сайта.
Статический HTML код у нас следующий:
<aside class="single_sidebar_widget post_category_widget">
<h4 class="widget_title">Category</h4>
<ul class="list cat-list">
<li>
<a href="#" class="d-flex">
<p>Resaurant food</p>
<p>(37)</p>
</a>
</li>
<li>
<a href="#" class="d-flex">
<p>Travel news</p>
<p>(10)</p>
</a>
</li>
<li>
<a href="#" class="d-flex">
<p>Modern technology</p>
<p>(03)</p>
</a>
</li>
<li>
<a href="#" class="d-flex">
<p>Product</p>
<p>(11)</p>
</a>
</li>
<li>
<a href="#" class="d-flex">
<p>Inspiration</p>
<p>(21)</p>
</a>
</li>
<li>
<a href="#" class="d-flex">
<p>Health Care</p>
<p>(21)</p>
</a>
</li>
</ul>
</aside>
Для того чтобы сделать данный код динамическим, воспользуемся сниппетом PdoMenu, получим следующий код (немного оптимизировал убрал p):
<aside class="single_sidebar_widget post_category_widget">
<h4 class="widget_title">Категории блога</h4>
[[pdoMenu?
&parents=`11`
&level=`1`
&showHidden=`1`
&firstClass=`0`
&lastClass=`0`
&countChildren=`1`
&outerClass=`list cat-list`
&tpl=`@INLINE <li [[+classes]]><a class="d-flex" href="[[+link]]" [[+attributes]]>[[+menutitle]] ([[+children]])</a>[[+wrapper]]</li>`
]]
</aside>
Для тех кто проходит курс по Fenom, для вас вывод примерно следующий:
<div class="list-group mb-3">
<p class="list-group-item list-group-item-action h5 mb-0">Новое в блоге</p>
{'!pdoMenu' | snippet : [
'level' => 1,
'parents' => 10,
'firstClass' => '0',
'lastClass' => '0',
'showHidden' => '1',
'rowClass' => 'list-group-item list-group-item-action',
'tpl' => '@INLINE <a {$classes} href="{$link}"{$attributes}>{$menutitle}</a>{$wrapper}',
'tplOuter' => '@INLINE {$wrapper}',
]}
</div>
Оба кода под bootstrap. Не забудьте в parents
поставить id главной категории блога.
Документация по PdoMenu находится в уроке: pdoMenu — документация и примеры создания меню в MODX.