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

Изменение шаблона Ditto для вывода постов

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

А должно выглядеть так:

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

<div>
<h2 class="post-header"><a href="[~[+id+]~]">[+pagetitle+]</a></h2>
<div class="intro">[+introtext+]</div>
</div>

Теперь наш вывод будет выглядеть уже более правильно. Но очень хочется видеть теги каждого поста прямо в ленте. За вывод тегов у нас отвечает сниппет tagLinks. Простой его вызов не даст нам ничего. Потому что важно! передавать ему id документа, теги которого нужно вывести в каждой итерации.

Конструкция

[[tagLinks? &tv=`tags` &element=`div` &fap=`1` &path=`blog` &label=`Теги: `]]

не заработает. Нужно так:

[[tagLinks? &id=`[+id+]` &tv=`tags` &element=`div` &fap=`1` &path=`blog` &label=`Теги: `]]

Получится так:

<div>
<h2 class="post-header"><a href="[~[+id+]~]">[+pagetitle+]</a></h2>
<div class="intro">[+introtext+]</div>
[[tagLinks? &id=`[+id+]` &tv=`tags` &element=`div` &fap=`1` &path=`blog` &label=`Теги: `]]
</div>

Смотрим результат. Почти то что нужно. Только посты прилеплены один к другому. Чтобы этого не было ни в коем случае нельзя применять <br> в шаблоне! Прописывать стили в атрибуте style тоже не рекомендую — замучаетесь менять потом стили везде и искать их определение. Я рекомендую приписать класс к оберточному диву и описать его оформление в CSS.

<div class="ditto-post">
<h2 class="post-header"><a href="[~[+id+]~]">[+pagetitle+]</a></h2>
<div class="intro">[+introtext+]</div>
[[tagLinks? &id=`[+id+]` &tv=`tags` &element=`div` &fap=`1` &path=`blog` &label=`Теги: `]]
</div>

Теперь идем открывать файл CSS на сервере. Путь такой: /assets/templates/baseline/default.css Ищем там раздел, связанный с оформлением контентной части. Ищем элемент "#content". Это не обязательно, просто лично мне нравится когда определения стилей для одной части страницы находятся рядом. Пишем:

.ditto-post	{
	margin: 0px 0px 35px 0px;
}
.ditto-post .taglinks	{
	margin: 0px 0px 0px 20px;
	text-align: right;
}

Теперь наши посты выглядят замечательно!

Создание навигации tvTagCloud

Теперь нам нужно заменить навигацию по страницам, которая выводится справа на навигацию по тегам. Для этого нам потребуется сниппет tvTagCloud. Идем в шаблон главной страницы, ищем вызов Wayfinder в сайдбаре и удаляем его. Если мы все правильно сделали, то пропадет содержимое бокса "Навигация".

Теперь пишем в этот бокс, на место старого Wayfinder-а вызов сниппета tvTagCloud:

[[tvTagCloud? &parent=`25` &depth=`3` &landing=`25` &tvTags=`tags` &displayType=`list` &showCount=`1`]]

Сейчас все объясню. Параметр parent содержит id страницы, которая содержит все посты, из которых будут браться теги. depth определяет глубину, на которую сниппет пойдет в этой папке, чтобы достать документы. Я поставил 3, с запасом. Если мне захочется распихать посты по папкам в админке, я могу быть уверен что теги будут отображаться правильно.

При клике на тег должен произойти переход на страницу отображения этого тега. За отображение ленты у нас отвечает все та же страница с Ditto. У меня она имеет id 25.

Параметр tvTags показывает как называется tv-параметр, в котором лежат теги. В нашем случае — tags.

displayType определяет как будет отображаться облако — списоком или, собственно облаком. Мне нравится когда теги выводятся один под другим списком. Так их легче читать. Так сделано и на dayte2.com. А еще на дайте2 сделано отображение количества постов для каждого тега в скобках. Это удобно — позволяет оценить какие темы самые раскрытые. tvTagCloud позволяет сделать такую штуку просто указав параметр showCount=1.

Проверяем. Теперь наша лента блога будет выглядеть так:

Задание на дом — зайти на страницу отображения поста и увидеть косяки в навигации. Исправить их.

Вообще, вот то, что мы делаем уже три урока — это, пожалуй, стандартные шаги для создания любого блога, на любую тему. Будь то футбольный блог или блог о веб-разработке. Информация на эту тему довольно разрознена, поэтому я думаю, что эти статьи будут полезны. Stay tuned!

• Создание блога на MODx
• Создание блога. Часть 2. Шаблон и теги.
• Создание блога. Часть 3. Красивый вывод постов и тегов.
• Создание блога. Часть 4. Настраиваем RSS.
• Создание блога. Часть 5. Подключаем комментарии.
• Создание блога. Часть 6. Релиз.