Как создать свой шаблон для Эгеи

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

Статья может быть устаревшей и не всё написанное в ней отражает действительность, так как Эгея периодически обновляется.

Пользовательские темы находятся в папке ./themes в корне блога. Создадим в этом каталоге папку и назовем её так, как хотим чтобы называлась наша будущая тема. Например сherry — ./themes/сherry. Информация о теме хранится в файле theme-info.php её корневой папки и содержит следующий код:

<?php return array (

  /* Порядок темы в списке тем в админке */
  'index' => 99,

  /* Отображаемое название темы для разных языков */
  'display_name' => array (
    'en' => 'Cherry',
    'ru' => 'Вишня',
    'uk' => 'Вишня',
  ),

  /* Параметры основных цветов */
  'colors' => array (
    'background' => '#faebd2',
    'headings' => '#000',
    'text' => '#000',
    'link' => '#3d6077',
  ),

  /* На какой теме основана текущая тема */
  'based_on' => 'plain',

  /* Параметры метатега viewport */
  'meta_viewport' => 'width=device-width, initial-scale=1',

  /* Поддержка тёмного режима */
  'supports_dark_mode' => false,

); ?>

В папке темы также существует несколько папок из которых Эгея подхватывает скрипты, стили, изображения и файлы разметки:

./themes/сherry/images — Изображения.
./themes/сherry/js — JS скрипты.
./themes/сherry/src — Исходные sass/less файлы стилей.
./themes/сherry/styles — CSS стили.
./themes/сherry/templates — PHP файлы шаблона.

Если файлов в папках нет, они будут подхватываться из стандартной темы Эгеи, которая находится по пути ./system/theme, либо из темы указанной как базовая в конфигурационном файле theme-info.php.

Чтобы внести изменения в стандартные шаблоны Эгеи, скопируйте необходимый файл из ./system/theme/templates в папку templates вашей темы и уже там производите все изменения. Вносить правки в системной папке не стоит, так как после обновления движка все изменения исчезнут.

Теперь стоит подробнее разобрать содержимое папки templates, для наглядности того, как выглядит тот или иной элемент в живую, я добавила соответствующие файлам скриншоты.

Как создать свой шаблон для Эгеи — `user-picture.tmpl.php` — Аватар блога.

main.tmpl.php — Разметка внутри html, здесь подключается head.tmpl.php содержащий метатеги, сам layout.tmpl.php, js и css.

Эти файлы можно копировать в папку templates своей темы и редактировать на свой вкус.

Подключить свою собственную часть шаблона можно создав файл типа name.tmpl.php в папке templates и затем вызвать его в любом другом месте или в layout.tmpl.php. Например, можно создать файл menu.tmpl.php со своим меню и ссылками на соц-сети, сверстанными на html и css, и вызвать его в layout.tmpl.php специальным макросом. Илья Бирман в справке к Эгее пишет:

Шаблон может вызывать другие шаблоны для отображения конкретного фрагмента: _T () — вызывает шаблон по имени. (…) Шаблон layout.tmpl.php «срабатывает» потому, что main.tmpl.php вызывает его для формирования тела страницы.

Так, чтобы вывести содержимое файла menu.tmpl.php где-нибудь на сайте, достаточно небольшого кода:

<?php _T ('menu') ?>

К слову, если вам нужно вывести часть шаблона, скажем, только на главной странице, но не на странице поста, оберните код вывода следующим уточнением:

<?php if ($content['class'] == 'frontpage') { ?>
    <?php _T ('menu') ?>
<?php } ?>

Или, если нужно вывести эту часть шаблона только на странице поста:

<?php if ($content['class'] == 'note') { ?>
   <?php _T ('menu') ?>
<?php } ?>

JS и CSS в тему Эгеи тоже подключаются специальными макросами. Для наглядности откройте стандартный main.tmpl.php и посмотрите в конец файла, после закрывающего тега body:

<?php _CSS ('main') ?>
<?php _JS ('main') ?>

Здесь подхватываются ./js/main.js и ./styles/main.css из папки темы, или из стандартной темы, если нет соответствующих файлов. По такому принципу можно добавить, например, скрипт bootstrap.min.js в папку js и подключить его кодом:

<?php _JS ('bootstrap.min') ?>

Таким образом можно редактировать отдельные части шаблона Эгеи при создании своей темы, подключать стили и скрипты. Также, для более полной информации, рекомендую ознакомиться с официальной документацией по темам оформления Эгеи.