ZoomX для новичков

ZoomX — компонент, который подключает шаблонизатор Smarty и делает элементы файловыми. Также есть роутер, контроллеры, как во фреймворках. Главный плюс, конечно — это файловые элементы без костылей в виде статических элементов.

Как мне показалось, автор считает, что компонент предназначен для опытных разработчиков, более менее знакомыми с фреймворками, дабы те не ушли с MODX. Могу ошибаться, конечно) Моё же мнение таково: ZoomX нужно изучать сразу же, вместе с pdoTools. Почему? Чтобы не тратить время на изучение стандартного парсера и на решение проблем с ним при реализации чего-то сложнее вывода заголовка страницы. Smarty гораздо проще в использовании. Хранение элементов в базе может отпугнуть новичков. Именно ZoomX, а не выход третьей версии MODX — важнейшая веха в развитии системы со времён pdoTools. Но все статьи про компонент написаны для более-менее опытных разработчиков, новичкам будет сложно разобраться. Поэтому, собственно, и решил написать эту статью.

Файловая структура
Я предлагаю такую файловую структуру для бэка:
* /core/app/
* /core/app/templates/ — шаблоны («вьюхи»).
* /core/app/templates/parts/ — подшаблоны (чанки).
* /core/app/snippets/ — сниппеты.
* /core/app/plugins/ — плагины, работают только на фронте.
* /core/app/controllers/ — контроллеры.
* /core/app/smarty/ — плагины для Smarty (модификаторы, блоки, фильтры).
* /core/app/vendor/ — сторонние библиотеки, установленные через composer или вручную.

Системные настройки
Откроем системные настройки, раздел zoomx. Поменяем:
zoomx_smarty_custom_plugin_dir — {core_path}app/smarty/
zoomx_enable_pdotools_adapter — Да
zoomx_file_snippets_path — {core_path}app/snippets/
zoomx_template_dir — {core_path}app/templates/

Шаблоны
Для начала нужно почитать про шаблонизатор Smarty.
Ссылки: раз — modzone.ru/documentation/zoomx/smarty.html, два — www.smarty.net/docsv2/ru/.
Если вы знакомы с Fenom, освоить его будет очень просто. Вот основные отличия:
| Smatry                  | Fenom
| ----------------------- | -----------------------
| `{$var = 'a'}`          | `{set $var = 'a'}`
| `{$var|cat:'string'}`   | `{$var ~ 'string'}`
| `{"{$var}string"}`      | `{$var ~ 'string'}`
| `{$a|default:$b}`       | `{$a ?: $b}`
| `{literal}`             | `{ignore}`
| `{$smatry.get nocache}` | `{$.get}` |
| `{'id'|resource}`       | `{''|resource:'id'}`
| `{1|field:'favicon'}`   | `{1|resource:'tv.favicon'}`
| `{'site_url'|config}`   | `{'site_url'|option}`
Модификатора field нет в ZoomX по умолчанию, хотя он нужен практически всегда. Как создать: modzone.ru/blog/2020/12/19/zoomx-creating-smarty-plugins/.

Создадим базовый шаблон, который будет выводить текстовое содержимое страницы. На его основе будут строиться другие шаблоны.
Для этого создадим в app/templates файл base.tpl, в app/templates/parts создадим подшаблоны head.tpl, header.tpl, footer.tpl.
Создаём в админке сайта новый шаблон («базовый»). пропишем в него 
{include 'base.tpl'}
В base.tpl пропишем:
<!doctype html>
<html lang="{'cultureKey'|config}">
    <head>
        {include "parts/head"}
    </head>
    
    <body>
        {include "parts/header"}
        
        {* если не главная страница, выведем крошки и заголовок *}
        {if 'id'|resource != 1}
            <div class="container">
                {'pdoCrumbs'|snippet:[
                    'showHome' => 1,
                    'tplWrapper' => '@INLINE <ul itemscope="" itemtype="http://schema.org/BreadcrumbList" class="breadcrumb">{$output}</ul>',
                    'tpl' => '@INLINE
                        <li><span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
                            <a title="{$menutitle}" itemprop="item" href="{$link}"><span itemprop="name">{$menutitle}</span><meta itemprop="position" content="{$idx}"></a>
                        </span></li>',
                    'tplCurrent' => '@INLINE
                        <li><span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
                        <span itemprop="name">{$menutitle}</span><meta itemprop="position" content="{$idx}">
                    </span></li>',
                    'tplHome' => '@INLINE
                        <li><span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
                            <a class="" title="{$menutitle}" itemprop="item" href="{$link}"><span itemprop="name">{$menutitle}</span><meta itemprop="position" content="{$idx}"></a>
                        </span></li>'
                ]}

                <h1 class="h1">{'pagetitle'|resource}</h1>
            </div>
        {/if}
        
        {* основной блок *}
        {block 'main'}
            <div class="container">
                <div class="content">
                    {'content'|resource|modx}
                </div>
            </div>
        {/block}

        {include "footer"}
    <script>requirejs(["app/community", "app/counters"]);</script>
