Добавляем в статьи сайтбар и выводим в нем последние статьи и липкий рекламный блок

статья с сайтбаром MODX Revo

В прошлом уроке мы создали шаблон для статей и надеюсь что вы добавили хотя бы 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.

Понравилась статья? Можно поблагодарить автора: отправив ему донат на
YooMoney
или
Qiwi
. Либо поделившись статьей ☟
Поделиться с друзьями
Алексей

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

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