Создание блога на MODx. Урок 4 — Вывод анонсов заметок на страницах категорий

В прошлом уроке мы уже создали структуру будущего блога, применили для страниц категорий и подкатегорий шаблон «Категория», а для внутренних страниц сайта — шаблон «Внутренняя страница», а также вывели динамические меню на сайте.

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

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

  1. Создадим TV параметр tags (для привязки тегов к заметкам блога) и сниппет tagLinks, который будет использован для вывода меток.
  2. Создадим TV параметр image-post (для прикрепления изображения к заметкам блога) и установим плагин TVimageResizer, который поможет нам автоматически сгенерировать изображения различных размеров и пропорций.
  3. Создадим сниппет datarus, с помощью которого будем конвертировать дату публикации статьи к виду, предусмотренному в шаблоне сайта.
  4. Добавим изображения и теги к заметкам блога с помощью созданных TV параметров.
  5. Создадим чанк, в который поместим шаблон вывода анонсов заметок для сниппета Ditto. Анонс заметок блога будет состоять из ссылки на полную версию заметки, даты публикации, списка меток (тегов), изображения размером 500 на 200 пикселей и краткого описания заметки. При создании шаблона вывода нам понадобятся все сниппеты, плагины и TV параметры, созданные во время первых трех шагов.
  6. Вызовем сниппет Ditto в шаблоне «Категория». В качестве шаблона вывода анонсов будет использован чанк, созданный на предыдущем шаге.
  7. Создадим сниппет dittoSplitPagination, который будет удобно использовать для реализации постраничной навигации при большом количестве страниц.
  8. Добавим в шаблон конструкцию для вывода постраничной навигации.
  9. В CSS файле пропишем необходимые стили для более удачного оформления постраничной навигации и других элементов.

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

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

Давайте приступим к детальному описанию каждого из приведенных выше шагов.

Создаём сниппет tagLinks и TV параметр tags

Динамический вывод меток для статьи в MODx Evolution удобно реализовывать с помощью сниппета tagLinks. Этот сниппет будет выводить в виде ссылок перечень тегов для заметки, которые будут вписаны через запятую при редактировании ресурса в TV параметр. Для того чтобы использовать tagLinks необходимо сперва создать TV параметр с типом ввода text.

Создадим TV с именем tags, для этого отправляемся на вкладку Элементы → Управление элементами → Параметры (TV) → Новый параметр (TV).

При создании TV параметра заполняем следующие поля:

Имя параметра — tags.

Заголовок — Теги.

Описание — Список тегов для заметок в блоге. Разделяются запятыми.

Тип ввода — text.

Доступ шаблонов — Внутренняя страница.  Внимание: обязательно ставим галочку для шаблона, который может использовать этот Параметр (TV).

Создание TV параметра tags

После того как вы создадите TV параметр tags, отправляемся создавать новый сниппет tagLinks. Переходим на вкладку Элементы → Управление элементами → Сниппеты и жмём на ссылку «Новый сниппет».

При создании заполняем следующие поля:

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

Описание — вывод тегов в постах.

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

Создание сниппета  tagLinks

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

Устанавливаем плагин TVimageResizer и создаём TV параметр image-post

Плагин TVimageResizer мы будем использовать для автоматического генерирования изображений определенных размеров и пропорций из изображения, прикрепленного к заметке с помощью TV параметра. То есть вы сможете прикреплять  с помощью TV к статьям графические файлы различных размеров, а плагин будет автоматически создавать одно или несколько изображений необходимых вам размеров, прописанных в настройке плагина. Для начала давайте создадим TV параметр для добавления фотографий к постам с именем image-post, для этого идем на вкладку Элементы → Управление элементами → Параметры (TV) → Новый параметр (TV).

Заполняем следующие поля при создании TV:

Имя параметра — image-post.

Заголовок — Изображение.

Описание — Изображение для заметок.

Тип ввода  — image. 

Визуальный компонент — image. Внимание: при выборе этого визуального компонента у вас появится несколько дополнительных полей для указания атрибутов изображения. Рекомендую сразу заполнить поле Alternate Text, чтобы не оставлять пустым атрибут alt при выводе изображения, т.к. в этом случае ваш код не будет соответствовать веб-стандартам. Предлагаю вписать туда  [+pagetitle+], т.е. в атрибуте alt для тега IMG будет прописано название страницы.