</body>
</html>
head.tpl:
{$title = 'longtitle'|resource:'pagetitle'|cat:' | '|cat:('site_name'|config)}
{$description = 'description'|resource}

<base href="{'site_url'|config}">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<title>{$title|escape}</title>
<meta name="description" content="{$description|escape}">
<link rel="canonical" href="{'id'|resource|url:['scheme'=>'full']}">
<meta property="og:type" content="website">
<meta property="og:title" content="{$title|escape}">
<meta property="og:description" content="{$description|escape}">
<meta property="og:url" content="{'id'|resource|url:['scheme'=>'full']}">
<meta property="og:image" content="{'site_url'|config}{'image'|resource}">

Добавим шапку, в ней вызовем меню. header.tpl:
<header class="header">
    <div class="container">
        <div class="header__menu">
            {'pdoMenu'|snippet:[
                'parents' => 0,
                'level' => 1,
            ]}
        </div>
    </div>
</header>

footer.tpl пока оставьте его пустым или добавьте что-нибудь сами)

Теперь создадим главную страницу. Создайте файл app/templates/home.tpl:
{* расширяем базовый шаблон *}
{extends 'base.tpl'}

{* заменяем содержание блока main из базового шаблона *}
{block 'main'}
    Главная страница
{/block}
Шаблон в админке создавать не будем, ведь шаблон главной нужен только для одной страницы. Чтобы он отобразился, в /core/config/routes.php пропишем правило, чтобы при открытии главной страницы отображался home.tpl:
$router->get('/', function() use ($modx) {
    return viewx("home.tpl");
});

На этом пока всё, надеюсь, данная информация поможет начать делать сайты на ZoomX)
Официальная документация: modzone.ru/documentation/zoomx/.
Статьи от автора компонента: modzone.ru/blog/?tag=ZoomX.

P.S. Почему-то возникает ошибка 404 при сохранении заметки. И добавьте, пожалуйста, редактор markdown, очень неудобно писать статьи сейчас)
Лёша
Лёша
10 октября 2022, 07:38
modx.pro
5
1 256
+10

Комментарии: 20

