Создание блога на MODx. Урок 5 — Оформление правой колонки: облако тегов, случайные заметки

Напомню,  в прошлом уроке мы с вами вместе на примере разобрали работу нескольких расширений MODx и сделали вывод анонсов заметок блога с постраничным разбиением на главной странице и страницах категорий. Теперь анонс всех публикуемых материалов отображаться на главной странице и на странице категории, в которую помещен этот материал. Каждый анонс содержит в себе: заголовок публикации, краткое описание, взятое из поля Аннотация (введение), изображение, прикрепленное с помощью TV параметра и дату публикации. Вдобавок к этому мы сделали вывод меток для каждой статьи, чтобы сделать навигацию по блогу более удобной.

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

Итак, предлагаю в сегодняшнем уроке закончить оформление правой колонки блога, в которой сейчас находится меню категорий.

Для этого необходимо будет сделать следующие шаги:

1. Добавим в правую колонку вывод нескольких случайных заметок блога с миниатюрами
2. Выведем облако тегов
3. Выведем ссылки на друзей и спонсоров
4. Добавим блок со ссылками на подписку по RSS и социальные сервисы

В прошлых уроках мы вынесли разметку правой колонки в чанк SIDEBAR. Отправляемся его редактировать.

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

<div id="sidebar">

<div class="sidemenu">
<h3>Категории</h3>
[!Wayfinder? &startId=`1` &level=`2` &hideSubMenus=`1` &includeDocs=`SELECT id FROM modx_site_content WHERE isfolder<>0 `!]                 
</div>

</div>

Сейчас будем постепенно добавлять в правую колонку дополнительные блоки информации: вывод случайных заметок, облако тегов, ссылки на сайты друзей и спонсоров. Все дополнительные блоки будем помещать перед последним закрывающимся тегом </div>.

Вывод случайных заметок блога в правой колонке

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

Этот плагин значительно облегчит жизнь MODx-разработчику. Не буду сейчас подробно описывать весь возможный функционал PHx, подробно прочитать про  него на русском языке можно в Wiki учебнике. Скажу лишь, что этот плагин — вещь очень полезная, и я его ставлю практически в каждом проекте сразу же после установки MODx. Кстати, в курсе по «созданию блога на MODx» мы еще не раз будем использовать этот плагин на практике.

Переходим к установке PHx

Скачиваем архив с плагином c официального сайта MODx (также вы сможете скачать плагин PHx  в конце урока в разделе с файлами к уроку).

Создаем папку assets/plugins/phx/ и копируем в нее содержимое скачанного архива.

После этого отправляемся  на вкладку Элементы → Управление элементами → Плагины в админке MODx и создаем там новый плагин.

На вкладке «Общие» заполняем следующие поля:

Название плагина — PHx.

Описание — плагин PHx.

Код плагина (php) — копируем содержимое файла phx.plugin.txt, который вы только что скопировали в папку плагина assets/plugins/phx/.

На вкладке «Системные события» указываем события, которые должен отслеживать плагин:

Ставим галочку OnParseDocument.

После установки PHx положите в папку assets\plugins\phx\modifiers\ модификатор replace (файл replace.phx.php). Этот файл у вас лежит в папке c плагином TVimageResizer — assets\plugins\tvimageresizer\install\.

На этом установка плагина завершена.

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

<div class="block">
<h3>Случайные заметки</h3>
<ul>
[!Ditto? &summarize=`5`  &startID=`1`   &randomize=`1` &depth=`5` &hideFolders=`1` &tpl=`randompost` &dateSource = `pub_date`   &dateFormat=`%d.%m.%Y`!]
</ul>
</div>

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

&summarize=`5`— количество выводимых записей

&startID=`1` — указываем родительскую папку блога, в какой  находятся все его заметки

&randomize=`1` —  включаем случайный порядок вывода заметок

&depth=`5` — возможная глубина вложенности заметок

&hideFolders=`1` — выводить только ресурсы, не являющиеся папками, т.е. категориями и подкатегориями

&dateSource = `pub_date` - указываем поле, которое будет использовано в качестве даты публикации

&dateFormat=`%d.%m.%Y`— формат вывода даты.

&tpl=`randompost` — имя чанка, который будет использован в качестве шаблона вывода.

Сохраняем внесенные в SIDEBAR изменения и отправляемся создавать чанк randompost c шаблоном вывода Ditto. Для этого следуем на вкладку Элементы → Управление элементами → Чанки → Новый чанк.

Название чанка — randompost.

Описание — вывод случайных заметок в правой колонке.

Код чанка — помещаем следующую конструкцию:

<li>
<div class="randompost-img">[+image-post:replace=`medium,mini`+]</div>
<a title="[+pagetitle+]" href="[(site_url)][~[+id+]~]">[+pagetitle+]</a>
<br /><span>[+date+]</span>
</li>

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

Разберем пример:

[+image-post:replace=`medium,mini`+] — с помощью этой конструкции мы используя модификатор replace указываем плагину PHx, что в URL к миниатюре необходимо изменить строку «medium» на «mini», т.е. будет выведено изображение с тем же именем, только лежащее не в папке «medium» а в папке «mini». Если вы помните, при создании плагина TVImageResizer  мы прописали в настройках создание двух миниатюр для TV параметра image-post. И в папке mini лежат миниатюры размером 40 на 40 пикселей.

