Инструкция по созданию сайта на MODx. Урок 12 — Создание ленты новостей. Сниппет Ditto

В прошлом уроке мы с вами научились создавать навигационную цепочку для сайта. И, в принципе, если вы дошли до этого урока, у вас уже есть вполне рабочий, немного ограниченный в своей функциональности сайт-визитка. Теперь я буду постепенно рассказывать, как вашему сайту добавить различный функционал. Сегодня мы поговорим о выводе новостей на страницах вашего сайта. А в следующих уроках научимся создавать форму обратной связи и разберемся с организацией дополнительного вспомогательного меню.

Итак, не будем отвлекаться, и сразу приступаем к организации новостной ленты в MODx.

Для того, чтобы нам было что выводить, мы должны сперва создать несколько страниц с новостями, поэтому заходим в администраторскую панель сайта и в дереве документов MODx создаем несколько дочерних ресурсов для пункта «Новости». Если вы помните, этот пункт мы создали по ходу 6 урока. Этот пункт не отмечен для показа в меню, но нас пока это устраивает.

Дочерние ресурсы можно создать двумя способами:

1. Нажимаем на пиктограмму «Новый ресурс» и на вкладке с общими настройками, изменяя значение параметра «Папка», указываем родительский ресурс для создаваемой страницы.
2. В дереве документов нажимаем любой кнопкой мыши на пиктограмму, расположенную около названия ресурса, для которого нам необходимо создать дочернюю страницу (кликаем мышкой именно на пиктограмму, а не на текст), после чего появится контекстное меню данного пункта. В контекстном меню выбираем «Дочерний ресурс».

Помимо создания дочернего ресурса, в этом контекстом меню доступно еще много полезных функций. Например, вы можете перейти к редактированию ресурса, переместить его в другую папку в дереве документов, сделать копию, опубликовать или отменить публикацию, удалить или восстановить ресурс. Одним словом, контекстное меню очень полезно, и я очень рекомендую не забывать о нем и, при необходимости, пользоваться.

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

Создайте несколько дочерних ресурсов, например, 5 новостей, чтобы нам было с чем работать. Все они должны быть опубликованы (установлена галочка «Публиковать» на вкладке «Настройка страницы»).

После создания дочерних ресурсов дерево ресурсов примет следующий вид:

Выводить новости на странице мы будем с помощью встроенного сниппета Ditto. Это очень мощный инструмент, и он, наверное, является одним из основных встроенных решений в MODx. С помощью Ditto можно выводить ресурсы, созданные в дереве документов, абсолютно в любом виде на сайте. Такая гибкость достигается за счет работы с шаблонами вывода.

С помощью этого сниппета можно реализовать: вывод статей и новостей на сайте, вывод заметок в блоге, архив статей, RSS ленту, вывод данных в XML формате и еще много полезного. Одним словом, это очень функциональный сниппет и мы с ним будем сталкиваться еще не раз.

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

И так, вызов сниппета осуществляется стандартно. Конструкция нам уже знакома:

[[Ditto? &параметр1=`значение` &параметр2=`значение`]]

Вызывать сниппет мы будем непосредственно на странице «Новости» в области содержимого страницы.

Давайте попробуем сначала вызывать Ditto без передаваемых параметров и посмотрим на результат. Для этого в область визуального редактора страницы «Новости» вставляем конструкцию:

[[Ditto]]

После сохранения вы можете посмотреть, что получилось, нажав на кнопку «Просмотр» в правом верхнем углу страницы либо выбрав из контекстного меню ресурса «Новости» пункт «Просмотр».

Результатом работы этого сниппета будет вывод созданных нами новостей в следующем виде:

Как мы видим из рисунка, у нас вывелись все дочерние ресурсы для страницы «Новости». При выводе использовались поля: «Заголовок», «Аннотация», а также в полученном результате мы видим дату публикации и имя автора, создавшего документ. В качестве даты публикации берется дата создания ресурса, а «Default admin account» — это имя администратора сайта по умолчанию. При этом заголовок каждой новости представляет собой ссылку на страницу с новостью.

