- Видео уроки по созданию блога на Tickets
- Создание шаблонов для блога
- Создание шаблона для категории блога.
- Создание шаблона для статей.
- TicketMeta — Выводим информацию о текущей статье в MODX
- TicketMeta на Fenom
- Контент
- Кнопки поделится
- Блок автора
- Комментарии
- ДЗ — наполнение блога контентом
- Создание раздела блога и постов
Чтобы создать полноценный блог на MODX нам как минимум понадобятся следующие пакеты: PdoTools, Tickets, DateAgo и hybridauth (последнее не обязательно, но желательно чтобы комментировать могли только авторизованные пользователи), установите их с modstore если они еще не установлены, так же рекомендую установить основные пакеты.
Видео уроки по созданию блога на Tickets
Как я говорил ранее я все же склоняюсь к созданию блога на базе ресурсов, поэтому ниже я опишу оба варианта.
Создание шаблонов для блога
Нам нужно подготовить 2 шаблона:
- для категорий (за основу возьмем blog-grid-sidebar-right.html),
- для записей (за основу возьмем blog-post-sidebar-right.html).
Делать их будем на основе созданного ранее шаблона.
Создание шаблона для категории блога.
Делаем копию имеющегося шаблона «Статика без обвертки» и называем его «Категория блога»;
Таким же образом делаем копию чанка с содержимым шаблона.
Кому не понятно зачем это смотрите уроки: MODX чанки и создание дополнительных шаблонов.
Теперь открываем чанк tpl.4 (где 4 id шаблона) и переносим в него код из blog-grid-sidebar-right.html (без шапки, хлебных крошек, подвала и т.д. — они у нас в чанке tpl — который как раз выведен уже в созданном шаблоне).
Теперь для удобства дальнейшего редактирования давайте вынесем сайтбар (выделил его на скриншоте) в отдельный чанк «sidebar».
и в этом месте вызовем чанк sidebar [[$sidebar]]
или на fenom {include 'sidebar'}
.
Теперь из контентной части вынесем в отдельный чанк rowPost, вывод одного из поста (выделил его):
После чего все остальные вызовы постов можно удалить и на их месте пока просто вызвать чанк rowPost. После данного шага получаем вот такой код шаблона.
<div class="container py-4">
<div class="row">
{include 'sidebar'}
<div class="col-lg-9 order-lg-1">
<div class="blog-posts">
<div class="row px-3">
{include 'rowPost'}
</div>
<div class="row">
<div class="col">
<ul class="pagination float-end">
<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-left"></i></a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-right"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Пока оставляем так как выводить нам пока нечего. Учтите, данный шаблон все еще статичный (мы его пока только разнесли по чанкам) — это мы исправим в одном из следующих уроков.
Создание шаблона для статей.
Создание шаблона для статей идентично созданию шаблона для поста.
Делаем копию шаблона «Категория блога» и называем его «Пост». Затем делаем копию tpl.4 и называем ее tpl.5.
Открываем чанк tpl.5 удаляем все из него и вставляем код контента из html файла blog-post-sidebar-right.html. Сразу на месте сайтбара можно вывести ранее созданный чанк sidebar.
Немного подредактируем его контентную часть (ту которая в не зависимости от выбранного способа — будет выводиться точно также). Начнем по блочно (пойдем сверху в низ):
Вывод изображения
<a href="blog-post.html">
<img src="img/blog/wide/blog-11.jpg" class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-0" alt="Создание блога на modx на ресурсах и при помощи Tickets" />
</a>
Здесь советую избавиться от ссылки страницы суму на себя. А по поводу изображения: у нас уже есть ранее созданное TV поле img — будем использовать его, а в атрибут alt выведем заголовок страницы. В конечном итоге получаем:
<img src="[[*img]]" class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-0" alt="[[*pagetitle]]">
на fenom
<img src="{$_modx->resource.img}" class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-0" alt="{$_modx->resource.img}">
Вывод даты
<div class="post-date ms-0">
<span class="day">10</span>
<span class="month">Jan</span>
</div>
День публикации выводится так: [[*publishedon:date=`%d`]]
, на феном так: {$_modx->resource.publishedon|date:"d"}
.
Месяц публикации так: [[*publishedon:date=`%b`]]
на fenom так: {$_modx->resource.publishedon|date_format:"%b"}
.
Подробнее про вывод дат можно посмотреть в уроке: Форматирование дат и времени в MODX.
Подзаголовок
<h2 class="font-weight-semi-bold"><a href="blog-post.html">Class aptent taciti sociosqu ad litora torquent</a></h2>
Здесь предлагаю избавиться от ссылки страницы саму на себя. А сам заголовок (pagetitle, он же h1) — у нас выводится в хлебных крошка. Следовательно в этот давайте тогда выведем «Расширенный заголовок (longtile)» вот такой конструкцией с модификатором:
[[*pagetitle:default=`[[*longtitle]]`]] или {$_modx->resource.longtitle ?: $_modx->resource.pagetitle}
Либо нам нужно превращать этот подзаголовок в h1 выводить в него просто pagetitle, а сами крошки переделывать — удалить из них заголовок. Пока так оставим.
Вывод метаинформации
<div class="post-meta">
<span><i class="far fa-user"></i> By <a href="#">John Doe</a> </span>
<span><i class="far fa-folder"></i> <a href="#">Lifestyle</a>, <a href="#">Design</a> </span>
<span><i class="far fa-comments"></i> <a href="#">12 Comments</a></span>
</div>
Здесь можно поступить разными способами.
Если вам не нужны комментарии от Tickets и подсчета просмотров, тогда можно сделать вывод так.
<div class="post-meta">
<span><i class="far fa-user"></i> <a href="#">[[*createdby:userinfo=`fullname`]]</a> </span>
<span><i class="far fa-folder"></i> <a href="[[~[[*parent]]]]">[[#[[*parent]].pagetitle]]</a> </span>
</div>
Или так на fenom
<div class="post-meta">
<span><i class="far fa-user"></i> Опубликовал <a href="#">{$_modx->resource.createdby | user : 'fullname'}</a> </span>
<span><i class="far fa-folder"></i> <a href="{$_modx->resource.parent | url}">{$_modx->resource.parent | resource : 'pagetitle'}</a> </span>
</div>
А вот если будите использовать Tickets, тогда лучше воспользоваться сниппетом TicketMeta.
TicketMeta — Выводим информацию о текущей статье в MODX
По умолчанию TicketMeta имеет разметку bootstrap 3 и если просто вывести сниппет [[TicketMeta]] в шаблоне на 3-м бутстрапе и он у вас сразу выводиться оформленным
Мне к примеру не нравиться стандартный вывод, а и я редко использую шрифты от Glyphicons, так что разберем как это все оформить.
Делаем копию стандартного чанка оформления tpl.Tickets.meta и называем его tpl.Tickets.meta.custom далее открываем новый чанк и меняем под себя, например так:
<div class="post-meta" data-id="[[+id]]">
<span> <i class="far fa-user"></i> <a href="#">[[+fullname]]</a> </span>
<span> <i class="far fa-folder"></i> <a href="[[~[[+section.id]]]]">[[+section.pagetitle]]</a> </span>
<span> <i class="far fa-eye"></i> [[+views]] </span>
<span> <i class="far fa-comments"></i> <a href="[[~[[+id]]]]#comments"><span id="comment-total">[[+total]]</span></a> </span>
</div>
Здесь <a href="[[~[[+section.id]]]]">[[+section.pagetitle]]</a>
работает только для тикетов, если у вас блог на ресурсах то нужно заменить на <a href="[[~[[+parent]]]]">[[#[[+parent]].pagetitle]]</a>
.
И затем указываем его в выводе:
[[TicketMeta?
&tplFile=`0`
&tpl=`tpl.Tickets.meta.custom`
&getFiles=`0`
]]
TicketMeta на Fenom
чанк tpl.Tickets.meta.custom
:
<div class="post-meta" data-id="{$id}">
<span> <i class="far fa-user"></i> <a href="#">{$fullname}</a> </span>
<span> <i class="far fa-folder"></i> <a href="{$parent | url}">{$parent | resource : 'pagetitle'}</a> </span>
<span> <i class="far fa-eye"></i> {$views} </span>
<span> <i class="far fa-comments"></i> <a href="{$uri}#comments"><span id="comment-total">{$total}</span></a> </span>
</div>
И вызов.
{'!TicketMeta' | snippet : [
'tplFile' => '0',
'tpl' => 'tpl.Tickets.meta.custom',
'getFiles' => '0',
]}
Контент
Далее идут абзацы (p) с текстом удаляем их и вместо них выводим [[*content]] или {$_modx->resource.content}
.
Для начала достаточно, остальные блоки (лайки, кнопки поделиться, предыдущая-следующая запись, комментарии и т.д.) оставляем как есть. Т.к. у нас пока нет контента их особого смысла делать прямо сейчас нет. Теперь выполните домашнее и потом уже можно начать реализовывать весь остальной функционал.
Кнопки поделится
В принципе кнопки поделится рабочие, там стоит скрипт, при желании вы его можете поменять на любой другой, например на https://yandex.ru/dev/share/ либо вообще создать кастомные кнопки без скриптов.
Блок автора
Можно пока просто заполнить его своими данными, в будущем мы рассмотрим как его переделать чтобы туда тянулись данные из профилей (на всякий случай, вдруг авторов будет много).
Комментарии
Код самих комментариев и форму можно пока закомментировать <!— здесь код —> и на ним вывести стандартную форму комментирования от tickets.
[[!TicketComments? &allowGuest=`1`]]
получим.
Позже мы ее подгоним под нашу верстку: MODX комментарии или отзывы при помощи Tickets.
ДЗ — наполнение блога контентом
Если у вас есть контент, можете добавить его, если нет, то можно для начала добавить любой. У меня контента нет я создам 2 категории на бум и по 2 статьи в каждой категории, если изобразить в виде структуры, то она будет выглядеть так:
Блог
|--Техническое обслуживание
|----Статья 1
|----Статья 2
|--Полезное
|----Статья 3
|----Статья 4
Блог и под категории блога — шаблоном «Категория блога».
Все статьи — шаблон «Пост».
Создание раздела блога и постов
Открываем вкладку «Ресурсы» (находится в левой панели), щелкаем по «Website» правой кнопкой мыши и выбираем Создать -> Документ заполняем поля: как минимум Заголовок (например блог) и Шаблон (для категории).
В вот подкатегории если выбрали ресурсы создаются так щелкаем по «Блог» правой кнопкой мыши и выбираем Создать -> Документ. Ну и статьи также.
А если хотите чтобы блог полностью управлялся тикетс, тогда щелкаем по «Блог» правой кнопкой мыши и выбираем Создать -> Раздел с тикетами и заполняем поля: как минимум Заголовок (например Техническое обслуживание) и Шаблон (для категории) и переходим в Настройки раздела.
На вкладке Дочерние тикеты: указываем шаблон для тикетов (статей блога), в Формирование URI указываем %alias и сохраняем, так же рекомендую отключить jevix и разрешить выполнение тегов MODX (если с фронт энда пользователи ни могут не чего писать) и сохраняем.
А статьи в дальнейшем добавляются прям из тикетс. На вкладке «Раздел», нажимаем на кнопку «Создать тикет» чтобы создать статью. Заполняете все основные поля и опубликуйте
После того как немного наполните блог, переходите к следующим урокам: MODX комментарии или отзывы при помощи Tickets и pdoPage: параметры, примеры вывода ресурсов с разбивкой на страницы.
Алексей, здравствуйте!
Можете, пожалуйста, подсказать, как удалить пакет tickets (в админке остались чанки и много всего, сам пакет удален, через поиск никаких частей не находит)
Здравствуйте, Юлия. Такое часто происходит (не только с tickets), остаются чанки и т.д. — это уже удаляете потом в ручную. Также бывает в базе остатки остаются их тоже нужно удалять в ручную.
Здравствуйте, не выводятся TV поля в самом посте
Здравствуйте! Покажите вывод и как выводите их в посте.
Здравствуйте, подскажите пожалуйста, почему не выводится tv (img) в самом посте, в блоге всё ок
Как его выводите, покажите. В блоге вы скорее всего выводите так [[+tv.img]] или так [[+img]], в самой статье нужно через * ([[*img]]), а не через +
Скажите пожалуйста,а как у вас сделан модуль содержание в начале этой статьи ?
Вот так https://web-revenue.ru/modx-revo/avtomaticheskaya-generatsiya-oglavleniya-stranitsy
Большое спасибо, получилось!
Пожалуйста)
Алексей, здравствуйте!
Спасибо за вашу информацию — очень помогает!
Сделала Блог на Tickets. С разрешением комментировать зарегистрированным посетителям. [[&allowGuest=`0`]]
Если зарегистрирован Администратор — все работает, а если просто зарегистрированный пользователь — то при попытке отправить комментарий появляется сообщение: permission_denied_processor. Это и есть проблема.
Если разрешить комментировать всем, то комментарии отправляются как от имени зарегистрированных пользователей, так и от имени гостей. Помогите пожалуйста решить проблему.
Здравствуйте. Вам скорее всего нужно настроить права для пользователей tickets, как это сделать написано здесь https://web-revenue.ru/modx-revo/tickets#nastroyka-prav-polzovateley-dlya-tickets
Скажите, а есть решение по исправлению обработчика fenom в страницах статей (при открытии пустые белые страницы) ? Пробовал включать/отключать jevix, теги modx, вынесение остального кода джаваскрипт в ignore скобки (+пробелы между скобками), чистка кэша не помогают… Проблема в ресурсах постов, в категориях все открывает корректно… Сбой начал возникать после использования дополнения Tickets, так как именно его кусок кода дает проблему сам по себе и не обрабатывает дальнейший результат, в следствии чего получается пустая белая страница. Не хотелось бы использовать альтернативный обработчик фенома (с прямыми скобками).
Я так не заморачивался, сам вызов делаю на fenom, а в чанках оставляю modx parser (где fenom работать не желает) — не вижу в этом не чего плохого. Так что не подскажу) Либо откажитесь от Tickets если принципиально все на одном fenom хотите сделать
К сожалению выявил не единственную проблему фенома на данный момент (не только с Tickets), не хочет обрабатывать так же теги изображений вида {img} и т.д… (на страницах выводятся пустые пути в итоге). Смена на альтернативный источник хранения так же не помогает
Не наблюдал ни разу проблемы с изображениями. {img} — так да будет пусто, т.к. нужно так {$_modx->resource.img}, если через pdoresources тяните, то так {$tv.img} или так {$img} — в случае если стоит пустой tvPrefix в вызове.
А в переменной includeTVs при выводе нескольких ресурсов через PdoPage на одной странице указывается название чанка или значение тип ввода из опций (по умолчанию image)? Потому-что даже при использовании стандартного modx-парсера почему-то источники в HTML выводятся пустые (хотя сам тег img src срабатывает)
includeTVs — Список ТВ параметров для выборки, через запятую, т.е. указывается название TV поля — читайте документацию)
Спасибо, уже разобрался и по ниже-заданному в ветве вопросу кстати. Если кому-нибудь пригодится на будущее — ключевая проблема была, что если добавлять контекст и играться с альтернативным источником изображений — потом в HTML может появляться лишний слэш в начале, что в итоге нарушает весь вывод и естественно ничего не работает.
Кто настраивал MODX по моим статьям такой проблемы нет) Смените настройку Схема URL (ключ link_tag_scheme) с -1 на full и будет вам счастье)