Главная Блог Linux Стримы Веб

Шаблон

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

Создание своего шаблона

  1. Откройте папку system\themes\plain.

  2. Скопируйте эту папку в user\themes. Если папка themes отсутствует в user, создайте ее.

  3. Переименуйте скопированную папку на свое усмотрение, например, в custom.

  4. Откройте файл theme-info.php в папке custom любым редактором кода.

  5. В файле theme-info.php найдите строку index и укажите любой порядковый номер шаблона, например 99. В строке display_name укажите имя шаблона на русском и английском.

<?php return array (

  'index' => 99,

  'display_name' => array (
    'en' => 'Custom',
    'ru' => 'Кастом',
  ),

  'colors' => array (
    'background' => '#fff',
    'headings' => '#000',
    'text' => '#000',
    'link' => '#0060a0',
  ),

  'meta_viewport' => 'width=device-width, initial-scale=1',
  'supports_dark_mode' => true,

); ?>

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

user\themes\custom\images

Изображения

user\themes\custom\js

JS скрипты

user\themes\custom\src

Исходные sass файлы стилей

user\themes\custom\styles

CSS стили

user\themes\custom\templates

PHP файлы шаблона

Если файлов в папках нет, они будут подхватываться из стандартной темы Эгеи, которая находится по пути system\themes.

Стили

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

Файл overrides.css работает не только в пользовательских, но и в стандартных шаблонах. Дополнительно ничего подключать не нужно, Эгея подхватывает этот css файл автоматически.

Разбор основных шаблонов

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

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

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') ?>

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

Last updated