Доступ шаблонов — Внутренняя страница. Не забудьте включить эту галочку.

Создание TV параметра image-post

После создания TV параметра image-post идем устанавливать плагин TVimageResizer.

Перед тем как создать плагин  в системе управления необходимо скопировать файлы плагина в нужную папку. В директории assets/plugins/ создаем папку tvimageresizer и в неё распаковываем содержимое архива.

Создаем папку tvimageresizer и копируем содержимое ресурса

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

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

Предположим, что нам необходимо создать автоматически две миниатюры различных пропорций и размеров: 500x200px — для анонсов заметок и 40x40px — для использования при выводе случайных заметок в правой колонке сайта. Значит для каждого изображения, прикрепленного с помощью TV, будет создано 2 миниатюры, которые будут размещены в разных папках.

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

При создании нового плагина заполняем поля:

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

Описание —  Плагин для создания миниатюр изображений, прикрепленных с помощью TV параметров.

Код плагина (php) — require MODX_BASE_PATH.'assets/plugins/tvimageresizer/TVimageResizer.inc.php'; (т.е. с помощью этой строки указываем местоположение файла TVimageResizer.inc.php)

Плагин для создания миниатюр TV параметров

Переходим на следующую вкладку «Конфигурация» и в поле «Конфигурация плагина» и копируем следующую конструкцию.

&tv_ids=TV IDs;string;8 &dirs=Thumb folders;string;medium~mini &width=Width;string;500~40 &height=Height;string;200~40 &rcorner=Corners percentage of clipping;string; &backgroundColor=Background color;string;#FFFFFF &watermark=Watermark image path (png);string; &watermarkPos=Watermark position;string;90% 90% &cprighttext=Copyright text;string; &quality=Quality;int;90 &mirror=Mirror effect;list;yes,no;no &crop=Cropping;list;yes,no,crop_resized,fill_resized;crop_resized &save_o_name=Save only name;list;yes,no;no &rename_images=Rename images;list;yes,no;no &refresh_all_images=Refresh all images;list;yes,no;no

После этого у вас появится таблица с перечнем параметров и указанных значений этих параметров.

Конфигурация плагина

Пробежимся по основным параметрам, описанным в документации к плагину, которая находится в папке с плагином assets/plugins/tvimageresizer/docs/readme_ru.txt.

TV IDs — идентификаторы TV параметров для которых нужна возможность изменения размера (если их несколько, то вписываются через запятую).

В значении этого поля впишите ID недавно созданного TV параметра image-post. Убедитесь, что вы указали ID верно, в противном случае, плагин с вашими изображениями работать не будет. Посмотреть идентификатор любого TV можно на вкладке Элементы → Управление элементами → Параметры (TV). Число, указанное в скобках рядом с названием параметра и есть его ID.

Thumb folders — папка, в которую будет загружена копия картинки. Можно указывать несколько через разделитель «~».

Вписываем  medium~mini, тем самымым указываем названия папок, в которые будут помещаться миниатюры различных размеров. Плагин создаст папки с заданными названиями автоматически.

Width — ширина создаваемой миниатюры. Можно указывать несколько через разделитель «~».

Вписываем 500~40, т.е. у создаваемой миниатюры, которая будет помещена в папку medium, ширина будет 500 пикселей, а миниатюра, которая отправится в папку mini будет иметь 40 пикселей в ширину.

Height — высота создаваемой миниатюры. Можно указывать несколько через разделитель «~».

Вписываем  200~40, тем самым указывая высоту для миниатюр, лежащих соответственно в папках medium и mini.

Cropping — обрезать картинки (создавать точно по указанным размерам без уменьшения). crop_resized - уменьшить + обрезать; fill_resized - пропорционально уменьшить, заполнив поля цветом (Background color).

Corners percentage of clipping — скруглять углы (размер угла в процентах). Можно указывать несколько для разных картинок через разделитель «~».

Watermark image path (png) — накладывать водяной знак (путь до PNG-картинки). Можно указывать несколько для разных картинок через разделитель «~».

Copyright text — наложить текст на картинку. 

Save only name — сохранять в поле только имя файла картинки.

