Простой шаблон в MaxSite CMS

30-01-2022Время чтения ~ 7 мин.Шаблон MF для MaxSite CMS 1352

В 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/css/themes/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 взяла на себя получение данных и организацию их вывода. Мы даже не использовали цикл вывода, как это пришлось бы делать в любой другой системе. :-)

Простой шаблон в MaxSite CMS

Проекты

Ссылки