Организация системы блога на MODx Revo

Статья

view30

Организация системы блога на MODx Revo

В это статье мы создам блог на нашем сайте, который управляется движком 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> [ [$footer] ] [ [$scripts] ] </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 минут. Мы и дальше будем продолжать делиться с вами полезной информацией, разумеется, её аналоги можно было найти в интернете и ранее, но мы постараемся сэкономить ваше время, чтобы вы могли уделить больше времени самой разработке.

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