Quality — качество изображения.

Background color — цвет фона (учитывается при скруглении углов).

Rename images — переименовывать картинки. Все картинки будут переименовываться с указанием даты: d.m.y_H.i.

Mirror effect — эффект зеркального отражения.

Refresh all images — обновлять все картинки при нажатии на кнопку «Очистить кэш».

После того, как вы заполнили конфигурацию плагина отправляемся на следующую вкладку «Системные события» и выбираем 2 системных события, которые должен отслеживать плагин. Ставим галочки OnSiteRefresh и OnBeforeDocFormSave.

Системные события

На этом установка завершена, не забудьте сохранить все внесенные данные. Теперь для изображения, которое будет прикреплено с помощью TV параметра image-post, плагин создаст две миниатюры. В папке medium будет находиться миниатюра размером 500 на 200 пикселей, это изображение мы будем использовать в шаблоне вывода краткого описания заметок на страницах категорий, а в папке mini будет хранится изображение размером 40 на 40 пикселей, которое мы будем использовать в следующих уроках для вывода случайных заметок в правой колонке сайта.

Создаём сниппет datarus

Используя сниппет datarus, мы будем конвертировать дату публикации заметки блога к виду, предусмотренному в шаблоне сайта. Для создания сниппета отправляемся в админке системы на вкладку Элементы → Управление элементами  → Сниппеты → Новый сниппет.

Заполняем следующие поля:

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

Описание — Сниппет для конвертации даты публикации к необходимому виду

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

Сниппет для конвертации формата данных

На этом этапе мы установили основные расширения, которые нам понадобятся при создании шаблона вывода заметок. 

Прописываем теги для заметок блога и прикрепляем изображение с помощью  TV параметров

Чтобы мы могли видеть полный вариант вывода анонсов статей необходимо заполнить для каждой статьи блога список тегов и прикрепить изображение. Оправляемся редактировать ресурсы в дереве документов MODx, чтобы заполнить пустые TV параметры.

Прикрепляем изображение и прописываем теги с помощью TV параметров

После того, как заполните TV параметры «Изображение» и «Теги», отправляемся создавать шаблон вывода Ditto.

Создаем шаблон вывода Ditto

В чанке MAIN хранится содержимое основной колонки для шаблона «Категория». В HTML разметке блок <div class="post"> используется для отображения краткого описания заметки вместе с изображением и тегами к заметкам блога. На основе этой HTML разметки мы будем создавать шаблон вывода для сниппета Ditto.

Давайте создадим чанк с именем, например, minipost и поместим в него конструкцию, сделанную на основе HTML верстки из чанка MAIN с использованием специальных тегов MODx, вывода TV параметров и вызова ранее созданных сниппетов.

Поместим в чанк minipost следующий код:

<div class="post">

<div class="right">
<h2><a title="[+pagetitle+]" href="[(site_url)][~[+id+]~]">[+pagetitle+]</a></h2>
<p class="post-info">[[tagLinks? &id=`[+id+]` &tv=`tags` &separator=`,` &element=`span` &fap=`1` &path=`index.html` &label=` `]]</p>
<div class="image-section">
[+image-post+]
</div>
<p>[+introtext+]</p>
<p><a class="more" title="[+pagetitle+]" href="[(site_url)][~[+id+]~]">Читать дальше &raquo;</a></p>
</div>

<div class="left">
<p class="dateinfo">[[datarus? &MyDate=`[+pub_date+]`]]</p>
<div class="post-meta">
<h4>Информация</h4>
<ul>
<li class="user">[+author+]</li>
<li class="time">[+date+]</li>
<li class="comment"><a href="#">Комментарии</a></li>
</ul>
</div>
</div>

</div>

В этом чанке-шаблоне используются следующие специальные теги MODx:

[+pagetitle+] — имя ресурса, вписанное в поле «Заголовок», заполняемое при редактировании ресурса.

[(site_url)][~[+id+]~] — URL страницы.

[+introtext+] — краткое описание страницы, содержимое поля « Аннотация (введение)», которое вы заполняете при редактировании ресурса.

