Как сделать блог на MODX Revo: 3 актуальных способа

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

В данном уроке разберемся с вопросом: как сделать блог на MODX, причем разберем 3 актуальных способа.

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

Устаревшие плагины для создания блога

Все эти дополнения до сих пор работают тот же GetPage — который последний раз обновлялся в 2014 г.!!! И подобных устаревших статей множество — на этом останавливаться не буду. Лучше сразу поговорим как сделать правильно блог в 2022 году.

На каких компонентах лучше всего делать MODX блог?

Правильный ответ на данный вопрос следующий: на тех компонентах которые регулярно обновляются (поддерживаются). Основным компонентом будет PdoTools — это так сказать улучшенная замена выше попадающихся компонентов: GetResourses, GetPage, Breadcrumb и не только! Ещё в рамках конкретного урока (если учесть ссылки на отдельные уроки про то как сделать отдельные элементы), также используются следующие пакеты:

SimpleSearch — реализация поиска (кто на чистом феном делает — то могут обойтись и без него).

pthumb — обрезка изображений (если не важна скорость загрузки, его можно не использовать).

xLike — реализация системы лайков.

Tickets — реализация комментирования и не только (не нужны комментарии — можно не устанавливать), либо вообще воспользоваться сторонними формами комментирования.

Актуальные варианты создания блога на MODX

1. Создание блога на базе Tickets

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

2. Создание блога на базе ресурсов

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

3. Создание блога на базе Minishop2

Minishop2 — это дополнение для создания интернет-магазинов, но на нем можно запилить и полноценный блог. Если я бы сейчас создавал чисто блог (где не планируется внедрения интернет-магазина, как в данном случае), то я бы сделал его на базе Minishop2. И сейчас расскажу почему — во первых у нас из коробки есть галерея изображений, тегирование, завязка комментариев от Tickets прямо на страницах товаров (статей), мультикатегорийность — т.е. одну и туже статью можно выводить сразу в нескольких категориях (аля wordpress) и прочие фишки.

Итог

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

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

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

  1. для категорий (за основу возьмем blog.html),
  2. для записей (за основу возьмем single-blog.html).

Делать их будем на основе созданного ранее шаблона.

Создание шаблона для категории блога.

Делаем копию имеющегося шаблона «Статика» и называем его «Категория блога»;

Делаем копию шаблона

Таким же образом делаем копию чанка с содержимым шаблона.

Делаем копию чанка

Кому не понятно зачем это смотрите уроки: MODX чанки и создание дополнительных шаблонов.

Теперь открываем чанк tpl.3 (где 3 id шаблона) и переносим в него код из blog.html (без шапки, хлебных крошек, подвала и т.д. — они у нас в чанке tpl — который как раз выведен уже в созданном шаблоне).

переносим код в шаблон

Теперь для удобства дальнейшего редактирования давайте вынесем сайтбар (выделил его на скриншоте) в отдельный чанк «sidebar».

код отвечающий за вызов сайтбара

и в этом месте вызовем чанк sidebar.

Теперь из контентной части вынесем в отдельный чанк rowPost, вывод одного из поста (выделил его):

Код оформления вывода поста в категории

После чего все остальные вызовы <article class="blog_item">...</article> можно удалить и на их месте пока просто вызвать чанк rowPost. После данного шага получаем вот такой код шаблона.

<!--================Blog Area =================-->
    <section class="blog_area padding_top">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mb-5 mb-lg-0">
                    <div class="blog_left_sidebar">
                        [[$rowPost]]
                        <nav class="blog-pagination justify-content-center d-flex">
                            <ul class="pagination">
                                <li class="page-item">
                                    <a href="#" class="page-link" aria-label="Previous">
                                        <i class="ti-angle-left"></i>
                                    </a>
                                </li>
                                <li class="page-item">
                                    <a href="#" class="page-link">1</a>
                                </li>
                                <li class="page-item active">
                                    <a href="#" class="page-link">2</a>
                                </li>
                                <li class="page-item">
                                    <a href="#" class="page-link" aria-label="Next">
                                        <i class="ti-angle-right"></i>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
                [[$sidebar]]
            </div>
        </div>
    </section>
    <!--================Blog Area =================-->

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

Создание шаблона для статей.

Создание шаблона для статей идентично созданию шаблона для поста.

Делаем копию шаблона «Категория блога» и называем его «Пост». Затем делаем копию tpl.3 и называем ее tpl.4.

Открываем чанк tpl.4 удаляем все из него и вставляем код контента из html файла single-blog.html. Сразу на месте сайтбара можно вывести ранее созданный чанк sidebar.

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