Согласитесь, что даже вызов сниппета без передачи параметров дает вполне неплохой результат вывода списка новостей. Но сейчас мы попытаемся изменить внешний вид нашей новостной ленты. Для этого нам придется познакомиться с некоторыми параметрами Ditto.

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

Отправляемся на страницу с чанками: Элементы → Управление элементами → Чанки, и создаем новый чанк с любым понятным нам именем, например, «news-article». Он будет в дальнейшем служить шаблоном вывода каждой новости на нашем сайте. В шаблон мы будем помещать название, краткое содержание новости и дату публикации, при этом заголовок должен быть ссылкой на страницу с новостью.

Обратите внимание, что в коде шаблона Ditto мы можем использовать как специальные теги ресурсов MODx, описанные в 9 уроке, так и специальные теги Ditto.

Нам понадобятся следующие теги:

В недавно созданный нами чанк «news-article» помещаем выше упомянутые теги, пока без какой-либо HTML разметки:

[+date+][+pagetitle+][+introtext+]

А на странице «Новости» вызываем сниппет Ditto, с указанием названия чанка, который будет использоваться в качестве шаблона. При этом конструкция вызова сниппета примет следующий вид:

[[Ditto? &tpl=`news-article`]]

Где, как вы, наверное, уже догадались, параметр &tpl служит для указания названия чанка, используемого в качестве шаблона.

После этого при просмотре страницы «Новости» вы сможете увидеть ленту новостей, выведенную без пробелов и без разметки. Точно так, как было указано в нашем шаблоне news-article.

Но такой вывод никуда не годится, поэтому мы отправляемся дальше редактировать чанк news-article. Нам необходимо с помощью HTML разметки отделить дату, заголовок и краткое описание.

Содержимое чанка после редактирования:

<div id="news">
<h2>[+pagetitle+]</h2>
<div class="introtext"><span class="date">[+date+]</span>[+introtext+]</div>
</div>

В этом случае лента новостей будет выглядеть следующим образом:

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

<h2><a href="[~[+id+]~]" title=”[+pagetitle+]”>[+pagetitle+]</a></h2>

Не пугайтесь, ничего страшного здесь нет, а конструкция [~[+id+]~] — это ничто иное, как URL документа c идентификатором id.

Таким образом, в чанке news-article у нас должна быть следующая разметка:

<div id="news">
<h2><a href="[~[+id+]~]" title="[+pagetitle+]">[+pagetitle+]</a></h2>
<div class="introtext"><span class="date">[+date+]</span> [+introtext+] </div>
</div>

Во время добавления HTML–разметки, мы для каждого контейнера указали название CSS класса, чтобы можно было без труда подкорректировать внешний вид ленты новостей в CSS-файле.

Я предлагаю изменить отступы между новостями, выделить как-нибудь дату публикации и подкорректировать отображение заголовков, которые на данный момент, согласно прописанным стилям, отображаются с большими отступами и с горизонтальной чертой.

Добавляем в файл layout.css следующие CSS стили:

/* ------------News ------------*/
#news {padding:0; margin:0 0 15px 0;} /*отступы между новостями */
#news h2 {padding:0px; margin:0px; border:none} /* заголовок новости без отступов и без подчеркивания снизу */
#news .introtext{padding:5px 0 0 0} /*отступ области с кратким описанием и датой от заголовка */
#news .introtext .date {font-weight:bold;} /* дата публикации, выделяется жирным шрифтом */

После того как вы добавите эти стили в CSS файл и обновите страницу «Новости», внешний вид ленты новостей будет выглядеть вот так:

