Создание одностраничного сайта на Modx Revolution

Пошаговая инструкция по созданию одностраничного сайта или отдельного раздела на сайте на Modx Revolution. Для примера будет создание слайдера, хотя можно сделать, например, раздел со статьям, каталог или галерею.

Установить дополнения

MIGX, pdo Tools

Создать шаблон

Чанки head и footer имеют стандартное содержимое, нет смыла его публиковать. Выводим чанки.

[[$head]]
[[$slider]]
[[$footer]]

Создать чанк slider

Это будет контейнер для слайдов с id=2.

<ul>
 [[!pdoResources? 
 &parents=`2` 
 &depth=`0`
 &tpl=`slide` 
 &sortby = `menuindex`
 &sortdir = `ASC`
 &includeTVs=`slide, link`
&includeContent=`1`
 ]]
</ul>

 &includeContent=`1` - это необходимо для вывода поля [[+content]]

Создать чанк slide

Шаблон слайда. Через phpthumbsup указывается размер картинки. Про TV slide и link ниже.

<li>
<img src="/[[+tv.slide:phpthumbsup=`w=1920&h=1080`]]" alt="slide" class="img-responsive">
<h1>[[+pagetitle]]</h1>
<p>[[+description]]</p>
<a href="/[[+tv.link]]"> link </a>
</li>

Создать TV

slide - параметры ввода - изображение.

link - параметры ввода - текст.

Список статей

Для создания списка статей нужно установить дополнение PDO Tools.

Создаем шаблон отдельной статьи:

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>[[*longtitle]]</h2>
<a class="thumbnail" href="#">
<img class="img-responsive" src="/<a href="http://placehold.it/400x300"">http://placehold.it/400x300"</a> alt="">
</a>
[[*introtext]]
</div>

Выводим список на главной:

[[pdoResources? 
&parents=`2` 
&depth=`1` 
&tpl=`uslugaTpl` 
&limit=`6`
&includeTVs=`ArticleThumbnail`]]

ArticleThumbnail - это название TV, в которой я держу ссылку на изображение.

Параметры ввода- файл, параметры вывода - изображение.

Отдельная статья

Создаем шаблон отдельной статьи - чанк uslugaTpl

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>[[+pagetitle]]</h2>
<a class="thumbnail" href="#">
<img class="img-responsive" src="/[[+tv.ArticleThumbnail:phpthumbof=`w=120&h=120&zc=1`]]" alt="">
</a>
[[*introtext]]
[[*content]]
</div>

В этом чанке используются следующие плейсхолдеры:

[[+pagetitle]]

[[+tv.ArticleThumbnail:phpthumbof=`w=120&h=120&zc=1`]]

Причем, phpthumbof=`w=120&h=120&zc=1 - это параметры ресайза изображения при помощи сниппета phpthumbof.

Надеюсь, ничего не забыл.