Запись 63

Пишем свой шаблон для Эгеи

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

<?php return array (
    'display_name' => array (
        'en' => 'Ghost',
        'ru' => 'Призрак',
    ),
); ?>

Называем свою тему для русской и английской версии для отображения в настройках сайта.

Структура папок

../themes/ghost/images — Папка с изображениями темы.

../themes/ghost/js — Папка со скриптами.

../themes/ghost/styles — Папка со стилями.

../themes/ghost/templates — Файлы шаблона.

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

Шаблоны

Теперь стоит подробнее разобрать содержимое папки ../system/theme/templates стандартного шаблона Эгеи. Чтобы понять как выглядит тот или иной элемент шаблона я добавила скриншоты.


author-menu.tmpl.php — Меню автора.


comments-heading.tmpl.php — Заголовок списка комментариев с счетчиком их количества.


comments.tmpl.php — Список комментариев.


drafts.tmpl.php — Список черновиков.


form-comment.tmpl.php — Форма комментирования.


form-database.tmpl.php — Форма подключения к базе данных.


form-install.tmpl.php — Форма установки Эгеи.


form-login.tmpl.php — Форма авторизации.


form-note-delete.tmpl.php — Форма удаления поста.


form-note-publish.tmpl.php — Кнопка публикации поста.


form-note.tmpl.php — Форма публикации поста.


form-password.tmpl.php — Форма смены админ-пароля.


form-preferences.tmpl.php — Форма общих настроек блога.


form-tag-delete.tmpl.php — Форма удаления тега.


form-tag.tmpl.php — Форма редактирования тега.


head.tmpl.php — Метатеги в head.


heading.tmpl.php — Заголовки.


init-script.tmpl.php — Подключение дополнительных скриптов.


layout.tmpl.php — Основная разметка шаблона внтури body.


login-element.tmpl.php — Кнопка авторизации.


main.tmpl.php — Общая разметка, подключение скриптов.


notes-list.tmpl.php — Список избранных постов.


notes.tmpl.php — Шаблон поста. Заголовок, текст, дата, теги, ссылка на комментарии.


pages-earlier.tmpl.php — Кнопка к постам «Ранее».


pages-later.tmpl.php — Кнопка к постам «Позднее».


pages.tmpl.php — Навигация между постами.


popular.tmpl.php — Блок популярных постов.


search.tmpl.php — Форма поиска и теги.


tags-menu.tmpl.php — Список избранных тегов.


tags.tmpl.php — Страница тегов.


user-blockture.tmpl.php — Аватар блога.


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

Подключение частей шаблона

Официальная документация по шаблонам Эгеи сообщает:

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

Давайте разберем это на примере — добавим блок со случайной цитатой. Создадим файл quote.tmpl.php в ../themes/ghost/templates со следующим несложным кодом:

<div class="e2-quote">
    <?php
        $quotes[] = '
        <p>Ибо здесь, похоже, мы не найдем ничего, кроме, как сказала бы Мильва, ремонтизма.</p>
        <span>Анджей Сапковский - Владычица Озера</span>';
        $quotes[] = '
        <p>Цири громко чертыхнулась, повторив любимое выражение Весемира, значение которого было ей не вполне ясно. Потом добавила еще несколько слов, услышанных от Ярпена Зигрина, значение которых было для нее вообще полнейшей загадкой.</p>
        <span>Анджей Сапковский - Кровь Эльфов</span>';
        $quotes[] = '
        <p>Весемир кивал, время от времени вставляя замечания, из которых следовало только то, что «в его времена» все было лучше, логичнее, приличнее и здоровее.</p>
        <span>Анджей Сапковский - Последнее Желание</span>';

        srand ((double) microtime() * 1000000);
        $random_number = rand(0,count($quotes)-1);
        echo ($quotes[$random_number]);
    ?>
</div>

Теперь достаточно открыть layout.tmpl.php и где-нибудь перед footer’ом добавить вывод шаблона quote.tmpl.php средством специального макроса.

<?php _T ('quote') ?>

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

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

Таким несложным способом вы можете добавлять новые блоки на страницы своего блога. По такому же принципу строятся все остальные страницы шаблона. Например если мы посмотрим стандартный layout.tmpl.php с 47 по 59 строку, то увидим как подхватываются почти все основные шаблоны сайта.

Подключение собственных JS и CSS

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

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

Здесь подхватываются ../js/main.js и ../styles/main.css из папки вашего шаблона. Для примера, давайте добавим анимацию появления постов с помощью wow.js. Скачайте сам wow.js и положите в папку js вашего шаблона. Также скачайте animate.css и разместите в папке styles. Откройте main.tmpl.php и подключите их:

<?php _CSS ('animate') ?>
<?php _JS ('wow') ?>

Далее в файл init-script.tmpl.php понадобится добавить следующий код с настройками wow.js:

<script type="text/javascript">
    var wow = new WOW(
        {
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: true,
            live: true,
            callback: function(box) {
            },
            scrollContainer: null
        }
    );
    wow.init();
</script>

Теперь остается открыть шаблон notes.tmpl.php и к основному div’у поста (18 строка) добавить класс wow fadeIn, а в main.css добавить .wow { visibility: hidden; }. По аналогии с данным примером в ваш шаблон можно добавлять какие угодно скрипты и стили.

Смотрите ещё: Кат в Эгее, Свои шрифты в Эгее и Сноски на полях в Эгее.