Стилизация и оптимизация ЖЖ или превращение зелёного леса в белого льва
Добрался до изменения стиля журнала. Привык к теме Forest Green, использующей в основе стиль Bloggish, но в ней под содержимое отведено 470 пикселей, чего явно не достаточно для комфортного размещения фото и просмотра френдленты.
Полез в Custom CSS и изменил размеры текстового поля до 640 по ширине, так же увеличил ширину боковой колонки, сделав общую ширину содержимого 1000. Заодно увеличил размеры шрифтов на пару пунктов, так как размер пикселей на мониторах становится всё меньше. Для поисковой оптимизации перенёс боковую панель вправо, чтобы первым шло и индексировалось содержимое записи, только как-то это непривычно, надо будет вернуть влево, сделав SEO-верстку, на своём сайте удалось это сделать, в блоге тоже получится, жаль, что CSS плохо знаю.
После изменения ширины основных блоков получилась некрасивой шапка блога, в которой было узкое изображение. Решил поставить в шапку более приятную глазу картинку, для этого хорошо подошла часть фотографии белого льва, про которую упоминал здесь. После замены шапки последовало изменение цветовой гаммы блога, новые цвета взял пипеткой с шапки. От старых зелёненьких полностью не отказался - их использовал для цветов ссылок. Фоновое изображение тоже менять не стал - сильно не мешает и альтернатива в голову пока не пришла.
Кроме изменения стилей залез в изменение слоя оформления и интернационализации. Немного потыкав и просмотрев документацию по S2, создал свой слой оформления по типу Forest Green, использующий за основу Bloggish и слой интернационализации для замены некоторых фраз.
Сначала испытал свои силы на чём-то простом. Бросилось в глаза, что под каждой надписью перед датой публикации идёт текст "Posted on" на английском, исправил это переопределив следующую функцию так:
function lang_posted_date_and_time(EntryLite e,
DateTime dt, bool showdate, bool showtime) : string {
var string posted = "Опубликовано";
$posted = $posted + ($showdate ? " " : " в ");
if ($showdate and $showtime) {
if ($e.depth > 0) { # If $e is a comment
return $posted + $e->time_display("med", "");
} else {
return $posted + $dt->date_format("med") + " в " + $dt->time_format();
}
}
if ($showdate and not $showtime) {
return $posted + $dt->date_format("med");
}
if (not $showdate and $showtime) {
return $posted + $dt->time_format();
}
return "";
}
Затем провёл SEO тайтлов страниц, поменяв местами название блога и статью, что тоже улучшит выдачу в поисковых системах. А на главной странице в добавок к заголовку блога вывел подзаголовок. Код:
function Page::title() [notags] : string {
var string title = $.global_title;
if ($title == "") {
$title = $.journal.name;
}
if ($.view != "recent") {
$title = $this->view_title() + " - " + $title;
}
else {
$title = $title + " - " + $.global_subtitle;
}
if ($.view == "friends") {
$title = $this->view_title();
}
return $title;
}
Дальше просматривая страницу, заметил, что в мета-данных записей (местоположение, настроения) выводятся их идентификаторы, а не заголовки. Это была проблема самой темы Bloggish, так как в остальных такое не наблюдалось. Код, исправляющий это, его же потом увидел в тематическом сообществе:
function Entry::print_metadata() {
if (size $.metadata) {
"""
">\n""";
foreach var string m ($.metadata) {
"
";
print lang_metadata_title($m);
": ";
if ($m == "mood") {
" $.mood_icon ";
}
print $.metadata{$m}; "\n";
}
"\n";
}
}
Пункты с синдикациями и разработано убрал просто, очистив соответствующие функции вывода, возможно, есть более правильные решения. Ссылки на RSS и Atom, в принципе, полезны, но изначальный их дизайн и местоположение не устраивали, позже надо будет вернуть, заменив внешний вид кнопок.
function print_module_poweredby(string title) {
}
function print_module_syndicate(string title) {
}
Больше всего времени ушло на переработку тегов. Заменил список облаком. Как потом заметил, в других темах изначально было облако тегов, но успел до того по своему его сделать. Просто вывел все метки в строку, задав размер равным количеству использований плюс 5. Вариант не очень правильный, но мне пока хватает. Через несколько записей про больших кошек начну использовать коэффициент для расчёта размера. Был удивлён, что в S2 нет типа данных для дробных чисел с плавающей точкой, как понимаю, логарифмов в нём тоже нет и использовать логарифмическую зависимость для расчёта размера тегов не получится.
function print_module_tags(string title) {
var Page p = get_page();
var TagDetail[] tags = $p->visible_tag_list();
if (size($tags) < 1) { return; }
open_module("categories", $title, ""); # TODO: Link to the TagsPage?
print """
">""";
foreach var TagDetail tag ($tags) {
if ($tag.use_count > 0) {
var int size;
$size = $tag.use_count + 5;
var string uses = get_plural_phrase($tag.use_count, "text_tag_uses");
print """""" + $size + """px">" title="$uses" href="$tag.url">$tag.name """;
}
}
print "";
close_module();
}
Ещё вверху в ссылках добавил ссылку на свой сайт в конце. С этим моментов до конца не разобрался, не удалось найти, где формируется или задаётся массив ссылок "Свежие записи", "Архив", "Френдлента", "Профиль". Пришлось тупо после вывода этих ссылок добавлять ссылку на вебсайт блога:
function print_module_viewlinks(string title) {
var Page p = get_page();
open_module("viewlinks", $title, "");
var string[] links = [];
foreach var string k ($p.views_order) {
$links[size $links] = """ $p.view_url{$k}">"""+lang_viewname($k)+"""""";
}
$links[size $links] = """ $p.journal.website_url">"""+$p.journal.website_name+"""""";
print_module_list($links);
close_module();
}
И под конец в шапке сделал название блога ссылкой на сам блог, так как уже привык к такому поведению на других сайтах.
function print_banner(Page p) {
container_open("banner");
print safe " $p.global_title
";
print safe "$p.global_subtitle
";
container_close();
}
Для вывода и подсветки кода использовал Syhi.
А потом ещё немного помучился с CSS: вывел вверху блоки ссылок и юзерпика в одной строке, странно всё это, на такую мелочь много времени ушло, да ещё пришлось разбираться с кроссбраузерностью.
Так произошло превращение темы Forest Green в White Lion.