Создание блога на modx на ресурсах и при помощи Tickets

Создание блога в MODX при помощи Tickets MODX Revo

Чтобы создать полноценный блог на MODX нам как минимум понадобятся следующие пакеты: PdoTools, Tickets, DateAgo и hybridauth (последнее не обязательно, но желательно чтобы комментировать могли только авторизованные пользователи), установите их с modstore если они еще не установлены, так же рекомендую установить основные пакеты.

Видео уроки по созданию блога на Tickets

Как я говорил ранее я все же склоняюсь к созданию блога на базе ресурсов, поэтому ниже я опишу оба варианта.

Создание шаблонов для блога

Нам нужно подготовить 2 шаблона:

  1. для категорий (за основу возьмем blog-grid-sidebar-right.html),
  2. для записей (за основу возьмем 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-м бутстрапе и он у вас сразу выводиться оформленным

стандартный вывод TicketMeta в bootstrap 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: параметры, примеры вывода ресурсов с разбивкой на страницы.

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( 4 оценки, среднее 5 из 5 )
Web-Revenue.ru
Добавить комментарий

  1. Юлия

    Алексей, здравствуйте!
    Можете, пожалуйста, подсказать, как удалить пакет tickets (в админке остались чанки и много всего, сам пакет удален, через поиск никаких частей не находит)

    Ответить
    1. Алексей автор

      Здравствуйте, Юлия. Такое часто происходит (не только с tickets), остаются чанки и т.д. — это уже удаляете потом в ручную. Также бывает в базе остатки остаются их тоже нужно удалять в ручную.

      Ответить
  2. Денис

    Здравствуйте, не выводятся TV поля в самом посте

    Ответить
    1. Алексей автор

      Здравствуйте! Покажите вывод и как выводите их в посте.

      Ответить
  3. Денис

    Здравствуйте, подскажите пожалуйста, почему не выводится tv (img) в самом посте, в блоге всё ок

    Ответить
    1. Алексей автор

      Как его выводите, покажите. В блоге вы скорее всего выводите так [[+tv.img]] или так [[+img]], в самой статье нужно через * ([[*img]]), а не через +

      Ответить
  4. Евгений

    Скажите пожалуйста,а как у вас сделан модуль содержание в начале этой статьи ?

    Ответить
    1. Алексей автор
      Ответить
  5. Анна Шишкина

    Большое спасибо, получилось!

    Ответить
    1. Алексей автор

      Пожалуйста)

      Ответить
  6. Анна Шишкина

    Алексей, здравствуйте!
    Спасибо за вашу информацию — очень помогает!
    Сделала Блог на Tickets. С разрешением комментировать зарегистрированным посетителям. [[&allowGuest=`0`]]
    Если зарегистрирован Администратор — все работает, а если просто зарегистрированный пользователь — то при попытке отправить комментарий появляется сообщение: permission_denied_processor. Это и есть проблема.
    Если разрешить комментировать всем, то комментарии отправляются как от имени зарегистрированных пользователей, так и от имени гостей. Помогите пожалуйста решить проблему.

    Ответить
    1. Алексей автор

      Здравствуйте. Вам скорее всего нужно настроить права для пользователей tickets, как это сделать написано здесь https://web-revenue.ru/modx-revo/tickets#nastroyka-prav-polzovateley-dlya-tickets

      Ответить
  7. VoodooSystem

    Скажите, а есть решение по исправлению обработчика fenom в страницах статей (при открытии пустые белые страницы) ? Пробовал включать/отключать jevix, теги modx, вынесение остального кода джаваскрипт в ignore скобки (+пробелы между скобками), чистка кэша не помогают… Проблема в ресурсах постов, в категориях все открывает корректно… Сбой начал возникать после использования дополнения Tickets, так как именно его кусок кода дает проблему сам по себе и не обрабатывает дальнейший результат, в следствии чего получается пустая белая страница. Не хотелось бы использовать альтернативный обработчик фенома (с прямыми скобками).

    Ответить
    1. Алексей автор

      Я так не заморачивался, сам вызов делаю на fenom, а в чанках оставляю modx parser (где fenom работать не желает) — не вижу в этом не чего плохого. Так что не подскажу) Либо откажитесь от Tickets если принципиально все на одном fenom хотите сделать

      Ответить
      1. VoodooSystem

        К сожалению выявил не единственную проблему фенома на данный момент (не только с Tickets), не хочет обрабатывать так же теги изображений вида {img} и т.д… (на страницах выводятся пустые пути в итоге). Смена на альтернативный источник хранения так же не помогает

        Ответить
        1. Алексей автор

          Не наблюдал ни разу проблемы с изображениями. {img} — так да будет пусто, т.к. нужно так {$_modx->resource.img}, если через pdoresources тяните, то так {$tv.img} или так {$img} — в случае если стоит пустой tvPrefix в вызове.

          Ответить
          1. VoodooSystem

            А в переменной includeTVs при выводе нескольких ресурсов через PdoPage на одной странице указывается название чанка или значение тип ввода из опций (по умолчанию image)? Потому-что даже при использовании стандартного modx-парсера почему-то источники в HTML выводятся пустые (хотя сам тег img src срабатывает)

          2. Алексей автор

            includeTVs — Список ТВ параметров для выборки, через запятую, т.е. указывается название TV поля — читайте документацию)

          3. VoodooSystem

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

          4. Алексей автор

            Кто настраивал MODX по моим статьям такой проблемы нет) Смените настройку Схема URL (ключ link_tag_scheme) с -1 на full и будет вам счастье)