Вывод статей (ресурсов) в 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 у нас не со звездочкой, а со знаком “+”. Советую вам подробно почитать про:

После прочтения данных статей, вам все станет более менее ясно. А мы тем временем переходим к выводу наших статей. На странице у нас находится пагинация (разбивка на страницы), следовательно выводить посты мы будем с помощью сниппета-обертки “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>

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

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

Оцените статью:

Проголосовало: 49

Комментарии (21)

  1. Константин 20 марта 2017, 11:00 # 0
    Почему-то в разделе Новости компании есть изображение, а когда проваливаешься в саму статью изображение пропадает
    1. Петропавловский Артем 20 марта 2017, 14:30 # 0
      Вывести можно так в шаблоне статьи:
      <img src="[[*image]]" alt="[[*pagetitle:htmlent]]">
      1. Константин 20 марта 2017, 14:36(Комментарий был изменён) # 0
        В демо доступе на сайт такой строки нет, тем не менее изображение выводится. И еще два момента. 1.Что это за Коммент и как сделать что бы около этого слова выводилось кол-во комментарием?2.Не корректно выводится дата.
        1. Петропавловский Артем 20 марта 2017, 14:41(Комментарий был изменён) # 0
          Количество комментариев — Как вывести количество комментариев Tickets, а дата некорректно выводится нужно сделать следующее: Чанк вывода pdoResources — [[+publishedon:date=`%b`]]Шаблон — [[+publishedon:strtotime:date=`%b`]]
          1. Константин 21 марта 2017, 07:50(Комментарий был изменён) # 0
            Вывод изображения исправил а дата по прежнему не корректно выводится
            1. Константин 21 марта 2017, 08:02 # 0
              После сохранения шаблона «статья», и обновления страницы дата появляется, но при последующем обновлении снова слетает
              1. Петропавловский Артем 21 марта 2017, 08:49 # 0
                хм… не должно, возможно, что-то в окружении не так (например, расширения PHP какого-то не хватает).
      2. Арт 20 марта 2017, 19:50 # 0
        Здравствуйте! У меня БД слетела. А делать все заново не хочется. Можно ли как то из FTP через папки вытащить файлы созданные шаблонов и чанков??
        1. Петропавловский Артем 21 марта 2017, 08:49 # 0
          Достать из файлов БД не получится
        2. Арт 20 марта 2017, 21:12 # 0
          Еще, можете скинуть код который вы пишите в шаблоне статьи и комментариях, а то сколько вбиваю, что-то да не работает…
          1. Петропавловский Артем 21 марта 2017, 08:50 # 0
            Весь код есть на тестовом сайте, доступ найдете в этой статье Интернет-магазин на MODx Revo
          2. Андрей 29 марта 2017, 17:18 # 0
            Подскажите пожалуйста, пытаюсь посадить галлерею с помощью TV полей и MIGX. Проблема в том, что к картинкам нужно ещё добавить подпись через «alt».<img alt=«Подпись „ src=“images/big/tile1.jpg» data-image=«images/big/tile1.jpg» style=«display:none»>Как выводить картинки примерно понятно, а можно ли ещё и подпись к каждой фотографии через TV делать?
            1. Сергей 20 мая 2017, 00:39 # 0
              Артём, стоит задача вывести последние статьи в слайдер, причём в каждом слайде по 2 статьи. Всего 3 слайда, 6 статей (точнее — анонсов статей). Слайдер — обычная бутстраповская карусель. Как это можно реализовать?
              1. Сергей 20 мая 2017, 01:42 # 0
                Вот, пришла идейка, но не уверен, что сработает. Выводим через pdoResources с лимитом в 2 отдельно в каждый слайд, причём во втором слайде указываем параметр &offset=`2`, а в третьем &offset=`4`, и для всех слайдов &sortdir=`DESC`. Интересно, по документации &offset — пропуск результатов с начала, а вместе с &sortdir=`DESC` будет работать как пропуск результатов с конца? Жаль, что проверить сейчас не могу.
              2. Соломон 07 июня 2017, 12:17 # 0
                Артем, подскажите, пожалуйста, а можно ли вывести теги в карточке товара MiniShop2? В других местах теги отлично выводятся. И в Каталоге, и в разделе каталога, и в поиске по тегам — товар находится и теги отображаются. А вот в самой карточке товара выводится вот такое «Теги: Array ( [0] => tags [1] => Тег_товара [2] => default [3] => [4] => autotag ) ». Уже всю голову сломал)) Не могу найти ответ. Заранее спасибо
                1. Петропавловский Артем 07 июня 2017, 12:38 # 0
                  Если вы используете теги miniShop2 то вам поможет вывести их следующая конструкция:
                  [[!msOptions?name=`tags`&tplOuter=`@INLINE <p><strong>Tags:</strong> [[+rows]]</p>`&tplRow=`@INLINE <a href="search.html?tag=[[+value]]">[[+value]]</a> `]]
                  1. Соломон 07 июня 2017, 13:41 # 0
                    К сожалению не помогает. Вставил этот код в шаблоне Товар вместо [[!tolinks? &items=`[[*tags]]` &tpl=`tagRowTpl` &target=`12` ]]. Выводится выпадающий список: tags Тег_товара_1, Тег_товара_2 default autotag. Извиняюсь, если туплю))
                2. Михаил 08 июня 2017, 03:26 # 0
                  Артем, спасибо за труд!пара вопросов:1. как в шаблоне MODX писать(и можно ли) параметры в квадратных скобках [ ], которые не должны быть обработаны парсером, например этот код
                  <a rel="prettyPhoto[gallery1]" ...><img src"..."></a>
                  галереи2. как обрабатывать (делать миниатюры phpthumbof, оборачивать кодом от галерей к примеру) картинки, вставляемые из админки в визуальном редакторе материала, а не с помощью дополнительного поля (т.е. картинки, которые находятся в [[*content]]) спасибо!
                  1. Павел 14 июня 2017, 16:52(Комментарий был изменён) # 0
                    Добрый день, проблема состоит в следующем, есть структура:каталог-->подкаталог--->постПроблема в том что при открытии каталога списком выводится все, подкаталоги и посты, а необходимо что бы выводились только подкаталоги и перейдя в них уже видеть список постов.Вывожу через GetPage
                    [[!getPage@pagi?
                    &elementClass=`modSnippet` 
                    &element=`getResources`
                    &tpl=`post`
                    &includeTVs=`1`
                    &processTVs=`1`
                    &parents=`[[*id]]`
                    &limit=`5`
                    ]]
                    1. Василий 25 октября 2017, 16:25 # 0
                      Одно непонятно, почему при выводе товаров на 3-м уровне при вызове [[!+pageCount]]
                      [[!pdoPage?
                          &parents=`[[*id]]`
                      выводит общее кол-во всех категории и подкатегорий?Надо сделать то, что умеет getPage, а именно На этой странице [[!+pageCount]] результатов. вопрос как это сделать в pdoPage?
                      1. Василий 07 ноября 2017, 19:12 # 0
                        Очень бы хотелось, чтобы эту функцию включили в pdoPage.
                        Есть ли способ, как расширить этот pageCount вручную для pdoPage?