[+author+] — имя пользователя, создавшего заметку. Чтобы вместо имени администратора по умолчанию отображалось необходимое вам имя или псевдоним проследуйте на вкладку Пользователи → Управление менеджерами и при редактировании профиля менеджера заполните поле «Полное имя». Содержимое этого поля будет отображаться на странице сайте.

[+date+]  — вывод даты публикации.  Формат отображения даты можно будет указать в качестве параметра при вызове сниппета Ditto.

Обратите внимание: в шаблоне вывода специальные теги MODx вызываются с помощью конструкции [+имя_тега+], в то время как на странице в области «Содержимое ресурса»  и в шаблонах сайта для вызова специальных тегов MODx используется конструкция [*имя_тега*].

В то место, где должны находиться теги для заметки, помещен вызов только что созданного сниппета tagLinks:

[[tagLinks? &id=`[+id+]` &tv=`tags` &separator=`,` &element=`span` &fap=`1` &path=`index.html` &label=` `]]

Параметры, используемые при вызове сниппета: &id — указываем ID текущей страницы; &tv — указывается имя TV параметра, в котором хранятся метки для статьи; &path — путь к странице со всеми статьями,  указываем псевдоним главной страницы сайта; &separator — разделитель между метками; &element — HTML тег, в который будет помещена метка (span, div и т.д.); &fap - включить/выключить поддержку дружественных url.; &label - строка, выводящаяся перед перечислением тегов;

Вместо изображения-заглушки размером 500 на 200 пикселей вставляем вызов TV параметра . Как мы помним, с помощью плагина  TVimageResizer на основе прикрепленного с помощью этого TV параметра изображения будет автоматически создана миниатюра необходимых нам размеров.

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

[[datarus? &MyDate=`[+pub_date+]`]]

В параметр &MyDate при вызове сниппета вписано поле, которое будет использовано в качестве даты публикации. Результатом работы сниппета будет вывод даты публикации в требуемом нам формате.

Вызываем сниппет Ditto в шаблоне «Категория»

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

<div id="main">
[[Ditto?  &tpl=`minipost` &summarize=`7` &depth=`5` &hideFolders=`1` &paginate=`1`  &dateSource = `pub_date` &sortBy=`pub_date` &dateFormat=`%d.%m.%y в %H:%M`  &tagData=`tags` &tagDelimiter=`, `  ]]
</div>

Переданные параметры в вызове сниппета:

&tpl=`minipost`— передаем сниппету имя чанка в котором хранится созданный шаблон вывода; 

&summarize=`7` — количество анонсов, выводимых на страницах категорий;

&depth=`5` — глубина вложенности ресурсов, которые могут выводиться на страницах категорий;

&hideFolders=`1` — не выводить ресурсы-папки. С помощью этого параметра можно реализовать вывод документов, которые не являются папками, т.е. страницы категорий и подкатегорий сниппет выводить не будут, только заметки блога;

&paginate=`1` — включить постраничное разбиение записей;

&dateSource = `pub_date` — поле, которое будет использовано в качестве даты публикации. Изменить дату публикации ресурса можно при редактировании ресурса на вкладке «Настройка страницы»;

&sortBy=`pub_date` — сортировка осуществляется по дате публикации;

&dateFormat=`%d.%m.%y в %H:%M` — формат вывода даты публикации;

&tagData=`tags`  — имя TV параметра, в котором хранятся теги для статей;

&tagDelimiter=`, ` — символ, который будет разделителем между тегами.

Создаём сниппет dittoSplitPagination

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

Отправляемся на вкладку Элементы → Управление элементами  → Сниппеты → Новый сниппет.

Заполняем следующие поля

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

Создание сниппета

Создание постраничной навигации

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

<div class="pagination">Постраничный навигатор: [[dittoSplitPagination]] [+previous+] [+splitPages+] [+next+]</div>

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

<div id="main">[[Ditto?  &tpl=`minipost` &summarize=`7` &depth=`5` &hideFolders=`1` &paginate=`1`  &dateSource = `pub_date` &sortBy=`pub_date` &dateFormat=`%d.%m.%y в %H:%M`  &tagData=`tags` &tagDelimiter=`, `  ]]
<div class="pagination">Постраничный навигатор: [[dittoSplitPagination]] [+previous+] [+splitPages+] [+next+]</div>
</div>

