Вывод категорий блога в сайтбар

Вывод категорий блога в сайтбар MODX Revo
Рамках данного урока разберем как в сайтбар блога на MODX Revo вывести блок с категориями при помощи pdoMenu.

В данном уроке выведем все категории блога с (количеством статей) в сайтбар сайта.

Статический 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.

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru