Стилизация и оптимизация ЖЖ или превращение зелёного леса в белого льва
- Местоположение: 46.65614,32.58147
- Настроение: sleepy
Добрался до изменения стиля журнала. Привык к теме Forest Green, использующей в основе стиль Bloggish, но в ней под содержимое отведено 470 пикселей, чего явно не достаточно для комфортного размещения фото и просмотра френдленты.
Полез в Custom CSS и изменил размеры текстового поля до 640 по ширине, так же увеличил ширину боковой колонки, сделав общую ширину содержимого 1000. Заодно увеличил размеры шрифтов на пару пунктов, так как размер пикселей на мониторах становится всё меньше. Для поисковой оптимизации перенёс боковую панель вправо, чтобы первым шло и индексировалось содержимое записи, только как-то это непривычно, надо будет вернуть влево, сделав SEO-верстку, на своём сайте удалось это сделать, в блоге тоже получится, жаль, что CSS плохо знаю.
После изменения ширины основных блоков получилась некрасивой шапка блога, в которой было узкое изображение. Решил поставить в шапку более приятную глазу картинку, для этого хорошо подошла часть фотографии белого льва, про которую упоминал здесь. После замены шапки последовало изменение цветовой гаммы блога, новые цвета взял пипеткой с шапки. От старых зелёненьких полностью не отказался — их использовал для цветов ссылок. Фоновое изображение тоже менять не стал - сильно не мешает и альтернатива в голову пока не пришла.
Кроме изменения стилей залез в изменение слоя оформления и интернационализации. Немного потыкав и просмотрев документацию по S2, создал свой слой оформления по типу Forest Green, использующий за основу Bloggish и слой интернационализации для замены некоторых фраз.
Сначала испытал свои силы на чём-то простом. Бросилось в глаза, что под каждой надписью перед датой публикации идёт текст "Posted on" на английском, исправил это переопределив следующую функцию так:
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 тайтлов страниц, поменяв местами название блога и статью, что тоже улучшит выдачу в поисковых системах. А на главной странице в добавок к заголовку блога вывел подзаголовок. Код:
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, так как в остальных такое не наблюдалось. Код, исправляющий это, его же потом увидел в тематическом сообществе:
if (size $.metadata) {
"""<div class="metadata">\n""";
foreach var string m ($.metadata) {
"<div><strong>";
print lang_metadata_title($m);
"</strong>: ";
if ($m == "mood") {
" $.mood_icon ";
}
print $.metadata{$m}; "</div>\n";
}
"</div>\n";
}
}
Пункты с синдикациями и разработано убрал просто, очистив соответствующие функции вывода, возможно, есть более правильные решения. Ссылки на RSS и Atom, в принципе, полезны, но изначальный их дизайн и местоположение не устраивали, позже надо будет вернуть, заменив внешний вид кнопок.
}
function print_module_syndicate(string title) {
}
Больше всего времени ушло на переработку тегов. Заменил список облаком. Как потом заметил, в других темах изначально было облако тегов, но успел до того по своему его сделать. Просто вывел все метки в строку, задав размер равным количеству использований плюс 5. Вариант не очень правильный, но мне пока хватает. Через несколько записей про больших кошек начну использовать коэффициент для расчёта размера. Был удивлён, что в S2 нет типа данных для дробных чисел с плавающей точкой, как понимаю, логарифмов в нём тоже нет и использовать логарифмическую зависимость для расчёта размера тегов не получится.
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 """<div style="text-align: center;">""";
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 """<span style="font-size: """ + $size + """px"><a rel="tag" title="$uses" href="/$tag.url">$tag.name</a></span> """;
}
}
print "</div>";
close_module();
}
Ещё вверху в ссылках добавил ссылку на свой сайт в конце. С этим моментов до конца не разобрался, не удалось найти, где формируется или задаётся массив ссылок "Свежие записи", "Архив", "Френдлента", "Профиль". Пришлось тупо после вывода этих ссылок добавлять ссылку на вебсайт блога:
var Page p = get_page();
open_module("viewlinks", $title, "");
var string[] links = [];
foreach var string k ($p.views_order) {
$links[size $links] = """<a href="/$p.view_url{$k}">"""+lang_viewname($k)+"""</a>""";
}
$links[size $links] = """<a href="/$p.journal.website_url">"""+$p.journal.website_name+"""</a>""";
print_module_list($links);
close_module();
}
И под конец в шапке сделал название блога ссылкой на сам блог, так как уже привык к такому поведению на других сайтах.
container_open("banner");
print safe "<h1 id='banner-header'><a href='$p.base_url'>$p.global_title</a></h1>";
print safe "<h2 id='banner-description'>$p.global_subtitle</h2>";
container_close();
}
А потом ещё немного помучился с CSS: вывел вверху блоки ссылок и юзерпика в одной строке, странно всё это, на такую мелочь много времени ушло, да ещё пришлось разбираться с кроссбраузерностью.
Так произошло превращение темы Forest Green в White Lion.