MODX инструкция, о том как создать блог

Содержание

Создание шаблонов для блога
Создание шаблона для категории блога.
Создание шаблона для статей.
Контент
Что дальше?
Создание раздела блога и постов

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

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

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

для категорий (blog.html),
для записей (blog-single.html).

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

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

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

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

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

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

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

и в этом месте вызовем чанк: [[$sidebar]] или на fenom {include 'sidebar'}.

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

После чего все остальные вызовы постов можно удалить и на их месте пока просто вызвать чанк rowPost. Ну и вверху вызовем поле контент. После данного шага получаем вот такой код шаблона.

<!-- ======= Blog Section ======= -->
<section id="blog" class="blog">
    <div class="container" data-aos="fade-up">
        <div class="row">
            <div class="col-lg-8 entries">
                [[*content]]
                [[$rowPost]]
                <div class="blog-pagination">
                  <ul class="justify-content-center">
                    <li><a href="#">1</a></li>
                    <li class="active"><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                  </ul>
                </div>
            </div><!-- End blog entries list -->
            [[$sidebar.tpl]]
        </div>
    </div>
</section><!-- End Blog Section -->

fenom

<!-- ======= Blog Section ======= -->
<section id="blog" class="blog">
    <div class="container" data-aos="fade-up">
        <div class="row">
            <div class="col-lg-8 entries">
                {$_modx->resource.content}
                {include 'rowPost'}
                <div class="blog-pagination">
                  <ul class="justify-content-center">
                    <li><a href="#">1</a></li>
                    <li class="active"><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                  </ul>
                </div>
            </div><!-- End blog entries list -->
            {include 'sidebar'}
        </div>
    </div>
</section><!-- End Blog Section -->

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

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

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

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

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

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

<img src="assets/img/blog/blog-1.jpg" alt="Как создать блог на MODX" class="img-fluid">

Здесь советую избавиться от ссылки страницы суму на себя. А по поводу изображения: у нас уже есть ранее созданное TV поле image — будем использовать его, а в атрибут alt выведем заголовок страницы. В конечном итоге получаем:

<img src="[[*image]]" alt="[[*pagetitle]]" class="img-fluid">

fenom

<img src="{$_modx->resource.image}" alt="{$_modx->resource.pagetitle}" class="img-fluid">

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

<h2 class="entry-title">
      <a href="blog-single.html">Dolorum optio tempore voluptas dignissimos cumque fuga qui quibusdam quia</a>
</h2>

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

<h2 class="entry-title">[[*pagetitle:default=`[[*longtitle]]`]]</h2>

fenom

<h2 class="entry-title">{$_modx->resource.longtitle ?: $_modx->resource.pagetitle}</h2>

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

Вывод метаинформации

<div class="entry-meta">
    <ul>
        <li class="d-flex align-items-center"><i class="bi bi-person"></i> <a href="blog-single.html">John Doe</a></li>
        <li class="d-flex align-items-center"><i class="bi bi-clock"></i> <a href="blog-single.html"><time datetime="2020-01-01">Jan 1, 2020</time></a></li>
        <li class="d-flex align-items-center"><i class="bi bi-chat-dots"></i> <a href="blog-single.html">12 Comments</a></li>
    </ul>
</div>

Здесь можно поступить разными способами. В зависимости от выбора дальнейших компонентов. Пока сделаем так:

<div class="entry-meta">
    <ul>
        <li class="d-flex align-items-center"><i class="bi bi-person"></i> <a href="#">[[*createdby:userinfo=`fullname`]]</a></li>
        <li class="d-flex align-items-center"><i class="bi bi-clock"></i> <time datetime="[[*publishedon:date=`%Y-%m-%dT%H:%M`]]">[[*publishedon:date=`%e %b %Y`]]</time></li>
        <!--li class="d-flex align-items-center"><i class="bi bi-chat-dots"></i> <a href="#">12 комментариев</a></li-->
    </ul>
