Кат в Эгее

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

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

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

Затем создадим файл script.tmpl.php в папке templates шаблона, в нём мы будем подключать и настраивать сам скрипт.

../themes/plain/templates/script.tmpl.php

Добавим в созданный файл немного настроек, полный список которых можно посмотреть на странице скрипта на GitHub.

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

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

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

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

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

Затем откроем notes.tmpl.php где на 27 строке добавим к <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') ?>

Также перед закрывающимся тегом </html> добавим файл с настройками скрипта.

<?php _T ('script') ?>

Таким образом мы добавили кат в Эгею.

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

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