Лёша
Лёша
10 октября 2022, 07:41
0
Хотел поправить заметку, не могу, при сохранении 404.
    Николай Савин
    Николай Савин
    10 октября 2022, 08:49
    0
    Взял сломал нам сайт своими зумами
      Лёша
      Лёша
      10 октября 2022, 09:02
      0
      В смысле, как?)
        Николай Савин
        Николай Савин
        10 октября 2022, 15:13
        0
        Понятия не имею, ты сломал ты и скажи как.
          Сергей Шлоков
          Сергей Шлоков
          10 октября 2022, 16:23
          0
          Хорош уже парня троллить. Давай чинить.
            Николай Савин
            Николай Савин
            11 октября 2022, 13:35
            0
            Давай давай. Помнится роутинг ты последний ковырял ))
    Алексей Соин
    Алексей Соин
    11 октября 2022, 08:32
    0
    Мне кажется статью не мешает ещё дополнить, в описании указано, что контроллеры автор предлагает хранить в директории /core/app/controllers/, но если новичкам отталкиваться от этой статьи и документации, то можно запутаться, так как по умолчанию контроллеры располагаются в директории /core/components/zoomx/src/Controllers/
      Лёша
      Лёша
      11 октября 2022, 21:04
      +1
      Добавлю, как ошибку при сохранении поправят)
      Артур Шевченко
      Артур Шевченко
      11 октября 2022, 12:38
      +1
      Главный плюс, конечно — это файловые элементы без костылей в виде статических элементов

      Думаю будет справедливым отметить, что это утверждение верно только для Modx из коробки, в pdoTools элементы тоже файловые, кроме плагинов.

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

      Хранение элементов в базе может отпугнуть новичков.
      Да им как правило всё равно)))

      Осталось дождаться статью или статьи, в которых расскажут о преимуществах ZoomX в решении практических задач. Пока мне непонятно, что я выиграю если начну использовать ZoomX и Smarty взамен Fenom и парсера pdoTools. Если применение роутам я могу придумать, то преимущества шаблонизации на Smarty от меня ускользают. Да, я читал статьи @Сергей Шлоков про работу парсера pdoTools, в частности про то насколько она неэффективна и к каким проблемам это приводит, но на моей практике это не создает трудностей.
      И нет, я не имею ввиду, что ZoomX нафиг никому не нужен, я считаю, что те, кто им пользуется, должны больше рассказывать остальным почему это круто и какие задачи они с его помощью решают. В общем надо делится кейсами.
        Николай Савин
        Николай Савин
        11 октября 2022, 13:42
        0
        Смарти гораздо более функционален чем fenom. К примеру обладает собственной системой кэширования. Преимущество именно в функциональности.
          Артур Шевченко
          Артур Шевченко
          11 октября 2022, 20:09
          0
          Смарти гораздо более функционален чем fenom
          Какие ваши доказательства?)))
            Лёша
            Лёша
            11 октября 2022, 20:53
            0
            Да, я читал статьи @Сергей Шлоков про работу парсера pdoTools, в частности про то насколько она неэффективна и к каким проблемам это приводит, но на моей практике это не создает трудностей.
            На практике сталкивался только с непонятной работой ignore.

            Я бы не сказал, что смарти прям сильно функциональнее. Вообще для большинства преимущества смарти, наверное, незначительны, там не менее:
            1. Понятное кэширование. Я не понимаю, как работает кэширование при использовании феном. Почему если вывести {$.get.a}, параметр будет выводиться при изменении в адресной строке? Кэш же вроде как есть. Смарти (как я понял) выдаёт по сути статический html, за исключением того, что вызвано с nocache.
            2. Удобное расширение функционала. Можно очень легко создать блок (писал об этом, но без подробностей), есть префильтры (плагин, который срабатывает до парсинга шаблона). По поводу модификаторов спорный момент, их и с феномом легко создать.
            3. Использование php функций. Тоже спорный момент, в феном php можно включить, но выглядит более громоздко)
            4. Тут чисто субъективное) Приятно, что у тебя под капотом практически нативный шаблонизатор. Феном, судя по статьям Сергея, очень странно прикручен)

            pdoTools элементы тоже файловые, кроме плагинов.
            Не пользовался, кстати, так что есть вопросы:
            1. Файловые сниппеты тоже есть? А модификаторы?
            2. При обновлении tpl автоматически обновляется кэш?

            В pdoTools это как-то опционально, не преподносится как основной способ вызова элементов, поэтому большинство так и будет хранить элементы в базе) Многие про это вообще не знают.

            К смарти не относится, но всё же роуты и контроллеры — удобная штука. Не надо создавать служебные шаблоны типа корзины, которые мешаются при выборе шаблонов. Очень удобно делать api.

            Ещё, как мне кажется, освоив зум будет гораздо проще освоить фреймворки.
              Лёша
              Лёша
              11 октября 2022, 21:14
              0
              А, и ещё) При синтаксической ошибке в феном просто белый экран, а ошибка в логах, в смарти ошибка прямо на странице, что удобнее)
                Алексей Соин
                Алексей Соин
                11 октября 2022, 23:02
                0
                Это заслуга не смарти, а зумикса, в пдотулсе, при желании, такое тоже можно сделать
                Артур Шевченко
                Артур Шевченко
                12 октября 2022, 12:28
                0
                1. Файловые сниппеты тоже есть? А модификаторы?
                Да. А модификаторы это те же сниппеты.

                2. При обновлении tpl автоматически обновляется кэш?
                О каком кэше речь? Если ты про кэш скомпилированных чанков, то наверное нет, надо кнопкой из админки чистить или папку удалять. А больше там никакого кэша вроде и нет.
                Николай Савин
                Николай Савин
                12 октября 2022, 12:16
                0
                А ты сделай сайтик на ZoomX и смарти и сам разберешься
                Лёша
                Лёша
                25 октября 2022, 09:35
                0
                Смарти гораздо более функционален чем fenom.
                Есть что-то ещё, помимо того что я написал? Может не знаю чего)
                modx.pro/lessons/23356#comment-136116
              Sergey (Sentinel)
              Sergey (Sentinel)
              15 октября 2022, 12:22
              0
              А наследование шаблонов есть, чтобы include не плодить?

              UPD увидел, сорри
                Maks
                Maks
                09 мая 2023, 08:53
                0 
                $router->get('/', function() use ($modx) {
    return viewx("home.tpl");
});
                Подскажите как указать к примеру на страницу Блог и в блоге большое количество статей. Как в таком случае роут прописывать?

                А так же интересует как для мультиязычного сайта все это делать?
                Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                20