Устроил для блога ревизию — все длинные статьи спрятал под спойлер, ведь ката в Эгее нет в принципе, разработчик объяснил причину этого в своей статье.
Реализацию спойлера подсмотрел у других, у себя реализовал следующим образом:
Показать
В файле /user/extras/header-pre.tmpl.php прописал следующие строки:
<script type="text/javascript" src="/blog/user/extras/spoiler-hider.js"></script>
<link rel="stylesheet" href="/blog/user/extras/spoiler-hider.css">
spoiler-hider.js:
// Спойлеры для Эгеи
$(function(){
$('.spoiler-controller').click(function(){
var aClasses = this.className.split(/\s+/);
for (var i in aClasses) {
if (aClasses[i] == 'spoiler-controller' || aClasses[i] == 'spoiler-shown') {
aClasses.splice(i, 1);
}
}
if ($(this).hasClass('spoiler-shown')) {
this.innerHTML = this.innerHTML.replace('Скрыть', 'Показать');
$(this).removeClass('spoiler-shown');
} else {
this.innerHTML = this.innerHTML.replace('Показать', 'Скрыть');
$(this).addClass('spoiler-shown');
}
for (i in aClasses) {
if (!aClasses[i]) continue;
var jContainer = $('.'+aClasses[i]).not('.spoiler-controller');
jContainer.slideToggle();
}
});
});
spoiler-hider.css
.spoiler-controller { border-bottom: 1px dashed black; cursor: pointer; }
.spoiler-controller:hover { color: #b30; border-color: #b30; }
.spoiler { display: none; }
Теперь в нужном месте страницы пишу код
<p><b class="spoiler-controller pop-up_camper_<уникальный идентификатор>">Показать</b></p>
<section class="spoiler pop-up_camper_<уникальный идентификатор>"><p></p>
а в конце текста (и спойлера)
</section>
Также изменил размер заголовка блога, указав в
/themes/plain/styles/main.css
.title h1 {...; font-size: 24px ;...}
Изменил подсвечивание кода (по
этой статье) с помощью
highlight.js:
<link rel="stylesheet" href="//yandex.st/highlightjs/7.3/styles/github.min.css">
<script src="//yandex.st/highlightjs/7.3/styles/github.min.css"></script>
<script>
hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
</script>
hljs.tabReplace нужен для того, чтобы табуляции в коде заменялись на пробелы. highlight.js сам определяет на каком языке написан код, но можно явно указывать язык, добавляя
class к тегу
pre.