Эгея Power-Ups
Решил опубликовать несколько своих доработок, которые добавляют в движок новые функции. Вы можете их свободно использовать в любых ваших целях.
Список улучшений
- Кнопка «подробнее» или кат внутри заметок
- Заметки на полях
- Хайлайты
- Мини галерея
Кнопка «подробнее» или кат
Когда пишешь статью и у тебя много исходников, удобно их скрыть под кат, чтобы они не увеличивали размер статьи не отвлекали от текста. Для этого добавил поддержку катов внутри заметок. Для этого нужно сделать 2 вещи:
- Пометить текст, который будет выступать в качестве кнопки: .cut-button Название кнопки.
- Следующим элементов разместить блок div с классом cut-content и в него поместить нужный контент для скрытия.
Как это выглядит в коде:
.cut-button Два лучших вопроса для собеседования
<div class="cut-content">
Как бы вы описали идеального кандидата на эту должность?
Как вы будете судить, хорош ли я в том, что потребуется от меня через 1-3 месяца?
</div>
Как это работает
Как бы вы описали идеального кандидата на эту должность?
Как вы будете судить, хорош ли я в том, что потребуется от меня через 1-3 месяца?
Стилизация в виде карточке
Если необходимо выделить какой-то блок текста в заметке можно использовать хайлайты. Для этого достаточно обернуть текст, который хотите выделить в div с классом highlight.
Как выглядит в коде:
<div class="highlight">
Как бы вы описали идеального кандидата на эту должность?
Как вы будете судить, хорош ли я в том, что потребуется от меня через 1-3 месяца?
</div>
Как работает
Как бы вы описали идеального кандидата на эту должность?
Как вы будете судить, хорош ли я в том, что потребуется от меня через 1-3 месяца?
Заметки на полях
Блог с реализацией заметок: http://mopsicus.ru.
Эту функциональность я подсмотрел в другом блоге и решил перенести в свой. Пригодится, когда нужно указать ссылку на ресурс по теме или просто примечание. Также добавил возможность указывать тип заметки. По умолчанию заметка не занимает отдельный абзац в тексте.
Как выглядит в коде:
.note Блог с реализацией заметок: ((http://mopsicus.ru/all/aegea-field-notes/ http://mopsicus.ru)).
.note-md Блог с реализацией заметок: ((http://mopsicus.ru/all/aegea-field-notes/ http://mopsicus.ru)).
Как выглядит на мобиле:


Мини галерея
Можно вывести несколько изображений в ряд. Пока что это реализовано тольк для 3 и 4 картинок. В будущем планирую добавить возможность открывать изображение на весь экран.
Как выглядит в коде:
<div class="card-gallery card-gallery-4">
<!-- Список ссылок на изображения -->
</div>
<div class="card-gallery card-gallery-3">
<!-- Список ссылок на изображения -->
</div>
Как выглядит на страницу







Где скачать?
Все исходники выложил на github. Там же вы найдете инструкцию по установке.
PS
Если у вас есть предложения, оставляйте их в комментариях, а лучше в issue на github-е. Как будет время, займусь реализацией предложений.