В это статье мы создам блог на нашем сайте, который управляется движком MODx Revo, сделаем автоматический вывод статей и добавим систему дополнительных полей, что позволит нам гибко настраивать каждую статью.

Вступление

Важное примечание: я заранее набросал простые стили на элементы сайта, которые мы сейчас добавим. При непосредственном создании сайта стили накидываются уже на структурированные элементы, сейчас мы обучаемся организации "скелета" и смотреть способы и навыки стилизации мы не будем. Из прошлых уроков мы уже знаем, как создавать разные структурные элементы страниц и что значат конструкции в квадратных скобках.

В прошлом видео-уроке мы структурировали основные элементы нашего сайта и добавили систему общих настроек, ниже будут полезные ссылки:

Создание ресурса Блог

Для начала мы создадим новый ресурс и назовём его "Блог", зададим ему начальный шаблон, псевдоним "blog", опубликован и заполним остальные поля, не забудем убрать в настройках "Использовать HTML-редактор".

В содержимое мы поместим следующий код:

<h1>[[*pagetitle]]</h1>
<div class="navig-dop">
[[$navig-top]]
</div>
<section class="section-blog">
[[!pdoPage?
&element=`getResources`
&parents=`5`
&limit=`[[#3.tv.max-news]]`
&tpl=`news_output`
]]
</section>

Создание категории и чанка вывода статей

Теперь создадим категорию "Блог" и используем её для выделения системных элементов в отдельную группу.

Теперь создадим чанк вывода страниц блога поштучно news_output, категория – Блог, содержание:

<article style="background-image:url('[[++site_url]][[#[[+id]].tv.a-img]]')">
<span class="a-date">[[#[[+id]].publishedon:strtotime:date=`%d.%m.%Y`]]</span>
<span class="a-avtor">[[#[[+id]].tv.a-avtor]]</span>
<h3>[[+pagetitle]]</h3>
<p>[[#[[+id]].content:ellipsis=`100`]]</p>
<a href="[[++site_url]]blog/[[#[[+id]].alias]]" title="Читать - [[+pagetitle]]"></a>
</article>

Создание шаблона

Теперь создадим новый шаблон "Блог-пост", чтобы создать группу описывающих только его дополнительных (TV) полей, категория – Блог, содержание:

<!DOCTYPE html>
<html lang="ru">
[[$head]]
<body>
[[$header]]
<main>
<div class="navig-dop">
[[$navig-top]]
</div>
<section class="section-blog">
<div class="header-blogpost" style="background-image:url('[[++site_url]][[#[[*id]].tv.a-img]]')">
<span class="a-date-2">[[#[[*id]].publishedon:strtotime:date=`%d.%m.%Y`]]</span>
<span class="a-avtor-2">[[#[[*id]].tv.a-avtor]]</span>
<h1>[[*pagetitle]]</h1>
</div>
<div class="article">
[[*content]]
</div>
</section>
</main>
[[$footer1]]
[[$scripts1]]
</body>
</html>

Создание TV полей и статей

Наши TV поля:

max-news – кол-во статей на страницу, категория: Блог, доступно: настройки. А также a-img и a-avtor – изображение и автор, категория: Блог, доступно: Блог-пост.

Отлично, теперь создадим несколько статей, например, шесть и поставим им шаблон: Блог-пост, опубликован, произвольные данные в основных и дополнительных полях (картинку я нашёл и загрузил заранее. Я не советую использовать неоптимизированные специальными сервисами картинки, а также картинки, кратно больше необходимого размера – это только уменьшает скорость загрузки сайта, не давая взамен абсолютно никаких преимуществ).

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

Создание меню 'хлебные крошки'

Теперь создадим меню по типу "хлебные крошки" – сделаем новый чанк navig-top и поместим туда следующий код:

[[*id:is=`5`:then=`
<a href="[[++site_url]]" title="Главная - перейти">Главная</a><span>[[*pagetitle]]</span>
`]]
[[*parent:is=`5`:then=`
<a href="[[++site_url]]" title="Главная - перейти">Главная</a><a href="[[++site_url]]blog" title="Блог - перейти">Блог</a><span>[[*pagetitle]]</span>
`]]

Дополнение меню и проверка

Внесем в нашу навигацию новую страницу блог, внесем изменения в мета тег в head сайта:

<meta property="og:type" content="[[*parent:is=`5`: then=`article`:else=`website`]]"/>

Перейдём в настройки и установим лимит статей 6.

Пришло время проверить, всё ли работает так, как мы хотели. Перейдём на наш сайт, перейдём по ссылке в наш блог, да, все статьи выводятся, каждое TV поле заполнено – отлично. Попробуем нажать на статью – отлично, ссылка ведёт куда нужно и дополнительное строчное меню всё верно отображает.

Заключение

Поздравляю, вы сделали полноценный блог на MODx Revo. В следующем ролике мы сделаем AJAX пагинацию по нему и поиск по ключевым словам.

Работать с MODx очень удобно и мы убедились в этом на практике, наш ролик по этой теме на YouTube занимает всего 6 минут. Мы и дальше будем продолжать делиться с вами полезной информацией, разумеется, её аналоги можно было найти в интернете и ранее, но мы постараемся сэкономить ваше время, чтобы вы могли уделить больше времени самой разработке.

Вам нужно создать сайт или обновить его? - Не теряйте времени, обращайтесь к профессионалам!