Чтобы добавить шрифт в Эгею, есть два способа — это добавление его в стандартный шаблон или создание своего собственного. Создание своего шаблона удобнее, поскольку гарантирует, что изменения не будут потеряны при обновлении или переустановке Эгеи. Но это не точно.
Если не хочется заморачиваться с созданием своего шаблона, можно сразу перейти к подключению шрифта в один из стандартных или в свой собственный шаблон, если он был создан ранее. Для создания своего шаблона в версии 11.2 Эгеи:
Откройте папку system\themes\plain.
Скопируйте эту папку в user\themes. Если папка themes отсутствует в user, создайте ее. Если Эгея младше версии 11.2, папка themes находится в корневой папке сайта.
Переименуйте скопированную папку на свое усмотрение, например, в custom.
Откройте файл theme-info.php в папке custom любым редактором кода.
В файле theme-info.php найдите строку index и укажите порядковый номер шаблона, который используется в списке шаблонов Эгеи. В строке display_name укажите имя шаблона на русском и английском.
Здесь мы подключаем шрифт и переопределяем глобальные параметры в root. По аналогии можно подключить любой другой шрифт.
Помните, что в overrides.css можно добавлять любые ваши стили. Эгея подхватит этот файл из папки styles автоматически, в любом шаблоне — пользовательском или стандартном.
Если кастомный шрифт так и не работает, скопируйте файл .htaccess из папки styles шаблона и положите его в папку fonts.
Дополнительно можно отредактировать размеры шрифтов.
: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 — статический генератор сайтов с открытым исходным кодом от Шведских разработчиков. Представляет собой 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
Будьте внимательны — после обновления Эгеи на одиннадцатую версию, папка themes в корне блога больше не работает. Теперь стандартные темы находятся в папке system → themes, а пользовательские в user → themes. После обновления на одиннадцатую версию Эгеи папку themes в корне сайта можно удалить. Не забудьте сохранить свои темы и перенести их в user → themes, если они есть.
Теперь откройте папку styles и создайте в ней файл overrides.css, добавьте в него стили.
В блоговом движке Эгея нет ката — скрытия содержимого длинных постов за кнопкой «Далее». Автор движка, Илья Бирман, считает что кат в Эгее не нужен. Однако, некоторые авторы блогов всё же хотели бы иметь возможность скрывать посты под катом, о чём уже не раз упоминалось в обсуждениях Эгеи.
Для превью будет браться первая картинка из поста, либо первая картинка добавленная, но не вставленная, непосредственно, в пост. Абзац с кратким описанием берётся из поля Краткое описание «Для поисковых систем, соцсетей и агрегаторов», в настройках url у каждого поста.
Примечание: Здесь используются те же изображения, которые попадают в meta-тег og:image и тот же текст, который в Эгее выводится в meta-тег description у постов в head.
Кастомный шаблон
Создайте свой шаблон для Эгеи. Это необязательно, но так будет лучше при последующих обновлениях движка, иначе при перезаписи стандартных файлов ваши правки потеряются.
В папке themes, что в корне Эгеи, скопируйте папку со стандартной темой plain (Либо любой другой стандартной темой Эгеи) и переименуйте скопированную папку шаблона, например, в spoiler. В папке spoiler отредактируйте конфигурационный файл theme-info.php.
<?phpreturnarray (
'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 // ?>.
Редактируем эту часть кода — добавляем проверку является ли пост избранным, выводим изображение для превью, выводим абзац с кратким описанием поста и кнопку «Далее» со ссылкой на полный пост. Если пост не является избранным выводим стандартное содержимое.
Достаточно скопировать этот блок кода и заменить им стандартный.
При желании здесь можно поменять местами изображение превью, текст описания поста, ссылку на полную запись. Для понимания эти части я отметила комменатриями.
Кат для всех постов
Если нужно чтобы все посты на главной странице блога прятались под катом, достаточно в том же самом коде, который редактировали выше, изменить строку:
<?phpif ($note['favourite?'] and $content['class'] !== 'note') { ?>
Убрав проверку является ли пост избранным.
<?phpif ($content['class'] !== 'note') { ?>
Стили превью
В папке styles, шаблона spoiler, создайте файл overrides.css и добавьте стили отображения превью. Если нужно, отредактируйте внешний вид по желанию.
Вид ссылки «Далее» можно изменить добавив стили к классу .e2-text-readmore и .e2-text-readmore a. В целом, в файл overrides.css можно добавлять любые другие изменения стилей вашего шаблона.
Готово. Работает автоматически, подтягивает первую картинку и описание из поля Краткое описание поста. Пример шаблона spoiler из этой заметки, с катом для избранных постов, добавила для вас на GitHub. Можно скачать, поставить и пользоваться (Актуально для версии Эгеи 2.10, сборка 3860). Либо сделать всё самостоятельно.
Этот 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
Добавим стили ката, при желании их можно отредактировать на свое усмотрение.
Всё, кат добавлен в Эгею. Возможно где-то придется отредактировать стили по ситуации, подобрать оптимальную длину заметки после которой кат будет скрывать запись, и тому подобное. Стандартный шаблон plain здесь используется в качестве примера, намного лучше сделать его копию и переименовать, дабы при последующих обновлениях Эгеи ничего лишнего не перезаписалось.
Создать свой шаблон для Эгеи не так сложно как может показаться на первый взгляд. Давайте разберем основные принципы построения шаблона используя некоторые простые примеры.
Статья может быть устаревшей и не всё написанное в ней отражает действительность, так как Эгея периодически обновляется.
Пользовательские темы находятся в папке ./themes в корне блога. Создадим в этом каталоге папку и назовем её так, как хотим чтобы называлась наша будущая тема. Например сherry — ./themes/сherry. Информация о теме хранится в файле theme-info.php её корневой папки и содержит следующий код:
<?phpreturnarray (
/* Порядок темы в списке тем в админке */'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,
); ?>
В папке темы также существует несколько папок из которых Эгея подхватывает скрипты, стили, изображения и файлы разметки:
Если файлов в папках нет, они будут подхватываться из стандартной темы Эгеи, которая находится по пути ./system/theme, либо из темы указанной как базовая в конфигурационном файле theme-info.php.
Чтобы внести изменения в стандартные шаблоны Эгеи, скопируйте необходимый файл из ./system/theme/templates в папку templates вашей темы и уже там производите все изменения. Вносить правки в системной папке не стоит, так как после обновления движка все изменения исчезнут.
Теперь стоит подробнее разобрать содержимое папки templates, для наглядности того, как выглядит тот или иной элемент в живую, я добавила соответствующие файлам скриншоты.
user-picture.tmpl.php — Аватар блога.author-menu.tmpl.php — Меню автора.search-heading.tmpl.php — Форма поиска.notes.tmpl.php — Пост.pages.tmpl.php — Навигация между постами.comments-heading.tmpl.php — Заголовок списка комментариев с счетчиком их количества.comments.tmpl.php — Список комментариев.form-comment.tmpl.php — Форма комментария.form-comment-reply.tmpl.php — Форма ответа на комментарий.popular.tmpl.php — Блок популярных постов.pages-earlier.tmpl.php — Кнопка к постам «Ранее».pages-later.tmpl.php — Кнопка к постам «Позднее».notes-list.tmpl.php — Список всех постов блога.heading.tmpl.php — Заголовки на большинстве страниц.form-note.tmpl.php — Форма публикации поста.form-note-delete.tmpl.php — Форма удаления поста.form-note-publish.tmpl.php — Кнопка публикации поста.drafts.tmpl.php — Список черновиков.form-preferences.tmpl.php — Форма общих настроек блога.form-password.tmpl.php — Форма смены админ-пароля.form-database.tmpl.php — Форма подключения к базе данных.sessions.tmpl.php — Список текущих сессий.form-install.tmpl.php — Форма установки Эгеи.form-login.tmpl.php — Форма авторизации.tags.tmpl.php — Список всех тегов блога.form-tag.tmpl.php — Форма редактирования тега.form-tag-delete.tmpl.php — Форма удаления тега.tags-menu.tmpl.php — Меню избранных тегов.form-search.tmpl.php — Форма поиска на странице поиска.login-element.tmpl.php — Кнопка авторизации в футере.form-password-reset-email.tmpl.php — Страница сброса пароля.layout.tmpl.php — Основная разметка шаблона внутри body, здесь подключаются другие части шаблона.
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') ?>
К слову, если вам нужно вывести часть шаблона, скажем, только на главной странице, но не на странице поста, оберните код вывода следующим уточнением:
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') ?>
Таким образом можно редактировать отдельные части шаблона Эгеи при создании своей темы, подключать стили и скрипты. Также, для более полной информации, рекомендую ознакомиться с официальной документацией по темам оформления Эгеи.