Свой шрифт в Эгее

Чтобы добавить шрифт в Эгею, есть два способа — это добавление его в стандартный шаблон или создание своего собственного. Создание своего шаблона удобнее, поскольку гарантирует, что изменения не будут потеряны при обновлении или переустановке Эгеи. Но это не точно.

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

1. Откройте папку system\themes\plain.
2. Скопируйте эту папку в user\themes. Если папка themes отсутствует в user, создайте ее. Если Эгея младше версии 11.2, папка themes находится в корневой папке сайта.
3. Переименуйте скопированную папку на свое усмотрение, например, в custom.
4. Откройте файл theme-info.php в папке custom любым редактором кода.
5. В файле theme-info.php найдите строку index и укажите порядковый номер шаблона, который используется в списке шаблонов Эгеи. В строке 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,

); ?>

Теперь можно подключить шрифт, например, Tilda Sans VF.

1. Создайте папку fonts в папке шаблона.
2. В папке fonts создайте папку tildasans.
3. Скопируйте файлы шрифта TildaSans-VF.ttf, TildaSans-VF.woff и TildaSans-VF.woff2 в папку tildasans.
4. Создайте файл overrides.css в папке styles вашего шаблона.
5. Отредактируйте файл overrides.css:

/* Подключаем шрифты. */

