Кат в Эгее

Эгея не имеет функции скрытия длинных постов под катом, в этой статье Илья Бирман объясняет почему. Однако кат в Эгее можно сделать с использованием скрипта 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 ('style') ?>

После:

<?php _CSS ('main') ?>

А после основных скриптов шаблона —

<?php _JS ('main') ?>

— подключим сам скрипт readmore.js и файл скрипта с его настройками:

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

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