Приветствую вас уважаемые читатели! В предыдущих статьях мы наполнили сайт контентом, сделали меню и хлебные крошки. Сегодня мы изучим сниппет pdoResources, который входит в состав пакета PdoTools и предназначен для вывода ресурсов в любом оформлении на любой странице.
В моем случае мне нужно заменить статический контент на главной странице (из чанка content), если вы помноте он выглядит так:
А статический код этого чанка сейчас такой:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="row text-center"> <div class="col-xs-12 col-sm-6 col-md-4"> <p class="title"><a href="[[~8]]"><img class="img-resp" src="assets/img/1.png" alt="Вертикальные"><br>Вертикальные</a></p> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <p class="title"><a href="[[~9]]"><img class="img-resp" src="assets/img/2.png" alt="Горизонтальные"><br>Горизонтальные</a></p> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <p class="title"><a href="[[~10]]"><img class="img-resp" src="assets/img/3.png" alt="В форме креста"><br>В форме креста</a></p> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <p class="title"><a href="[[~11]]"><img class="img-resp" src="assets/img/4.png" alt="Детские"><br>Детские</a></p> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <p class="title"><a href="[[~12]]"><img class="img-resp" src="assets/img/5.png" alt="Импортные"><br>Импортные</a></p> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <p class="title"><a href="[[~13]]"><img class="img-resp" src="assets/img/6.png" alt="Мемориальные комплексы"><br>Мемориальные<br/>комплексы</a></p> </div> </div> |
По идее все можно оставить и так, ссылки прописаны (<a href=»[[~13]]»>), все работает. Если бы я делал сайт для себя возможно так бы все и оставил, но сайт не для себя, а для человека который далек от веб-дизайна, да и мало ли появиться новый раздел или удалиться какой нибудь раздел, не лазить же постоянно по коду и удалять (добавлять) зад назад. По то эму его лучше сделать динамичным. И так начнем.
Первым делом создаем чанк где будет формироваться оформление и контент, назовем его «home» и вставим в него повторяющуюся часть кода:
1 2 3 | <div class="col-xs-12 col-sm-6 col-md-4"> <p class="title"><a href="[[~8]]"><img class="img-resp" src="assets/img/1.png" alt="Вертикальные"><br>Вертикальные</a></p> </div> |
Если вы заметили у меня 6 таких однотипных блоков. Теперь сделаем этот блок динамичным:
1 2 3 | <div class="col-xs-12 col-sm-6 col-md-4"> <p class="title"><a href="[[+uri]]"><img class="img-resp" src="[[+tv.image]]" alt="[[+pagetitle]]"><br>[[+pagetitle]]</a></p> </div> |
Краткий разбор:
- [[+uri]] — формирует ссылку на ресурс
- [[+tv.image]] — выводит изображение из дополнительного поля image
- [[+pagetitle]] — заголовок ресурса
Теперь удаляем все статическое содержимое из этого чанка и вызываем все это содержимое при помощи pdoResources.
1 2 3 4 5 6 7 8 9 | <div class="row text-center"> [[pdoResources? &parents=`7` &depth=`0` &tpl=`home` &includeTVs=`image` &sortdir=`ASC` ]] </div> |
Краткое описание параметров:
1 2 3 4 5 | &parents =`7` - родители ресурсов (0 - все ресурсы) &depth =`0`- уровень вложенности &tpl =`home` - чанк оформления, для вывода ресурсов &includeTVs =`image` - подключаем TV поля (через запятую) &sortdir =`ASC` - направление сортировки |
Подробнее обо всех параметрах, читайте в официальной документации: docs.modx.pro/components/pdotools/snippets/pdoresources
Таким образом можно вывести практически все что угодно.
Да точно таким же образом можно все вывести при помощи PdoPage и в добавок к тому если много ресурсов для вывода, то их можно разбить на страницы, об этом в следующем уроке: Вывод ресурсов при помощи pdoResources