Это лишь один из немногих вариантов, оформления новостной ленты. Вы же,  в свою очередь, можете сделать абсолютно любой вывод, какой только пожелаете, ведь у вас есть доступ как к редактированию шаблона, так и CSS файла. Например, можете сделать текст краткого описания в виде ссылки или добавить ссылку «Читать далее» после краткого описания. В общем, вариантов море, достаточно только проявить фантазию и, желательно, иметь представление о CSS и HTML.

Если вдруг кто-нибудь из вас не знает, как можно оформить ссылку, привожу пример.

В шаблоне Ditto добавляем после контейнера с CSS-классом introtext следующую конструкцию:

<div class="readmore" ><a href="[~[+id+]~]" title="Перейти к полному тексту новости">Читать дальше →</a></div>

В результате содержимое чанка news-article будет следующим:

<div id="news">
<h2><a href="[~[+id+]~]" title="[+pagetitle+]">[+pagetitle+]</a></h2>
<div class="introtext"><span class="date">[+date+]</span> [+introtext+] </div>
<div class="readmore" ><a href="[~[+id+]~]" title="Перейти к полному тексту новости">Читать дальше →</a></div>
</div>

Таким образом мы добавили ссылку после краткого описания, при желании можете ее выровнять по правому краю, для этого в CSS-файл нужно добавить:

#news .readmore {text-align:right}

После этого итоговые CSS-стили, добавленные в сегодняшнем уроке в файл layout.css, примут следующий вид:

/* ---------------News ---------------*/
#news {padding:0; margin:0 0 15px 0;}
#news h2 {padding:0px; margin:0px; border:none}
#news .introtext{padding:5px 0 0 0}
#news .introtext .date {font-weight:bold;}
#news .readmore {text-align:right}

А внешний вид ленты новостей:

При этом дата, указанная в ленте новостей, — это дата создания ресурса, которую сейчас вы изменить не можете. Чтобы иметь возможность самостоятельно указывать дату публикации, нам необходимо воспользоваться еще одним параметром Ditto. В вызове сниппета добавляем &dateSource = `pub_date`, чтобы получилось:

[[Ditto? &tpl=`news-article` &dateSource = `pub_date` ]]

Тем самым в качестве источника даты публикации мы указываем поле с датой, расположенное на вкладке «Настройка страницы». Это поле вы можете изменить для каждого ресурса.

Раз уж мы коснулись вопроса о датах, давайте изменим формат даты. Я предлагаю сделать ее в следующем виде: ЧЧ.ММ.ГГГГ. В этом нам поможет еще один параметр Ditto &dateFormat.

Конструкция вызова сниппета примет следующий вид:

[[Ditto? &tpl=`news-article` &dateSource = `pub_date` &dateFormat=`%d.%m.%Y`]]

А внешний вид ленты новостей:

При этом выводимую дату вы можете изменить на странице редактирования ресурса.

Если страница «Новости» все еще не отмечена для показа в меню, вы можете это сделать, чтобы иметь доступ на страницу с лентой новостей из главного меню. Напомню, что для этого на странице редактирования ресурса необходимо установить галочку «Показывать в меню».

Еще я вам советую вынести вызов сниппетта Ditto в отдельный чанк. Для этого создайте чанк с именем newsline, поместите в него конструкцию вызова Ditto, а сам чанк вставьте на страницу «Новости»

Итог урока

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

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

Имейте ввиду, что не обязательно запоминать все параметры наизусть, большинство из приведенных по ссылке параметров и плэйсхолдеров вы не будете использовать на практике. Но вы обязательно должны знать о их существовании на случай, если вам придется вплотную заняться разработкой сайтов на MODx.

В следующем уроке мы продолжим работу с лентой новостей. Научимся разбивать новости на страницы, сортировать ленту новостей по различным параметрам и познакомимся на практике еще с несколькими параметрами Ditto.

Созданные и измененные файлы и чанки сегодняшнего урока:

Видео урок по использованию сниппета Ditto

Автор: Ефимов Виктор

Вы можете также посмотреть другие уроки по созданию сайта на MODx: