Простой шаблон в MaxSite CMS
30-01-2022Reading time ~ 7 min.Шаблоны для MaxSite CMS 237
В MaxSite CMS можно создавать шаблоны, которые могут быть построены по произвольной схеме. Текущие шаблоны (MF и Default) имеют много настроек, чтобы охватить сразу множество задач. Из-за этого в них сложная часть кода спрятана в shared, который в свою очередь завязан на предопределённую структуру каталогов и файлов. Но если стоит задача сделать свой вариант, то в MaxSite CMS с этим нет никаких сложностей.
Для начала рассмотрим как сделать какой-то простой лендинг, где будет свой css-фреймворк и своя html-верстка. Например клиент пока только думает над созданием полноценного сайта, поэтому нам нужен какой-то очень простой вариант, где мы разместим несколько html-блоков. Поэтому мы можем сразу поставить MaxSite CMS как обычно, только сделаем небольшой минималистический шаблон.
Первым делом сделаем отдельный каталог шаблона, например minimal
. В нём файл info.php
, который можно скопировать с default-шаблона и поправить название. Этот файл нужен только для админ-панели и не содержит никакой функциональности.
Теперь сделаем index.php
, который является обязательным для любого шаблона. В нём сразу разместим нужный html-код:
<?php if (!defined('BASEPATH')) exit('No direct script access allowed'); ?> <!DOCTYPE HTML> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Sample page</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/maxsite/berry/dist/berry.css"> </head> <body> ... тут произвольный html ... </body> </html>
Я использую Berry CSS из CDN, но вы можете подключить любой другой фреймворк.
Теперь, если обновить страницу сайта (предварительно нужно выбрать этот шаблон в админ-панели), то мы увидим этот html-код.
Дальше вы наполняете сайт как считаете нужным. Например можно взять блоки Berry CSS и просто их вставить в index.php
.
У вас может возникнуть ситуация, когда нужно получить url-путь к шаблону для подключения css-файла или картинок. Для этого используется php-вставка:
вместо: <img src="assets/images/rocket.svg"> указать: <img src="<?= getinfo('template_url') ?>assets/images/rocket.svg">
Такой приём годится для случаев, когда сайт нужен только для какого-то фиксированного вывода — лендинг или временная заглушка. В таком варианте, конечно же, не используются ни плагины, ни прочие возможности системы. Но как временный вариант, почему бы и нет.
Теперь усложним задачу. Попробуем использовать для вывода какую-то произвольную запись. То есть в админ-панели мы создаём любой текст (включая html), поэтому нам нужно только вывести его в index.php
.
Здесь есть несколько подходов, воспользуемся самым простым — классом вывода Block_pages
. Этот класс предназначен для того, чтобы самостоятельно получить нужные записи, а потом вывести их по заданному формату.
Начальный код будет таким:
<?php if (!defined('BASEPATH')) exit('No direct script access allowed'); $b = new Block_pages([ 'page_id' => 60, 'cut' => false ]); ?> <!DOCTYPE HTML> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Sample page</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/maxsite/berry/dist/berry.css"> </head> <body> <div class="layout-center-wrap"> <div class="layout-wrap"> <?php $b->output() ?> </div> </div> </body> </html>
То есть вначале создаётся объект $b
с параметрами, а потом выводится через метод output()
.
Параметры Block_pages — это массив, где указывается какие именно записи мы хотим получить. Да, не одной записи, а сразу несколько. В этом примере я указал запись № 60, а также убрал cut-обрезку текста. Если бы я хотел получить последние три записи сайта, то указал бы так:
$b = new Block_pages([ 'limit' => 3, 'cut' => false ]);
Если нужно ограничить записи определёнными рубриками, можно можно это указать так:
$b = new Block_pages([ 'limit' => 3, 'cat_id' => '3,6', 'cut' => false ]);
То есть возможности получение записей совпадают с параметрами функции mso_get_pages()
.
Вывод записей происходит через метод output()
, который тоже может содержать массив параметров, с помощью которых мы можем настроить html-вывод каждой записи. Для этого используется другой класс Page_out
, только скрытно, чтобы не создавать лишние сложности при использовании.
Но нужно знать, то вывод через Page_out строится по такой схеме:
- line1
- line2
- line3
- content — выводится автоматом
- line4
- line5
Сейчас в первой линии выводится миниатюра (thumb), во второй — заголовок записи (title). Третья линия выводит рубрику (cat) и дату публикации (date). После этого автоматом выводится текст записи (content). Линии 4 и 5, которые выводятся после контента, по умолчанию пустые.
Деление на линии условное — только для удобства использования. Если строго, то можно использовать только одну линию до и одну после вывода контента.
Такое деление сделано для того, чтобы иметь возможности создавать разные варианты вывода записей. В самом простом случае, если мы хотим просто отключить вывод всех линий, нужно их «обнулить». В этом случае весь контент будет формироваться только в тексте записи.
... <?php $b->output([ 'line1' => '', 'line2' => '', 'line3' => '', ]); ?> ...
Но мы для примера сделаем такую схему вывода:
$b->output([ 'line1' => '[title][date]', 'line2' => '[thumb]', 'line3' => '', 'line4' => '[cat]', ]);
То есть вначале выводим заголовок, потом дату публикации, а в конце текста — рубрику. Такой формат вывода похож на bb-код и используется в шаблонах MaxSite CMS. Система сама заменит такие коды на реальные данные. То есть нам не нужно задумываться о том, как именно получать данные записей и их обрабатывать.
Дальше нужно настроить вывод этих кодов. Например по умолчанию заголовок (title) выводится как H3
. Изменим на H1
. Для рубрик и даты тоже внесём изменения.
$b->output([ 'line1' => '[title][date]', 'line2' => '[thumb]', 'line3' => '', 'line4' => '[cat]', 'title_start' => '<h1 class="mar30-t">', 'title_end' => '</h1>', 'date' => 'D, j F Y г. в H:i', 'date_start' => '<div class="t90 mar10-tb"><time datetime="[page_date_publish_iso]">', 'date_end' => '</time></div>', 'cat_start' => '<div class="t90 t-italic mar10-tb">Рубрика: ', 'cat_end' => '</div>', 'cat_sep' => ', ', ]);
Если ради интереса вы сделаете вывод нескольких записей, то убедитесь, то данное форматирование работает для всех записей. Но при этом, если нужно, то можно выделить блоки каждой записи:
... 'page_start' => '<div class="pad20 bg-gray50 mar30-t">', 'page_end' => '</div>', ...
Это используется например для организации flex-колонок. Покажу простой пример на классах Berry CSS:
... 'block_start' => '<div class="flex flex-wrap">', 'block_end' => '</div>', 'page_start' => '<div class="w48 pad20 bg-gray50 mar30-t">', 'page_end' => '</div>', ...
То есть для общего контейнера (block_start/block_end) прописываем flex, а для ячеек их желаемую ширину в процентах.
Теперь рассмотрим проблемные зоны такого шаблона. Главное — у нас все страницы сайта имеют один и тот же вывод. Для лендинга или «заглушки» сайта это не проблема, но тогда нужно отказаться от вывода рубрик, меток и вообще любых других ссылок. Поскольку Block_pages
изначально «заточен» под вывод ссылок (иначе это бессмысленно), то избавиться от них будет сложно. Хотя можно вместо [title]
использовать [val@page_title]
— это «сырые» данные страницы. Получится так:
... 'line1' => '<h1 class="mar30-t">[val@page_title]</h1>[date]', ...
Чтобы все адреса шли на главную, можно добавить автоматический редирект:
// 302 — это временный редирект на главную if (mso_current_url()) mso_redirect('', false, 302);
Отдельный момент по выводу миниатюры записи. Их форматирование определяется такими параметрами:
'thumb' => true, // использовать миниатюры 'thumb_width' => 320, // ширина 'thumb_height' => 180, // высота 'thumb_class' => 'thumb left', // css-класс картинки 'thumb_link_class' => '', // css-класс ссылки 'thumb_link' => true, // формировать ссылку на запись 'thumb_add_start' => '', // произвольная добавка перед img 'thumb_add_end' => '', // произвольная добавка после img 'thumb_type_resize' => 'resize_full_crop_center', // тип создания миниатюры
Прeимуществом использования «стандартного» поля изображения записи в том, что миниатюра будет сформирована автоматически и сохранена как отдельный файл. То есть достаточно только подобрать желаемый размер и прописать нужные css-классы.
Также нужно поменять TITLE в секции HEAD на название сайта. Мы его можем взять из настроек.
В заключении приведу полный код итогового index.php
:
<?php if (!defined('BASEPATH')) exit('No direct script access allowed'); // 302 — это временный редирект на главную if (mso_current_url()) mso_redirect('', false, 302); $b = new Block_pages([ 'limit' => 4, // кол-во записей //'page_id' => 60, // можно указать номера записей для вывода //'cat_id' => '3, 6', // ограничить рубриками 'cut' => false ]); ?> <!DOCTYPE HTML> <html lang="ru"> <head> <meta charset="UTF-8"> <title><?= getinfo('site_title') ?></title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/maxsite/berry/dist/berry.css"> </head> <body> <div class="layout-center-wrap"> <div class="layout-wrap"> <?php $b->output([ 'line1' => '<h1 class="mar10-t">[val@page_title]</h1>[date]', 'line2' => '[thumb]', 'line3' => '', 'title_start' => '<h1 class="mar30-t">', 'title_end' => '</h1>', 'date' => 'D, j F Y г. в H:i', 'date_start' => '<div class="t90 mar10-tb"><time datetime="[page_date_publish_iso]">', 'date_end' => '</time></div>', 'block_start' => '<div class="flex flex-wrap">', 'block_end' => '</div>', 'page_start' => '<div class="w48 pad20 bg-gray50 mar30-t">', 'page_end' => '</div>', ]); ?> </div> </div> </body> </html>
Понятно, что такой шаблон — «одностраничник», но согласитесь он получился достаточно простым и всего из одного файла. MaxSite CMS взяла на себя получение данных и организацию их вывода. Мы даже не использовали цикл вывода, как это пришлось бы делать в любой другой системе. :-)
Здравствуйте, почему то в шаблоне Default картинка в записях маленькая и без обтекания текстом, кое как удалось растянуть на всю ширину, но картинка почти без отступа от первого предложения записи, где исправлять это (чтобы отступ был)?
В настройках шаблона в поле CSS-класс изображения для записи укажите классы left или right для выравнивания и mar10 и т.п. для отступов.