</div>

Подробнее про вывод дат можно посмотреть в уроке: Форматирование дат и времени в MODX. А про поля пользователей здесь.

fenom

<div class="entry-meta">
    <ul>
        <li class="d-flex align-items-center"><i class="bi bi-person"></i> <a href="#">{$_modx->resource.createdby | user : 'fullname'}</a></li>
        <li class="d-flex align-items-center"><i class="bi bi-clock"></i> <time datetime="{$_modx->resource.publishedon | date : "%Y-%m-%dT%H:%M"}">{$_modx->resource.publishedon | date : "%e %b %Y"}</time></li>
        <!--li class="d-flex align-items-center"><i class="bi bi-chat-dots"></i> <a href="#">12 комментариев</a></li-->
    </ul>
</div>

Контент

Далее идет блок с контентом (div с классом entry-content), удаляем из него весть контент: абзацы (p) с текстом и т.д. удаляем их и вместо них выводим [[*content]] или на fenom {$_modx->resource.content}.

Футер статьи

<div class="entry-footer">
    <i class="bi bi-folder"></i>
    <ul class="cats">
        <li><a href="#">Business</a></li>
    </ul>
    <i class="bi bi-tags"></i>
    <ul class="tags">
        <li><a href="#">Creative</a></li>
        <li><a href="#">Tips</a></li>
        <li><a href="#">Marketing</a></li>
    </ul>
</div>

