Стилізація та оптимізація ЖЖ або перетворення зеленого лісу на білого лева

Дістався до зміни стилю журналу. Звик до теми 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) {
"""<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_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 """<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();
}

Ще вгорі в посиланнях додав посилання на свій сайт у кінці. Із цим моментом до кінця не розібрався, не вдалося знайти, де формується чи задається масив посилань "Свіжі записи", "Архів", "Стрічка друзів", "Профіль". Довелося тупо після виводу цих посилань додавати посилання на вебсайт блогу:

І наостанок у шапці зробив назву блогу посиланням на сам блог, бо вже звик до такої поведінки на інших сайтах.

function print_banner(Page p) {
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();
}

Для виводу та підсвічування коду використав Syhi.

А потім ще трохи помучився з CSS: вивів угорі блоки посилань і юзерпіка в одному рядку, дивно це все, на таку дрібницю багато часу пішло, та ще й довелося розбиратися з кросбраузерністю.

Так відбулося перетворення теми Forest Green на White Lion.