Как мне показалось, автор считает, что компонент предназначен для опытных разработчиков, более менее знакомыми с фреймворками, дабы те не ушли с 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>
<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, очень неудобно писать статьи сейчас)
Источник: modx.pro/lessons/23356
Объектная
0 комментариев