Внимание: обязательно все страницы категорий и подкатегорий, на которых будет вывод постраничного навигатора, должны быть некэшируемы. Снимите в настройках страницы галочку «Кэшируемый» для всех категорий и подкатегорий.

Создание сниппета

Чтобы проверить, как работает постраничное разбиение вы можете временно вписать в параметре &summarize в вызове сниппета какое-нибудь маленькое число, например, 1.

Гораздо подробнее о постраничной навигации и сниппете dittoSplitPagination рассказано в уроке из прошлого курса.

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

Внешний вид анонсов заметок блога

Т.е. оформление анонсов статей приблизилось к тому виду, который нам необходим. Осталось подправить несколько моментов.

Давайте изменим имя автора, опубликовавшего заметку. Отправляемся на вкладку Пользователи → Управление менеджерами и редактируем профиль администратора. В поле «Полное имя» вместо текста Default admin account введите имя, которое будет отображаться при публикации статей.

Редактирование профиля пользователя

Сейчас отправляемся редактировать CSS файл, чтобы прописать стили для оформления на странице постраничной навигации и меток.

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

.pagination {
	margin-left:22px;
}
.pagination a{

	margin:  5px;
	padding: 5px 7px;
	text-transform: lowercase;
	text-decoration: none;
	color: #2C76A6;
	background: #dcecec;
	border-width: 1px;
  	border-style: solid;
	border-color: #2C76A6;
}
.pagination a:hover{   
	background: #FF3399;
        border-width: 1px;
  	border-style: solid;
	border-color: #FF75BA #EA0075 #EA0075 #FF75BA;
	color:#FFFFFF}
.pagination .ditto_currentpage {
  	background: #dcecec;
        border-width: 1px;
  	border-style: solid;
	border-color: #2C76A6;
	margin: 10px 5px 0 5px;
	padding: 5px 7px;
	text-transform: lowercase;
	text-decoration: none;
	font-weight:bold;
	color: #2C76A6;

}

Сейчас давайте пропишем стиль для оформления меток. Находим в CSS файле coolblue.css стили с описанием класса post-info.

/* post info */
.post-info { margin-top: 3px; }
.post .post-info a:link,
.post .post-info a:visited {
  	color: #1372a8;
  	border: none;
  	font-size: .9em;
}

и заменяем этот код на следующий:

/* post info */
.post-info { margin-top: 7px;
background:url(../images/tag.gif) no-repeat left; padding-left:20px;
}
.post .post-info a:link,
.post .post-info a:visited
 {
  	color: #1372a8;
  	border: none;
  	font-size: 11px;
	padding: 1px;
}

.post .post-info a:hover {background:#33799b; color:#FFF;}

Здесь мы прописываем цвет, размер шрифта, отступы, стили при наведении курсора на ссылку и добавляем фон с изображением метки.

Измененный CSS файл вы сможете скачать в конце урока в разделе с файлами к уроку.

После правки CSS стилей вывод заметок блога на странице категорий и главной странице будет следующим:

Внешний вид анонса заметок

Данные CSS стили я привел в качестве примера, но вы стилевое оформление можете сделать любым на ваш вкус. Главное при этом — иметь базовые навыки CSS.

Итог урока

Урок получился довольно объемный по содержанию. В ходе урока мы создали несколько дополнительных расширений для MODX, с помощью которых в дальнейшем реализовали вывод анонсов публикуемых материалов блога с постраничным разбиением. Анонс заметок включает в себя: краткое описание статьи, ссылку на полную статью, навигацию по меткам, изображения заданных размеров, дату и время публикации в требуемом формате. Также мы прописали CSS стили для оформления постраничной навигации и меток к статьям. Теперь создаваемый нами блог еще больше похож на итоговый вариант.

Файлы к уроку

Видео к уроку

Все описанные в уроке действия вы сможете посмотреть в видео к уроку.

Видео к уроку. Часть 1

Размер: 18 mb. Длительность: 4 минуты 30 секунд.

Видео к уроку. Часть 2

Размер: 13 mb. Длительность: 4 минуты.

Чтобы не пропустить следующий урок подпишитесь на обновления в блоге.

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

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

21.10.2011
top


blog comments powered by Disqus
Рубрики
3 месяца отличного хостинга бесплатно
Система Orphus