Вывод изображения

<div class="feature-img"><img class="img-fluid" src="img/blog/single_blog_1.png" alt="Как сделать блог на MODX Revo: 3 актуальных способа"></div>

У нас уже есть ранее созданное TV поле img — будем использовать его:

<div class="feature-img"><img class="img-fluid" src="[[*img]]" alt="[[*pagetitle]]"></div>

Подзаголовок

<h2>Second divided from form fish beast made every of seas all gathered us saying he our</h2>

Сам заголовок (pagetitle, он же h1) — у нас выводится в хлебных крошка. Следовательно в этот давайте тогда выведем «Расширенный заголовок (longtile)» вот такой конструкцией с модификатором:

<h2>[[*pagetitle:default=`[[*longtitle]]`]]</h2>

Либо нам нужно превращать этот подзаголовок в h1 выводить в него просто pagetitle, а сами крошки переделывать — удалить из них заголовок. Пока так оставим.

blog-info

<ul class="blog-info-link mt-3 mb-4">
    <li><a href="#"><i class="far fa-user"></i> Travel, Lifestyle</a></li>
    <li><a href="#"><i class="far fa-comments"></i> 03 Comments</a></li>
</ul>

Если не будите использовать комментарии от Tickets, то получится так:

<ul class="blog-info-link mt-3 mb-4">
    <li><a href="[[~[[#[[*parent]].id]]]]"><i class="far fa-folder-open"></i> [[#[[*parent]].pagetitle]]</a></li>
</ul>

А если будите использовать Tickets, то установите его из modstore и используйте для вывода количества комментариев TicketMeta:

<ul class="blog-info-link mt-3 mb-4">
    <li><a href="[[~[[#[[*parent]].id]]]]"><i class="far fa-folder-open"></i> [[#[[*parent]].pagetitle]]</a></li>
    [[!TicketMeta? &tpl=`tpl.Tickets.meta.new` &getUser=`0` &getFiles=`0` &unusedFiles=`0`]]
</ul>

где чанк tpl.Tickets.meta.new содержит следующий код:

<li data-id="[[+id]]"><a href="[[+uri]]#comments"><i class="far fa-comments"></i> [[+comments]] комментариев</a></li>

Внимание! Кто собрался делать чисто на тикетах, у вас будет немного другой код, у вас весь блок уйдет TicketMeta, я об этом расскажу в одной из статей.

Блок excert — вступление

<p class="excert">...</p>

Сюда выведем аннотацию (introtext):

<p class="excert">[[*introtext]]</p>

Контент

Далее идут абзацы с текстом удаляем их и вместо них выводим [[*content]].

Для начала достаточно, остальные блоки (лайки, кнопки поделиться, предыдущая-следующая запись, комментарии и т.д.) оставляем как есть. Т.к. у нас пока нет контента их особого смысла делать прямо сейчас нет. Теперь выполните домашнее и потом уже можно начать реализовывать весь остальной функционал.

ДЗ — наполнение блога контентом

Если у вас есть контент, можете добавить его, если нет, то можно для начала добавить любой. У меня контента нет я создам 3 категории на бум и по 2 статьи в каждой категории, если изобразить в виде структуры, то она будет выглядеть так:

Блог
|--Под категория блога 1
|----Статья 1
|----Статья 2
|--Под категория блога 2
|----Статья 3
|----Статья 4
|--Под категория блога 3
|----Статья 5
|----Статья 6

Блог и под категории блога — шаблоном «Категория блога».

Все статьи — шаблон «Пост».

А вот дальше в отличии от выбора способа создания блога (1,2,3) будут разные типы ресурсов:

Для варианта 1 (должен быть установлен тикетс): Верхняя категория: Блог — это обычный MODX ресурс, а вот все под категории блога — это секции с тикетами, а все статьи это тикеты. Смотри урок: Создание блога на базе Tickets.

Для варианта 2 — все категории и статьи, это обычные MODX ресурсы (документы). С этим думаю проблем не возникнет.

Для варианта 3 (должен быть установлен minishop2): Все категории и под категории — это секции с товарами, соответственно все статьи — это товары. Смотри документацию по Minishop2.

Примечания: все заполняйте по максимуму: pagetitle, longtitle, introtext, content, TV img.

Что дальше

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

Доделываем функционал статей:

Доделываем категорию (выводим статьи с пагинацией).

Сделаем сайтбар полностью динамическим:

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

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

Оцените автора
( Пока оценок нет )
Web-Revenue.ru