Александра Травкина

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

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

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

· · ·

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

Техническое примечание: Здесь используются те же изображения, которые попадают в meta-тег og:image и тот же текст, который в Эгее выводится в meta-тег description у постов в head.

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

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

В папке 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). Либо сделать всё самостоятельно.

Скачать с GitHub

Это всего лишь пример шаблона с реализацией описанного в посте гайда, актуален для версии Эгеи 2.10 3860, обновлять до следующих версий я его не буду.

Подписаться на блог
Отправить
Поделиться
3 комментария
Ярослав Шкрабалюк 2 мес

Больше таких заметок 👍

Доброй ночи, Вьетнам! 2 мес

Спасибо.

Артем Кобзев 6 дн

А про потрясающее боковое плавающее меню есть статья?

Александра Травкина 6 дн

Нет, пока нет такой статьи. Возможно позже.

Rose debug info
---------------