Вывод статей (ресурсов) в MODx Revo.

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

Как это сделать вы сможете посмотреть в видео данного урока. Заметили иконки у ресурсов? Хотите сделать также? Тогда читайте статью “Как сделать иконку шаблона MODX Revo”.

Далее откройте ресурс “Тестовая статья” в браузере. Заметили странность? Вроде мы закачали все файлы шаблона, интегрировали шаблон, а верстка не отображается… Хм… Чтобы избавиться от данного бага нам необходимо в чанке “meta”, который мы создали на прошлом уроке дописать вот такую строчку:

<base href="[[++site_url]]" />

Теперь, когда вы откроете страничку “Тестовая статья” в браузере, то мы увидим, что у нас частично пропал header, так как на внутренних страницах он немного другой. Поэтому создадим чанк “headerInner” и разместим в нем код шапки внутренних страниц. Также не забудьте, что нужно поменять вызов чанка во всех шаблонах, кроме главной. Также советую убрать в чанк сайдбар с поиском и категориями. Я его убрал в чанк “blogSidebar”.

Теперь у нас все готово. Если вы откроете страницу блога в браузере, вы увидите, что посты могут быть разного типа. В нашем курсе, мы будем делать только посты с картинкой и текстовые.

Для того, чтобы прикрепить картинку к статье, нам нужно создать TV-поле, которое позволит нам это сделать. Для этого кликаем на вторую кнопку на панели элементов, заполняем следующее:

• Имя – image
• Подпись – изображение
• Описание – не меньше 1100x602px
• Категория – элементы страниц
• Параметры ввода – изображение
• Параметры вывода – по умолчанию
• Доступно для шаблонов – Пост

Теперь мы можем прикрепить картинку к посту. Что мы и сделаем: перейдите в админке на ресурс “Тестовая статья” и на вкладке дополнительные поля прикрепите картинку (ее сначала нужно загрузить на сервер, см. видео). Думаю, вы поймете за что отвечает подпись, описание и категория.

Что ж отлично! Теперь в шаблоне “Пост” нам необходимо сделать вызов картинки и контента статьи.

Сколько же непонятных тегов! То, что я сделал, подробно я объясню на видео, вам нужно знать, что я воспользовался модификаторами ввода-вывода и вам нужно поставить компонент “phpthumbof” из официального репозитория.

После всех махинации, мы увидим следующее:

А в админке я еще добавил следующее:

Вроде пока все просто. Теперь на странице категории мы сделаем вывод наших статей. Там уже будут работать все ссылки. Для того, чтобы нам это сделать, нам необходимо создать чанк-шаблон (для такого рода чанков я обычно создаю категорию “tpl”). У меня он пока получился следующий (postTpl, здесь код не полный, см. на тестовом сайте):

<div class="post format-image">
  <div class="date-wrapper">
	<div class="date">
	  <span class="month">[[+publishedon:date=`%b`]]</span>
	  <span class="day">[[+publishedon:date=`%d`]]</span>
	</div>
  </div>
  <div class="format-wrapper">
	<a href="[[~[[+id]]]]"><i class="fa fa-image"></i></a>
  </div>
  <div class="post-content">
	<div class="post-media">
	  <img src="[[+tv.image]]" alt="[[+pagetitle:htmlent]]">
	</div>
	<h2 class="post-title">[[+pagetitle]]</h2>
	<ul class="meta">
	  <li>Posted By : Admin</li>
	  <li><a href="#">OffTopic</a>, <a href="#">Announcements</a></li>
	  <li><a href="#">3 Comments</a></li>
	</ul>
	<p>[[+introtext]]</p>
	<a href="[[~[[+id]]]]" class="le-button huge">Подробнее</a>
  </div>
</div>

Так как вывод мы будем делать с помощью сниппета pdoResources, то теги MODx у нас не со звездочкой, а со знаком “+”. Советую вам подробно почитать про:

• Фильтры ввода-вывода
• Формат дат в MODx Revo
• Синтаксис тегов в MODx Revo
• Документация к pdoTools

После прочтения данных статей, вам все станет более менее ясно. А мы тем временем переходим к выводу наших статей. На странице у нас находится пагинация (разбивка на страницы), следовательно выводить посты мы будем с помощью сниппета-обертки “pdoPage” (документацию к нему вы найдете выше). Данный сниппет необходимо вызвать в шаблоне “Блог”, привожу код шаблона, который получился у меня (здесь код не полный, см. на тестовом сайте):

<html lang="ru">
  <head>
	[[$meta]]
  </head>  
  <body>
	<div class="wrapper">
	  [[$headerInner]]
	  <main id="blog" class="inner-bottom-xs">
		<div class="container">
		  <div class="row">
			<div class="col-md-9">
			  <div class="posts sidemeta">
				[[!pdoPage?
				&element=`pdoResources`
				&parents=`[[*id]]`
				&tpl=`postTpl`
				&includeTVs=`image`
				&hideContainers=`1`
				&limit=`10`
				]]
			  </div><!-- /.posts -->
			  <hr/>
			  [[!+page.nav]]
			</div>			
			<div class="col-md-3">
			  [[$blogSidebar]]
			</div>
		  </div>		  
		</div>
	  </main>
	  [[$footer]]
	</div>
	[[$scripts]]
  </body>
</html>

Подробно про все эти параметры я вам расскажу в видео. Также вы можете прочитать про них в официальной документации (благо она на русском). И я вас поздравляю! Наш шаблон блога больше не поменяется (если, конечно, не найдутся какие-нибудь баги). Он у нас получился универсальный и подойдет для любой категории блога, что очень даже неплохо. Не правда ли?

На этом все! Ждите следующего урока.

Автор Петропавловский Артем

Основатель и ведущий разработчик DART Agency. Пишу о разработке, продажах и процессах в IT.