@font-face {
  font-family: 'TildaSans';
  src: url('../fonts/tildasans/TildaSans-VF.ttf') format('truetype');
  src: url('../fonts/tildasans/TildaSans-VF.woff') format('woff2'),
       url('../fonts/tildasans/TildaSans-VF.woff2') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root {
  /* Глобальный шрифт сайта. */
  --mainFontFamily: 'TildaSans', system-ui, -apple-system, BlinkMacSystemFont, "SF UI Text", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

  /* Шрифт статей. */
  --noteMainFontFamily: inherit;

  /* Шрифт подписей у изображений, тегов и прочих мелких элементов. */
  --smallFontFamily: inherit;
}

Здесь мы подключаем шрифт и переопределяем глобальные параметры в root. По аналогии можно подключить любой другой шрифт.

Дополнительно можно отредактировать размеры шрифтов.

:root {
  /* Заголовок в шапке сайта. */
  --blogTitleFontSize: 20px;
  --blogTitleLineHeight: 26px;

  /* Заголовки перебивок. */
  --subHeadingFontSize: 26px;
  --subHeadingLineHeight: 30px;

  /* Заголовки страниц.  */
  /* Например, заголовок */
  /* на странице тега.   */
  --pageHeadingFontSize: 36px;
  --pageHeadingLineHeight: 40px;

  /* Заголовки статей. */
  --noteTitleFontSize: 36px;
  --noteTitleLineHeight: 42px;

  /* Текст класса .lead */
  --noteLeadFontSize: 26px;
  --noteLeadLineHeight: 30px;

  /* Текст статей. */
  --noteTextFontSize: 20px;
  --noteTextLineHeight: 28px;

  /* Подписи изображений, теги */
  /* и прочие мелкие элементы. */
  --smallFontSize: 12px;
  --smallLineHeight: 16px;

  /* Текст кнопок. */
  --bigButtonFontSize: 20px;
  --bigButtonLineHeight: 28px;
}

Перенесла блог на Datenstrom Yellow

В очередной раз мой блог сменил движок, на этот раз с Эгеи на Datenstrom Yellow. Причина переезда довольна проста — я устала переписывать свой кастомный шаблон после очередного обновления Эгеи. С каждым обновлением в ней меняется внутренняя структура, добавляются и удаляются стили, исчезают и перебираются в платную версию фичи, меняются папки и права доступа. Короче говоря, все внесённые в шаблон Эгеи изменения просто перестают работать.

Datenstrom Yellow — статический генератор сайтов с открытым исходным кодом от Шведских разработчиков. Представляет собой php файл ядра со своим API, а всё остальное — расширения к нему. Эта заметка лежит в папке content корневого каталога, а не в базе данных mysql. Но, в отличие от того же Jekyll (когда-то блог был и на нём) где нужно генерировать статический html, чтобы посмотреть написанный пост, здесь заметка в формате markdown отображается средствами php, а редактируется и создаётся не только из папки с контентом, но и непосредственного с сайта. Достаточно дописать секретную букву в адрес страницы и авторизоваться.

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

Устойчивость к обновлениям

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

Жёлтый: После обновления движку всё равно, что там в вёрстке, а значит ничего не слетит. Простейшие переменные вывода контента (getTitle, getContent и так далее) позволяют сверстать страницу как угодно.

Масштабируемость

Эгея: Обфусцированный исходный код. Как таковой поддержки или документации по плагинам нет.

Жёлтый: Открытый исходный код. Документация по API. Легко написать свой плагин или найти среди плагинов сообщества. Любой из них можно кастомизировать под себя. Но гораздо меньше возможностей «из коробки» в сравнении с Эгеей.

Редактор

Эгея: Свой язык разметки в редакторе, если хочется чего-то большего, чем жирный шрифт или курсив, придётся писать html тегами. Например, обернуть блок кода в заметке можно только html тегом code. Из положительных особенностей — есть автосохранение постов, теги в форме ввода тегов редактор подхватывает сам и показывает те, что уже есть. После удаления ненужного изображения из поста, оно удалиться из файлов сайта автоматически.

Жёлтый: Редактор markdown. Много где применяется, а потому универсален. На нём удобно писать статьи, вставлять блоки кода, оборачивать в классы. Без всяких html тегов в тексте (но можно и с html при необходимости). Изображения в Yellow встраиваются собственным тегом, их можно загружать перетаскиванием в редактор. Однако, если изображение в посте нигде не используются, Yellow не удалит его из файлов сайта сам — только чистить папку media вручную. Поиск по существующим тегам в редакторе тоже отсутствует.

Оптимизация

Эгея: Работает на php+mysql, что несколько медленнее, чем статика. Эгея только с одиннадцатой версии стала поддерживать webp. После понижения тарифа хостинга страницы и картинки стали загружаться довольно медленно.

Жёлтый: Работает только на php, а значит никаких обращений к базе данных. С помощью плагина автоматически конвертирует изображения в webp, что довольно удобно.

Комментарии

Эгея: Хорошая система комментариев с авторизацией через соц. сети, автоматически подтягивает аватарку и ссылку на автора комментария. Читатели могут подписываться на новые комментарии. Красиво и не нужны сторонние решения.

Жёлтый: Единственный плагин комментариев для Yellow напоминает wordperss (Только работает не с mysql) — нет авторизации, лишь email и имя, аватарка подтягивается с gravatar. Поэтому в качестве комментариев подключила comments.app от telegram. Удобно, что оповещения о новых комментариях приходят сразу в телерам, но не удобно, что это сторонний виджет.

Это не полный список особенностей обоих движков, я перечислила только те, с которыми в основном сталкивалась и которые были важны в обоих движках. Разумеется в платной версии Эгеи куда больше возможностей — например симпатичные перебивки между постами, которые я (на данный момент) не могу реализовать в Жёлтом. Но я не хочу оплачивать ежегодную подписку Эгеи, так как не сильно часто пишу в блог, да и в целом не сильно разделяю переход на платные рельсы — с появлением платных функций в ней исчезают бесплатные (в 2.10 исчез блок популярных постов, в одиннадцатой исчезло меню закреплённых тегов, например).

Пока верстала блог на Yellow пришлось дописывать к нему плагины, ведь в Жёлтом нет типогрофа, фоторамы и прочих мелочей, которые изначально есть в Эгее. Даже ссылки автоматически не генерировались в транслит, а оставались на кириллице. Возможно позже выложу наработки на github и напишу о них в руководства.

В целом Эгея куда удобнее для простого ведения блога «из коробки», в ней есть типограф, комментарии с авторизацией через соц. сети, фоторама, автосохранение черновиков, готовые темы оформления и прочие фишки, которых в платной версии Эгеи ещё больше. Но для безболезненной кастомизации, обновлений движка и возможности масштабирования сайта в будущем, на данный момент мне больше подходит Yellow. Плюс я всегда хотела разделить статьи-руководства и личный блог друг от друга. Ну и статика с удобным markdown редактором поспособствовала переезду, конечно же.

Волнистые подчёркивания в Эгее

Красные волнистые подчёркивания в тексте, как в блоге у Максима Ильяхова, для Эгеи можно сделать небольшим css кодом.

Откройте папку с текущим шаблоном, например plain. В Эгее, версии одиннадцать и выше, он находится по пути:

../system/themes/plain

Для версий ниже одиннадцатой:

../themes/plain

Теперь откройте папку styles и создайте в ней файл overrides.css, добавьте в него стили.

.e2-text .line-red {
    color: rgb(218, 87, 15);
    font-style: normal;
    background: url("./images/line-red.svg") 0 100% repeat-x;
    border-radius: .2em;
    padding-bottom: 2px;
    margin: unset;
}

.e2-text .line-green {
    color: rgb(12, 145, 30);
    font-style: normal;
    background: url("./images/line-green.svg") 0 100% repeat-x;
    border-radius: .2em;
    padding-bottom: 2px;
    margin: unset;
}

Далее, нужно скачать svg для подчёркиваний, зелёного и красного, создать папку images в папке styles и положить туда оба svg изображения.

../themes/plain/styles/images

Всё, теперь в редакторе можно применять стили подчёркивания к тексту — span с классом line-red для красного и line-green для зелёного.

Зло – <span class="line-red">это зло</span>, Стрегобор, – серьезно сказал ведьмак, вставая. – Меньшее, большее, среднее – <span class="line-green">все едино</span>, пропорции условны, а границы размыты.

Полноценный кат в Эгее

В блоговом движке Эгея нет ката — скрытия содержимого длинных постов за кнопкой «Далее». Автор движка, Илья Бирман, считает что кат в Эгее не нужен. Однако, некоторые авторы блогов всё же хотели бы иметь возможность скрывать посты под катом, о чём уже не раз упоминалось в обсуждениях Эгеи.

Для превью будет браться первая картинка из поста, либо первая картинка добавленная, но не вставленная, непосредственно, в пост. Абзац с кратким описанием берётся из поля Краткое описание «Для поисковых систем, соцсетей и агрегаторов», в настройках url у каждого поста.

Кастомный шаблон

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

В папке themes, что в корне Эгеи, скопируйте папку со стандартной темой plain (Либо любой другой стандартной темой Эгеи) и переименуйте скопированную папку шаблона, например, в spoiler. В папке spoiler отредактируйте конфигурационный файл theme-info.php.

<?php return array (
    'index' => 99, // Порядковый номер шаблона

    'display_name' => array (
        'en' => 'Spoiler', // Название шаблона на английском
        'ru' => 'Спойлер', // Название шаблона на русском
    ),

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

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

Здесь, в строке index, укажите порядковый номер шаблона, а в display_name задайте имя на русском и английском, для его отображения в списке шаблонов, в настройках Эгеи.

После, скопируйте стандартный файл note.tmpl.php который отвечает за вывод постов в Эгее:

../system/theme/templates/note.tmpl.php

В папку templates шаблона spoiler.

../themes/spoiler/templates/note.tmpl.php

Кат для избранных постов

Этот тип ката будет работать только в тех постах, которые были отмечены как избранные . Не избранные посты будут отображаться как обычно.

Откройте скопированный файл note.tmpl.php в папке templates — и найдите в нём строку 140 (Номер строки может отличиться от версии к версии Эгеи), а именно комментарий <php // TEXT // ?>.

<?php // TEXT // ?>

<?php if (array_key_exists ('text', $note) and $note['text'] != '') { ?>
<div class="e2-note-text e2-text">
<?= $note['text'] ?>
</div>
<?php } ?>

Редактируем эту часть кода — добавляем проверку является ли пост избранным, выводим изображение для превью, выводим абзац с кратким описанием поста и кнопку «Далее» со ссылкой на полный пост. Если пост не является избранным выводим стандартное содержимое.

Достаточно скопировать этот блок кода и заменить им стандартный.

<?php // TEXT // ?>

<?php // Если пост избранный // ?>
<?php if ($note['favourite?'] and $content['class'] !== 'note') { ?>
    <div class="e2-note-text e2-text">
        <?php // Старт отображения превью // ?>
        <?php if ($note['og-images']) { ?>
            <?php $i = 0; ?>
            <?php foreach ($note['og-images'] as $image): ?>
                <?php if($i++ == 0) { ?>
                    <div class="e2-text-thumbnail">
                        <div class="e2-note-thumbnail-wrapper">
                            <a href="<?= $note['href'] ?>">
                                <img src="<?= $image ?>"/>
                            </a>
                        </div>
                    </div>
                <?php } ?>
            <?php endforeach ?>
        <?php } ?>
        <?php // Конец отображения превью // ?>

        <?php // Старт отображения сокращенного текста // ?>
        <?php if (array_key_exists ('snippet-text', $note) and $note['snippet-text'] != '') { ?>
            <p><?= $note['snippet-text'] ?></p>
        <?php } ?>
        <?php // Конец отображения сокращенного текста // ?>

        <?php // Старт вывода ссылки // ?>
        <p class="e2-text-readmore"><a href="<?= $note['href'] ?>"><?= _S ('nm--read-next') ?> &rarr;</a></p>
        <?php // Конец вывода ссылки // ?>
    </div>

<?php // Если пост не избранный // ?>
<?php } else { ?>
    <?php if (array_key_exists ('text', $note) and $note['text'] != '') { ?>
        <div class="e2-note-text e2-text">
            <?= $note['text'] ?>
        </div>
    <?php } ?>
<?php } ?>

При желании здесь можно поменять местами изображение превью, текст описания поста, ссылку на полную запись. Для понимания эти части я отметила комменатриями.

Кат для всех постов

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

<?php if ($note['favourite?'] and $content['class'] !== 'note') { ?>

Убрав проверку является ли пост избранным.

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

Стили превью

В папке styles, шаблона spoiler, создайте файл overrides.css и добавьте стили отображения превью. Если нужно, отредактируйте внешний вид по желанию.

/* Thumbnail */

.e2-text-thumbnail {
    margin-bottom: 1.25rem;
    margin-top: 1.25rem;
}
.e2-text-thumbnail .e2-note-thumbnail-wrapper {
    position: relative;
    overflow: hidden;
}
.e2-text-thumbnail .e2-note-thumbnail-wrapper a {
    display: inline-block;

    border: 1px solid var(--linkUnderlineColor);
}
.e2-text-thumbnail .e2-note-thumbnail-wrapper a.hover,
.e2-text-thumbnail .e2-note-thumbnail-wrapper a:hover {
    border-color: var(--hoverColor)
}
.e2-text-thumbnail .e2-note-thumbnail-wrapper img {
    display: block;

    max-width: 100%;
}

Вид ссылки «Далее» можно изменить добавив стили к классу .e2-text-readmore и .e2-text-readmore a. В целом, в файл overrides.css можно добавлять любые другие изменения стилей вашего шаблона.

Готово. Работает автоматически, подтягивает первую картинку и описание из поля Краткое описание поста. Пример шаблона spoiler из этой заметки, с катом для избранных постов, добавила для вас на GitHub. Можно скачать, поставить и пользоваться (Актуально для версии Эгеи 2.10, сборка 3860). Либо сделать всё самостоятельно.

Как сделать заметки на полях в Эгее

Заметки на полях, или же маргиналии, добавить в Эгею можно небольшим CSS кодом.

@media screen and (min-width: 1050px) {
    .e2-text .aside {
        position: relative;
        text-align: left;
        max-width: 200px;
        margin-left: 4%;
        margin-top: .15em;
        float: right;
        clear: right;
    }
}
.e2-text .aside {
    line-height: 1.4;
    font-size: 0.875em;
    color: #4A4A4A;
}

Этот CSS можно добавить в конец файла ./styles/main.css, который находится в папке с вашей темой Эгеи. Но лучше создать свой файл стилей в папке styles, назвав его, например custom.css и подключить его к теме.

Для этого скопируйте из ./system/theme/templates файл main.tmpl.php в папку templates вашей темы (Если папки нет, создайте её) и добавьте в конец этого файла, после <?php _CSS ('main') ?> макрос:

<?php _CSS ('custom') ?>

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

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

.aside Текст заметки на полях.

Этот тег добавит заметку справа от следующего за ним абзаца.

Кат в Эгее

Эгея не имеет функции скрытия длинных постов под катом, в этой статье Илья Бирман объясняет почему. Однако кат в Эгее можно сделать с использованием скрипта readmore.js. Особенность readmore.js в том, что раскрывать длинные записи для чтения можно без перезагрузки страницы и новых вкладок в браузере.

Скачайте скрипт readmore. js с GitHub и поместите файл readmore.min.js в папку js, которую нужно создать в корне вашего шаблона Эгеи, например в корне стандартного шаблона plain:

../themes/plain/js/readmore.min.js

После, создадим файл template.js в папке js шаблона plain, в нём будем настраивать сам скрипт. Добавим в созданный файл настройки, полный список которых можно посмотреть на странице скрипта readmore.js на GitHub.

$('.e2-note-short').readmore({
    speed: 75, // Скорость раскрытия ката
    collapsedHeight: 1250, // Длинна заметки после которой будет добавлен кат
    moreLink: '<div class="more"><a class="morelink" href="#">Показать полностью</a></div>', // Классы кнопки раскрытия ката
    lessLink: '' // Классы кнопки скрытия ката
});

Теперь нужно добавить класс .e2-note-short, благодаря которому будет добавляться кат к вашим записям, для этого нужно скопировать файл из:

../system/theme/templates/notes.tmpl.php

И поместить в папку templates шаблона:

../themes/plain/templates/notes.tmpl.php

Откроем скопированный notes.tmpl.php, где добавим к тегу article класс e2-note-short обернув его php параметром, чтобы кат не работал на отдельной странице с записью, а только в ленте постов на главной.

<article class="<?php if ($content['class'] != 'note') { ?>e2-note-short<?php } ?>">

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

../themes/plain/styles/style.css

Добавим стили ката, при желании их можно отредактировать на свое усмотрение.

.more {
    position: relative;
}
.more::before {
    content: "";
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 80%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 40%,rgba(255,255,255,1) 80%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 40%,rgba(255,255,255,1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); 
    pointer-events: none;
    position: absolute;
    display: block;
    height: 150px;
    width: 100%;
    top: -150px;
    left: 0;
}
a.morelink {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #f1f3f4;
    text-align: center;
    max-width: 720px;
    color: #8890a7;
    font-size: 14px;
    display: block;
    width: 100%;
    margin-bottom: 1em;
    border-bottom: 0;
    padding: 10px;
}
a.morelink:hover {
    background: #e2e5e6;
    color: #8890a7;
}

Теперь необходимо подключить все созданные файлы непосредственно в шаблон, для этого копируем main.tmpl.php из основных файлов Эгеи:

../system/theme/templates/main.tmpl.php

В папку templates шаблона:

../themes/plain/templates/main.tmpl.php

Отредактируем main.tmpl.php добавив стили после основных стилей <?php _CSS ('main') ?> в конце файла.

<?php _CSS ('style') ?>

А после основных скриптов шаблона, <?php _JS ('main') ?>, подключим сам скрипт readmore.js и файл скрипта с его настройками.

<?php _JS ('readmore.min') ?>
<?php _JS ('template') ?>

Всё, кат добавлен в Эгею. Возможно где-то придется отредактировать стили по ситуации, подобрать оптимальную длину заметки после которой кат будет скрывать запись, и тому подобное. Стандартный шаблон plain здесь используется в качестве примера, намного лучше сделать его копию и переименовать, дабы при последующих обновлениях Эгеи ничего лишнего не перезаписалось.

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

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

Пользовательские темы находятся в папке ./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.

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

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

Подключить свою собственную часть шаблона можно создав файл типа name.tmpl.php в папке templates и затем вызвать его в любом другом месте или в layout.tmpl.php. Например, можно создать файл menu.tmpl.php со своим меню и ссылками на соц-сети, сверстанными на html и css, и вызвать его в layout.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') ?>

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