В прошлом уроке мы создали шаблон для статей и надеюсь что вы добавили хотя бы 5 статей. Сегодня мы будем дорабатывать данный шаблон: добавим в него сайтбар и разместим в нем пару блоков.
Перекраиваем дизайн — добавляем сайтбар
В прошлом уроке код контентной части выглядел так:
<section class="bg-white py-4">
<article class="container">
<div class="card">
{if $_modx->resource.video?}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="{$_modx->resource.video}" title="{$_modx->resource.pagetitle}" frameborder="0" allowfullscreen></iframe>
</div>
<link rel="stylesheet" href="/template/css-js/responsive-video.css">
{else}<img class="card-img-top" src="{$_modx->resource.img}" alt="{$_modx->resource.pagetitle}">
{/if}
<div class="card-body">
<h1>{$_modx->resource.pagetitle}</h1>
{$_modx->resource.introtext}
{$_modx->resource.content}
</div>
</div>
</article>
</section>Самый простой способ разбить его на 2 части, это воспользоваться bootstrap сеткой, в конечном итоге получаем примерно такой код:
<section class="bg-white py-4">
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-8">
<article class="card">
{if $_modx->resource.video?}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="{$_modx->resource.video}" title="{$_modx->resource.pagetitle}" frameborder="0" allowfullscreen></iframe>
</div>
{else}<img class="card-img-top" src="{$_modx->resource.img}" alt="{$_modx->resource.pagetitle}">
{/if}
<h1>{$_modx->resource.pagetitle}</h1>
<div class="card-body">
{$_modx->resource.introtext}
{$_modx->resource.content}
</div>
</article>
</div>
<aside class="col-lg-3 col-md-4 d-none d-md-block">
контент сайтбара
</aside>
</div>
</div>
</section>Теперь можно добавлять какие-нибудь блоки в сайтбар. Чтобы не громоздить код шаблона, давайте вынесем сайтбар в отдельный чанк aside.tpl. Чтобы не запутаться в дальнейшем в файловых чанках, создайте в директории «chunks» поддиректорию «blog» и в ней уже создайте чанк aside.tpl.
и подключим его в шаблон: {include 'file:chunks/blog/aside.tpl'}
Вывод последних статей в сайтбаре
Для этого воспользуемся bootstrap компонентов: list-group (Links and buttons) и посадим его на pdoMenu, в конечном итоге получим следующий код:
{'!pdoMenu' | snippet : [
'level' => 1,
'parents' => $_modx->resource.parent,
'resources' => -$_modx->resource.id,
'firstClass' => '0',
'lastClass' => '0',
'showHidden' => '1',
'limit' => '7',
'rowClass' => 'list-group-item list-group-item-action',
'tpl' => '@INLINE <a {$classes} href="{$link}"{$attributes}>{$menutitle}</a>{$wrapper}',
'tplOuter' => '@INLINE {$wrapper}'
]}Здесь в 'parents' мы выводим id категории в которой находиться статья и resources исключаем конкретно эту статью (чтобы — она так сказать сама на себя не ссылалась. В общем это конструкция будет отлично работать при мультикатегорийности.
Вывод липкого рекламного блока
Чтобы у блоков был похожий внешний вид воспользуемся bootstrap компонентом card, а чтобы блок прилипал после прокрутки воспользуемся классом sticky-top.
В конечном итоге получаем примерно следующий код.
<div class="card sticky-top">
<div class="card-body">
<p class="h5">Рекомендуем</p>
<hr>
<a href="#" target="_blank"><img class="img-fluid" src="https://mykrozaym.ru/template/img/blog/money.gif" alt="баннер"></a>
</div>
</div>Конечный код шаблона
{extends 'file:templates/base.tpl'}
{block 'content'}
<header class="bg-light pt-2 border-bottom">
<div class="container">
{'!pdoCrumbs' | snippet : [
'showHome' => 1,
'showAtHome' => 0,
'tpl' => '@INLINE <li class="breadcrumb-item"><a title="{$menutitle}" href="{$link}">{$menutitle}</a></li>',
'tplHome' => '@INLINE <li class="breadcrumb-item"><a rel="nofollow" title="{$menutitle}" href="{$link}">{$menutitle}</a></li>',
'tplWrapper' => '@INLINE <nav aria-label="breadcrumb"><ol class="breadcrumb">{$output}</ol></nav>',
'tplCurrent' => '@INLINE <li class="breadcrumb-item active" aria-current="page">{$menutitle}</li>'
]}
</div>
</header>
<section class="bg-white py-4">
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-8">
<article class="card">
{if $_modx->resource.video?}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="{$_modx->resource.video}" title="{$_modx->resource.pagetitle}" frameborder="0" allowfullscreen></iframe>
</div>
<link rel="stylesheet" href="/template/css-js/responsive-video.css">
{else}<img class="card-img-top" src="{$_modx->resource.img}" alt="{$_modx->resource.pagetitle}">
{/if}
<div class="card-body">
<h1>{$_modx->resource.pagetitle}</h1>
{$_modx->resource.introtext}
{$_modx->resource.content}
</div>
</article>
</div>
{include 'file:chunks/blog/aside.tpl'}
</div>
</div>
</section>
{/block}где чанк «aside.tpl» имеет следующий код.
<aside class="col-lg-3 col-md-4 d-none d-md-block">
<div class="list-group mb-3">
<p class="list-group-item list-group-item-action h5 mb-0">Новое в блоге</p>
{'!pdoMenu' | snippet : [
'level' => 1,
'parents' => $_modx->resource.parent,
'resources' => -$_modx->resource.id,
'firstClass' => '0',
'lastClass' => '0',
'showHidden' => '1',
'limit' => '7',
'rowClass' => 'list-group-item list-group-item-action',
'tpl' => '@INLINE <a {$classes} href="{$link}"{$attributes}>{$menutitle}</a>{$wrapper}',
'tplOuter' => '@INLINE {$wrapper}',
'sortby' => '{ "publishedon":"ASC" }'
]}
</div>
<div class="card sticky-top">
<div class="card-body">
<p class="h5">Рекомендуем</p>
<hr>
<a href="#" target="_blank"><img class="img-fluid" src="https://mykrozaym.ru/template/img/blog/money.gif" alt="баннер"></a>
</div>
</div>
</aside>В итоге имеем статьи с сайтбаром, с таким внешним видом.
Следовательно при прокрутке страницы липкий сайтбар прилипает к верху.
В следующем уроке в данный сайтбар добавим поиск по блогу на чистом Fenom.
