В это статье мы создам блог на нашем сайте, который управляется движком 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 минут. Мы и дальше будем продолжать делиться с вами полезной информацией, разумеется, её аналоги можно было найти в интернете и ранее, но мы постараемся сэкономить ваше время, чтобы вы могли уделить больше времени самой разработке.
Вам нужно создать сайт или обновить его? - Не теряйте времени, обращайтесь к профессионалам!
Источник: Веб студия WITECH