Для вывода статей нам понадобятся два сниппета getResources и getPage. Но для начала нам нужно создать хотя бы пару статей и дополнительный шаблон специально для них.

Как создать статью Вы можете ознакомиться в статье "Создание страницы". А создать шаблон вам поможет статья "Шаблон" .

В итоге у Вас должно получиться дерево:

 

Теперь приступим к выводу их на странице "Статьи" с индификатором 2. Октрываем этот ресурс для редактирования, убираем галочку "Toggle Editor" и в поле "Содержимое ресурса" введем код:

[[!getPage?
&cache=`1`
&elementClass=`modSnippet`
&element=`getResources`
&parents=`[[*id]]`
&includeContent=`1`
&limit=`10`
&tpl=`AllArticles`
&pageFirstTpl=` <li class="control"><a href="">Первая</a></li> `
&pageLastTpl=` <li class="control"><a href="">Последняя</a></li> `
]]
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
[[!+page.nav]]
</ul>
</div>
</div>

Чтобы все время не снимать галочку с "Toggle Editor" зайдите во вкладку ресурса "Настройки" и убирите флажок с "Использовать HTML-редактор".

Этот код вывидит нам первые 10 статей, используя шаблон "AllArticles", это если кратко. Но давайте рассмотрим все поочередно:

  1. Сниппет getPage позволит нам вывести статьи с использованием пагинации.
  2. Сниппет getResources позволит нам вывести сами статьи.
  3. В параметре &parents мы указываем индификатор(ID) ресурса, который является родителем статей, в нашем случае это "Статьи" с индификатором 2. Вместо [[*id]] Вы можете написать 2, получите тот же результат.
  4. В параметре &includeContent мы разрешаем использование Содержание ресурса, в котором Вы написали текст статьи.
  5. В параметре &limit мы указали количество выводимых статей.
  6. В параметре &tpl мы указали имя чанка-шаблона, который отвечает за отображение статей.

Остальные параметры более или менее понятны, если не понятны, то можете самостоятельно о них прочитать.

Следующий за сниппетом HTML код предназначен для отображения пагинации.

Если Вы обновили страницу со статьями, то пока что ничего не увидите. Для этого нам нужно создать и отформатировать чанк-шаблон "AllArticles". Давайте преступим. Нажимаем на создание чанка и вносим данные в поля. В поле "Код чанка" вносим HTML код:

<article class="well">
<div class="row">
<h5><i class="fa fa-calendar"></i> [[+publishedon:strtotime:date=`%d`]] [[+publishedon:strtotime:date=`%b`]] [[+publishedon:strtotime:date=`%Y`]]</h5>
</div>
<div class="row">
<h3><a href="[[~[[+id]]]]"></a></h3>
<div class="col-lg-12 col-md-12">
[[+content:ellipsis=`300`]] <br><br><a class="btn btn-primary btn-lg" href="[[~[[+id]]]]">Читать дальше</a>
</div>
</div>
</article>

Для отображения даты в русском формате, в настройках системы (раздел "Словарь и язык") найдите параметр "Локаль"(locale) и замените его значение на ru_RU.UTF-8

Добавление изображения

Теперь можете обновить страницу со статьями и посмотреть, что у Вас получилось. Для полноты нам не хватает картинки статьи. Для этого нам нужно будет создать Дополнительное поле (TV параметр) для нашего шаблона.

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

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

Теперь нам нужно подправить вывод статей, которые находятся в чанке-шаблоне "AllArticles", заходим в него для редактирования. здесь нам нужно подправить HTML код. После вывода заголовка, т.е. кода:

<h3><a href="[[~[[+id]]]]">[[+pagetitle]]</a></h3>

 втавляем код:

<div class="col-lg-4 col-md-12">
   <a href="[[~[[+id]]]]"><img src="[[+tv.Image]]" class="img img-responsive" alt="" title="[[+pagetitle]]"></a>
</div>

и в следующем <div> меняем 

class="col-lg-12 col-md-12" на class="col-lg-8 col-md-12"

Но и это еще не все! Переходим в наш ресурс "Статьи" и добавляем параметр &includeTVs='1'. Этот параметр разрешает нам использовать дополнительные поля, прикрепленные к шаблону. Теперь обновим страницу со статьями и если Вы видите статьи и у одной из них есть изображение, то поздравляю, Вы все сделали правильно! И последнее, если Вы хотите увидеть как будет выглядить пагинация статей, то измените параметр &limit сниппета getPage на 1 (он находится у Вас в поле "Содержимое ресурса" ресурса "Статьи").

Если у Вас появились ко мне вопросы по данной статье, задавайте их в комментариях ниже.