Сохраняем чанк randompost  и смотрим на получившийся результат:

Чтобы указать все отступы, выравнивания и цвета для блока добавим в CSS файл assets/templates/blog/css/coolblue.css следующую конструкцию: 

.block ul{
text-align: left;
margin: 10px 15px 10px 8px;
    padding: 0;
border-top: 1px solid #EFEFEF;
}
.block ul li {
list-style: none;
border-bottom: 1px solid #EFEFEF;
    font-size: 12px;
line-height: 1.5em;
padding: 10px 0 10px 0;
margin: 0;
}
.block ul li a:link,
.block ul li a:visited {
   color: #33799B;
padding-left: 0;
   text-transform: none;
}
.block ul li span {
color: #888;
font-size: 10px;
line-height: 1.7em;
}
.block ul li a:hover { color: #000; }
.randompost-img img{ float:left; margin-right:10px;}

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

Сейчас переходим к созданию других блоков, которые будут располагаться  в правой колонке.

Создание облака тегов

Для каждой статьи в блоге прикреплены метки с помощью TV параметра tags, эти метки мы выводили в прошлом уроке при реализации анонсов статей и их же можно использовать в качестве дополнительной навигации по блогу. Как правило, все эти метки в блогах принято еще выводить в одном месте, при этом размер шрифта метки должен быть пропорционален частоте ее использования. Это и есть так называемое облако тегов. Я рекомендую использовать его на блогах, т.к. глядя на этот перечень разных по размеру тегов, посетитель сможет мгновенно оценить о чём чаще пишет автор блога.

Для создания облака меток в MODx Evolution удобно будет использовать сниппет TvTagCloud. Отправляемся создавать новый сниппет в админке MODx.

Заполняем поля при создании сниппета:

Название сниппета — TvTagCloud.

Описание — сниппет для вывода  облака тегов.

Код сниппета (php) — в эту область копируем содержимое этого файла. Скачать этот файл вы сможете также в конце урока в разделе файлов к уроку.

После создания сниппета отправляемся снова редактировать чанк с содержимым правой колонки блога SIDEBAR.

Добавляем блок новый блок с вызовом сниппета TvTagCloud.

<div class="block">
<h3>Облако тегов</h3>                         

[!TvTagCloud? &parent=`1` &depth=`5`  &displayType=`cloud`  &depth=`5` &landing=`1` &tvTags=`tags` &showCount=`0` &sort=`random` &limit=`50` &caseSensitive=`1`!]

</div>

В вызове TvTagCloud используются следующие параметры:

&parent=`1` — ID папки, в которой находятся все заметки, имеющие теги

&depth=`5` — глубина поиска документов

&landing=`1` — идентификатор ресурса, на котором расположен вывод всех записей блога;

&tvTags=`tags`—  имя TV-парамета, в который вписаны метки для статьи

&showCount=`0` — не отображать количество статей для тега. Если выставить 1, то рядом с каждым тегом в скобочках будет выводиться число, указывающее количество статей с этим тегом.

&sort=`random` — сортировка тегов. Возможные варианты: random – сортируются случайным образом; asc – сортировать по алфавиту; desc – сортировка по алфавиту в обратном порядке; numasc – начать с редко встречающихся тегов; numdesc – начать сортировку с часто встречающихся.

&displayType=`cloud`  — тип отображения списка тегов. Возможные варианты: cloud — в виде облака тегов; list —  в виде обычного маркированного списка; custom — пользовательский вывод тегов с использованием шаблона вывода. Имя чанка с шаблоном вывода в этом случае будет передаваться сниппету с помощью параметра customDisplayChunk, а в шаблоне будут использованы следующие плейсхолдеры: [+class+], [+landing+], [+tag+], [+url_param+], [+urlencoded_tag+], [+tooltip+], [+count+], [+bracketed_count+], [+qs_seperator+].

&limit=`50`— максимальное количество выводимых тегов.

&caseSensitive=`1` — чувствительность к регистру. Внимание: если не включить этот параметр в вызове сниппета, то может быть проблема с отображением кириллического шрифта в написании тегов.

В результате работы сниппета на странице появится облако тегов следующего вида:

Т.е. все введенные в дополнительное поле теги выводятся в одном месте.  Если мы посмотрим исходный код, то увидим, что каждому тегу присвоен CSS класс от  s1 до s5. Эти классы указывают, какой из тегов упоминается в заметках чаще остальных.

Давайте в CSS файле assets/templates/blog/css/coolblue.css пропишем внешний вид облака тегов (отступы и цвета, подходящие к  нашему дизайну) и укажем размеры шрифта для каждого класса от s1 до s5 чтобы теги, которые используются чаще выводились большим размером.

.tagcloud { padding:0 10px; }
.tagcloud a{ color:#33799b; padding:2px; margin:1px}
.tagcloud a:hover{background:#33799b; color:#FFF;  }
.tagcloud .current { background:#33799b; color:#FFF; }
.tagcloud .s5{ font-size:1.7em}
.tagcloud .s4{ font-size:1.5em}
.tagcloud .s3{ font-size:1.3em}
.tagcloud .s2{ font-size:1.1em}
.tagcloud .s1{ font-size:0.9em}

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

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

Блок друзей и блок подписки

Сейчас у нас в чанке SIDEBAR идет вывод меню, случайных заметок и облака тегов. Давайте еще добавим блок со ссылками на сайты друзей, блок с подпиской по RSS  и ссылками на социальные сервисы. Для этих целей создадим два чанка FRIENDS и FOLLOW, в которые поместим разметку этих блоков. Отправляемся на вкладку Элементы → Управление элементами → Чанки.

В область «Код чанка (HTML)» при создании чанка FRIENDS впишем следующую HTML разметку:

<div class="block">
<h3>Друзья сайта</h3>
<ul>
<li><a href="http://efimov.ws" title="Блог о дизайне и веб-разработке">efimov.ws<br />
<span>Коллекция полезных материалов для дизайнера и веб-разработчика</span></a>
</li>
<li><a href="http://followdesign.com" title="Новости веб-дизайна и разработки">followdesign.com<br />
<span>Новости веб-дизайна и разработки.</span></a>
</li>
</ul>
</div>

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

При создании чанка FOLLOW в поле  «Код чанка (HTML)» впишем разметку:

<div class="block">
 <h3>Отдел подписки</h3>
      <ul  class="subscribe-stuff">
      <li><a target="_blank" title="Подпишитесь на обновления RSS. Спасибо!" href="#">
<img alt="Подпишитесь на обновления RSS. Спасибо!" title="Подпишитесь на обновления RSS. Спасибо!" src="/assets/templates/blog/images/rss_32.png" /></a>
</li>
<li><a target="_blank"  title="Получать обновления на E-mail" href="#"  rel="nofollow">
<img alt="Получать обновления на E-mail" title="Получать обновления на E-mail" src="/assets/templates/blog/images/email_32.png" /></a>
</li>
    
<li><a target="_blank"  title="Следите за мной в Twitter" href="#" rel="nofollow">
<img alt="Следите за мной в Twitter" title="Следите за мной в Twitter" src="/assets/templates/blog/images/twitter_32.png" /></a>
</li>
<li><a target="_blank" title="Следите в Facebook" href="#" rel="nofollow" rel="nofollow">
<img alt="Следите в Facebook" title="Следите в Facebook" src="/assets/templates/blog/images/facebook_32.png" /></a>
</li>
      </ul>
      <p>Узнавать обновления с помощью
<a href="#" target="_blank" rel="nofollow">RSS</a>, <a rel="nofollow" target="_blank" href="#">Facebook</a>,
<a target="_blank" href="#" rel="nofollow">Twitter</a> или получать на <a  target="_blank" href="#"  rel="nofollow">Email</a>
</p>
</div>

Пока в качестве ссылок на RSS подписку и на социальные сервисы стоят заглушки «#», но мы еще вернемся к редактированию чанка FOLLOW при создании RSS ленты сайта в следующем уроке.

Помещаем вызов только что созданных чанков в правую колонку, чтобы в чанке SIDEBAR была следующая конструкция:

<div id="sidebar">
<div class="sidemenu">

<h3>Категории</h3>

[!Wayfinder? &startId=`1` &level=`2` &hideSubMenus=`1` &includeDocs=`SELECT id FROM modx_site_content WHERE isfolder<>0 `!] 

</div>

<div class="block">
<h3>Случайные заметки</h3>

<ul>
[!Ditto? &summarize=`5`  &startID=`1`   &randomize=`1` &depth=`5` &hideFolders=`1` &tpl=`randompost` &dateSource = `pub_date`   &dateFormat=`%d.%m.%Y`!]
</ul>

</div>

<div class="block">
<h3>Облако тегов</h3>                         
[!TvTagCloud? &parent=`1` &depth=`5`  &displayType=`cloud`  &depth=`5` &landing=`1` &tvTags=`tags` &showCount=`0` &sort=`random` &limit=`50` &caseSensitive=`1`!]
</div>

{{FOLLOW}}
{{FRIENDS}}

</div>

В итоге у в правой колонке у нас появится два дополнительных блока, которые в последствии можно будет редактировать в соответствующих чанках FOLLOW и FRIENDS.

Все блоки правой колонки (меню, случайные заметки, подписка, друзья сайта, облако тегов) вы с легкостью сможете поменять местами при редактировании чанка SIDEBAR.

Чтобы убрать линию, под иконками в блоке подписки добавим в CSS файле следующий стиль:

.block ul.subscribe-stuff li{border:none;} 

Итоги урока

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

Файлы к уроку

• Итоговый чанк SIDEBAR
• Чанк randompost
• Чанк FRIENDS
• Чанк FOLLOW
• Плагин PHx
• Сниппет TvTagCloud
• Измененный CSS файл coolblue.css

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

Вы можете получить информацию о появлении следующего урока по созданию блога на MODx себе на почту.

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

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