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, освоить его будет очень просто. Вот основные отличия:
Создадим базовый шаблон, который будет выводить текстовое содержимое страницы. На его основе будут строиться другие шаблоны.
Для этого создадим в app/templates файл base.tpl, в app/templates/parts создадим подшаблоны head.tpl, header.tpl, footer.tpl.
Создаём в админке сайта новый шаблон («базовый»). пропишем в него
Добавим шапку, в ней вызовем меню. header.tpl:
footer.tpl пока оставьте его пустым или добавьте что-нибудь сами)
Теперь создадим главную страницу. Создайте файл app/templates/home.tpl:
На этом пока всё, надеюсь, данная информация поможет начать делать сайты на ZoomX)
Официальная документация: modzone.ru/documentation/zoomx/.
Статьи от автора компонента: modzone.ru/blog/?tag=ZoomX.
P.S. Почему-то возникает ошибка 404 при сохранении заметки. И добавьте, пожалуйста, редактор markdown, очень неудобно писать статьи сейчас)
Как мне показалось, автор считает, что компонент предназначен для опытных разработчиков, более менее знакомыми с фреймворками, дабы те не ушли с 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, очень неудобно писать статьи сейчас)
Комментарии: 20
Хотел поправить заметку, не могу, при сохранении 404.
Взял сломал нам сайт своими зумами
В смысле, как?)
Понятия не имею, ты сломал ты и скажи как.
Хорош уже парня троллить. Давай чинить.
Давай давай. Помнится роутинг ты последний ковырял ))
Мне кажется статью не мешает ещё дополнить, в описании указано, что контроллеры автор предлагает хранить в директории /core/app/controllers/, но если новичкам отталкиваться от этой статьи и документации, то можно запутаться, так как по умолчанию контроллеры располагаются в директории /core/components/zoomx/src/Controllers/
Добавлю, как ошибку при сохранении поправят)
Главный плюс, конечно — это файловые элементы без костылей в виде статических элементов
Думаю будет справедливым отметить, что это утверждение верно только для Modx из коробки, в pdoTools элементы тоже файловые, кроме плагинов.
Чтобы не тратить время на изучение стандартного парсера и на решение проблем с ним при реализации чего-то сложнее вывода заголовка страницы.Стандартный парсер это прям зло.
Хранение элементов в базе может отпугнуть новичков.Да им как правило всё равно)))
Осталось дождаться статью или статьи, в которых расскажут о преимуществах ZoomX в решении практических задач. Пока мне непонятно, что я выиграю если начну использовать ZoomX и Smarty взамен Fenom и парсера pdoTools. Если применение роутам я могу придумать, то преимущества шаблонизации на Smarty от меня ускользают. Да, я читал статьи @Сергей Шлоков про работу парсера pdoTools, в частности про то насколько она неэффективна и к каким проблемам это приводит, но на моей практике это не создает трудностей.
И нет, я не имею ввиду, что ZoomX нафиг никому не нужен, я считаю, что те, кто им пользуется, должны больше рассказывать остальным почему это круто и какие задачи они с его помощью решают. В общем надо делится кейсами.
Смарти гораздо более функционален чем fenom. К примеру обладает собственной системой кэширования. Преимущество именно в функциональности.
Смарти гораздо более функционален чем fenomКакие ваши доказательства?)))
Да, я читал статьи @Сергей Шлоков про работу парсера pdoTools, в частности про то насколько она неэффективна и к каким проблемам это приводит, но на моей практике это не создает трудностей.На практике сталкивался только с непонятной работой ignore.
Я бы не сказал, что смарти прям сильно функциональнее. Вообще для большинства преимущества смарти, наверное, незначительны, там не менее:
1. Понятное кэширование. Я не понимаю, как работает кэширование при использовании феном. Почему если вывести {$.get.a}, параметр будет выводиться при изменении в адресной строке? Кэш же вроде как есть. Смарти (как я понял) выдаёт по сути статический html, за исключением того, что вызвано с nocache.
2. Удобное расширение функционала. Можно очень легко создать блок (писал об этом, но без подробностей), есть префильтры (плагин, который срабатывает до парсинга шаблона). По поводу модификаторов спорный момент, их и с феномом легко создать.
3. Использование php функций. Тоже спорный момент, в феном php можно включить, но выглядит более громоздко)
4. Тут чисто субъективное) Приятно, что у тебя под капотом практически нативный шаблонизатор. Феном, судя по статьям Сергея, очень странно прикручен)
pdoTools элементы тоже файловые, кроме плагинов.Не пользовался, кстати, так что есть вопросы:
1. Файловые сниппеты тоже есть? А модификаторы?
2. При обновлении tpl автоматически обновляется кэш?
В pdoTools это как-то опционально, не преподносится как основной способ вызова элементов, поэтому большинство так и будет хранить элементы в базе) Многие про это вообще не знают.
К смарти не относится, но всё же роуты и контроллеры — удобная штука. Не надо создавать служебные шаблоны типа корзины, которые мешаются при выборе шаблонов. Очень удобно делать api.
Ещё, как мне кажется, освоив зум будет гораздо проще освоить фреймворки.
А, и ещё) При синтаксической ошибке в феном просто белый экран, а ошибка в логах, в смарти ошибка прямо на странице, что удобнее)
Это заслуга не смарти, а зумикса, в пдотулсе, при желании, такое тоже можно сделать
1. Файловые сниппеты тоже есть? А модификаторы?Да. А модификаторы это те же сниппеты.
2. При обновлении tpl автоматически обновляется кэш?О каком кэше речь? Если ты про кэш скомпилированных чанков, то наверное нет, надо кнопкой из админки чистить или папку удалять. А больше там никакого кэша вроде и нет.
А ты сделай сайтик на ZoomX и смарти и сам разберешься
Смарти гораздо более функционален чем fenom.Есть что-то ещё, помимо того что я написал? Может не знаю чего)
modx.pro/lessons/23356#comment-136116
А наследование шаблонов есть, чтобы include не плодить?
UPD увидел, сорри
UPD увидел, сорри
$router->get('/', function() use ($modx) {
return viewx("home.tpl");
});
Подскажите как указать к примеру на страницу Блог и в блоге большое количество статей. Как в таком случае роут прописывать?А так же интересует как для мультиязычного сайта все это делать?
В документации все что нужно для решения вашей задачи есть
modzone.ru/documentation/zoomx/routing.html
modzone.ru/documentation/zoomx/routing.html
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.