Здесь в верху нужно вывести название родителя и ссылку на него, сделать это можно так: <a href="[[~[[*parent]]]]">[[#[[*parent]].pagetitle]]</a>.

fenom

<a href="{$_modx->resource.parent | url}">{$_modx->resource.parent | resource : 'pagetitle'}</a>

А вот тегирование пока пропускаем, т.к. тоже существует множество вариантов его реализации.

Блок автора

<div class="blog-author d-flex align-items-center">
    <img src="assets/img/blog/blog-author.jpg" class="rounded-circle float-left" alt="Как создать блог на MODX">
    <div>
        <h4>Jane Smith</h4>
        <div class="social-links">
            <a href="https://twitters.com/#"><i class="bi bi-twitter"></i></a>
            <a href="https://facebook.com/#"><i class="bi bi-facebook"></i></a>
            <a href="https://instagram.com/#"><i class="biu bi-instagram"></i></a>
        </div>
        <p>
            Itaque quidem optio quia voluptatibus dolorem dolor. Modi eum sed possimus accusantium. Quas repellat voluptatem officia numquam sint aspernatur voluptas. Esse et accusantium ut unde voluptas.
        </p>
    </div>
</div><!-- End blog author bio -->

Имя, аватар и описание можно вывести через поля пользователей например так:

<img src="[[*createdby:userinfo=`photo`]]" class="rounded-circle float-left" alt="[[*createdby:userinfo=`fullname`]]">
<h4>[[*createdby:userinfo=`fullname`]]</h4>
<p>[[*createdby:userinfo=`address`]]</p>

fenom

<img src="{$_modx->resource.createdby | user : 'photo'}" class="rounded-circle float-left" alt="{$_modx->resource.createdby | user : 'fullname'}">
<h4>{$_modx->resource.createdby | user : 'fullname'}</h4>
<p>{$_modx->resource.createdby | user : 'address'}</p>

Главное не забудьте все это заполнить в профиле: Управление — Пользователи — Обновить пользователя.

А вот полей соц. сетей в профиле пользователя нет, но вы можете создать их самостоятельно при помощи бесплатного дополнения extrafields.

Либо если вы единственный пользователь, то соц. сети к примеру можно посадить на ClientConfig.

Комментарии

Они далеко не всем нужны и опять же способов их реализовать достаточно: tickets ну или платный easyComm (если хотите чтобы в админке сохранялись) + куча различных сервисов. В общем, если хотите чтобы было все интегрировано в MODX, то пока вынесите все разметку комментариев в чанк .

В конечном итоге у вас должен получится вот такой код шаблона:

<!-- ======= Blog Single Section ======= -->
<section id="blog" class="blog">
    <div class="container" data-aos="fade-up">
        <div class="row">
            <div class="col-lg-8 entries">
                <article class="entry entry-single">
                    <div class="entry-img">
                        <img src="[[*image]]" alt="[[*pagetitle]]" class="img-fluid">
                    </div>
                    <h2 class="entry-title">[[*pagetitle:default=`[[*longtitle]]`]]</h2>

                    <div class="entry-meta">
                        <ul>
                            <li class="d-flex align-items-center"><i class="bi bi-person"></i> <a href="#">[[*createdby:userinfo=`fullname`]]</a></li>
                            <li class="d-flex align-items-center"><i class="bi bi-clock"></i> <time datetime="[[*publishedon:date=`%Y-%m-%dT%H:%M`]]">[[*publishedon:date=`%e %b %Y`]]</time></li>
                            <!--li class="d-flex align-items-center"><i class="bi bi-chat-dots"></i> <a href="#">12 комментариев</a></li-->
                        </ul>
                    </div>

                    <div class="entry-content">
                        [[*content]]
                    </div>

                    <div class="entry-footer">
                        <i class="bi bi-folder"></i>
                        <ul class="cats">
                            <li><a href="[[~[[*parent]]]]">[[#[[*parent]].pagetitle]]</a></li>
                        </ul>
                        <i class="bi bi-tags"></i>
                        <ul class="tags">
                            <li><a href="#">Creative</a></li>
                            <li><a href="#">Tips</a></li>
                            <li><a href="#">Marketing</a></li>
                        </ul>
                    </div>

                </article><!-- End blog entry -->
                <div class="blog-author d-flex align-items-center">
                    <img src="[[*createdby:userinfo=`photo`]]" class="rounded-circle float-left" alt="[[*createdby:userinfo=`fullname`]]">
                    <div>
                        <h4>[[*createdby:userinfo=`fullname`]]</h4>
                        <div class="social-links">
                            [[++twitter:!empty=`<a href="[[++twitter]]"><i class="bi bi-twitter"></i></a>`]]
                            [[++facebook:!empty=`<a href="[[++facebook]]"><i class="bi bi-facebook"></i></a>`]]
                            [[++instagram:!empty=`<a href="[[++instagram]]"><i class="biu bi-instagram"></i></a>`]]
                        </div>
                        <p>[[*createdby:userinfo=`address`]]</p>
                  </div>
                </div><!-- End blog author bio -->
                [[$comments]]
            </div><!-- End blog entries list -->
            [[$sidebar]]
        </div>
    </div>
</section><!-- End Blog Single Section -->

fenom

<!-- ======= Blog Section ======= -->
<section id="blog" class="blog">
    <div class="container" data-aos="fade-up">
        <div class="row">
            <div class="col-lg-8 entries">
                <article class="entry entry-single">
                    <div class="entry-img">
                        <img src="{$_modx->resource.image}" alt="{$_modx->resource.pagetitle}" class="img-fluid">
                    </div>
                    <h2 class="entry-title">{$_modx->resource.longtitle ?: $_modx->resource.pagetitle}</h2>

                    <div class="entry-meta">
                        <ul>
                            <li class="d-flex align-items-center"><i class="bi bi-person"></i> <a href="#">{$_modx->resource.createdby | user : 'fullname'}</a></li>
                            <li class="d-flex align-items-center"><i class="bi bi-clock"></i> <time datetime="{$_modx->resource.publishedon | date : "%Y-%m-%dT%H:%M"}">{$_modx->resource.publishedon | date : "%e %b %Y"}</time></li>
                            <!--li class="d-flex align-items-center"><i class="bi bi-chat-dots"></i> <a href="#">12 комментариев</a></li-->
                        </ul>
                    </div>

                    <div class="entry-content">
                        {$_modx->resource.content}
                    </div>

                    <div class="entry-footer">
                        <i class="bi bi-folder"></i>
                        <ul class="cats">
                            <li><a href="{$_modx->resource.parent | url}">{$_modx->resource.parent | resource : 'pagetitle'}</a></li>
                        </ul>
                        <i class="bi bi-tags"></i>
                        <ul class="tags">
                            <li><a href="#">Creative</a></li>
                            <li><a href="#">Tips</a></li>
                            <li><a href="#">Marketing</a></li>
                        </ul>
                    </div>

                </article><!-- End blog entry -->
                <div class="blog-author d-flex align-items-center">
                    <img src="{$_modx->resource.createdby | user : 'photo'}" class="rounded-circle float-left" alt="{$_modx->resource.createdby | user : 'fullname'}">
                  <div>
                    <h4>{$_modx->resource.createdby | user : 'fullname'}</h4>
                    <div class="social-links">
                        {if $_modx->config.twitter?}<a href="{$_modx->config.twitter}"><i class="bi bi-twitter"></i></a>{/if}
                        {if $_modx->config.facebook?}<a href="{$_modx->config.facebook}"><i class="bi bi-facebook"></i></a>{/if}
                        {if $_modx->config.instagram?}<a href="{$_modx->config.instagram}"><i class="biu bi-instagram"></i></a>{/if}
                    </div>
                    <p>{$_modx->resource.createdby | user : 'address'}</p>
                  </div>
                </div><!-- End blog author bio -->
                {include 'file:chunks/blog/comments.tpl'}
            </div><!-- End blog entries list -->
            {include 'file:chunks/blog/sidebar.tpl'}
        </div>
    </div>
</section><!-- End Blog Single Section -->

Что дальше?

Дальше нам немного нужно наполнить данный блог: создать категории и статьи, примерно так:

Блог 
|--Техническое обслуживание 
|----Статья 1
|----Статья 2 
|----Статья 3 
|--Полезное 
|----Статья 4 
|----Статья 5

Создание раздела блога и постов

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

Если создаете на ресурсах (подходит под любую версию MODX и можно спарить с тем же tickets), то можно ничего не устанавливать и сразу все создавать присваивая нужные шаблоны.

Открываем вкладку «Ресурсы» (находится в левой панели), щелкаем по «Website» правой кнопкой мыши и выбираем Создать -> Документ заполняем поля: как минимум Заголовок (например блог) и Шаблон (для категории).В вот подкатегории если выбрали ресурсы создаются так щелкаем по «Блог» правой кнопкой мыши и выбираем Создать -> Документ. Ну и статьи также.

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

А если хотите чтобы блог полностью управлялся тикетс, тогда щелкаем по «Блог» правой кнопкой мыши и выбираем Создать -> Раздел с тикетами и заполняем поля: как минимум Заголовок (например Техническое обслуживание) и Шаблон (для категории) и переходим в Настройки раздела.

На вкладке Дочерние тикеты: указываем шаблон для тикетов (статей блога), в Формирование URI указываем %alias и сохраняем, так же рекомендую отключить jevix и разрешить выполнение тегов MODX (если с фронт энда пользователи ни могут не чего писать) и сохраняем.

А статьи в дальнейшем добавляются прям из тикетс. На вкладке «Раздел», нажимаем на кнопку «Создать тикет» чтобы создать статью. Заполняете все основные поля и опубликуйте

Для тех кто хочет создать блог на базе модуля для интернет магазина (minshop2), устанавливаем его. И дальше по аналогии с тикетс, создаем категории товаров и товары (это статьи).

После того как немного наполните блог, переходите к следующим урокам: MODX комментарии или отзывы при помощи Tickets и pdoPage: параметры, примеры вывода ресурсов с разбивкой на страницы.

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

MODX: поля пользователей и их вывод во фронтенде >