[Blogger.com] Реализация карты или оглавления для блога с разбиением на рубрики/категории

Вроде как вступление

Вот и обещанное «нечто удивительное» для blogspot-а — полнофункциональный скрипт для создания оглавления или карты сайта.

Практически каждый, кто завёл блог на blogspot, рано или поздно задаётся вопросом, каким образом на этой платформе можно сделать разделение статей по рубрикам и добавить оглавление. И к сожалению, напрямую Blogger.com такую возможность не поддерживает — всё, что есть в нашем распоряжениии, это лента постов, которым мы можем назначать ярлыки, и возможность фильтровать посты по отдельным ярлыкам.

В этой ситуации, распространённый способ сделать «категории» — использовать вместо них ярлыки, а в качестве карты сайта использовать длинную-длинную выдачу списка сообщений, в которой оставлены только лишь заголовки, а текст сообщений скрыт при помощи CSS. Все эти «улучшения блога» описаны на множестве сайтов, посвященных «хакам для blogspot» — и преподносятся там как невероятное откровение, хотя им примерно столько же лет, сколько самому blogspot-у. (На самом деле, как я уже упоминал, 90% этих сайтов почти целиком содержат переводы с английского и копипаст друг друга, и если вы видели один такой сайт, значит вы видели все. Впрочем, это вполне типично для русской блогосферы вообще, по любой тематике. Реально что-то новое для блогспота можно увидеть, от силы, на 4-х англоязычных блогах.)

Но не всё так печально, как кажется. В нашем распоряжении имеется rss-лента блога и javascript, а значит, приложив каплю терпения, мы можем получить рубрики, оглавления, и вообще что угодно, что можно только получить на снове анализа сообщений из rss. Именно так, без всякой магии, заработал виджет Календарь, и именно так работает скрипт, которому посвящена данная статья.

Пример работы скрипта можно посмотреть в виде оглавления этого блога. Впрочем, это довольно бледный пример: во первых, у меня практически нет картинок в постах, и оглавление идёт без иллюстраций, а во-вторых, с помощью CSS можно сделать реально круто выглядящее оглавление — но мне лень.

Обзор возможностей

Фактически, хотя изначальное предназначение данного скрипта — отображать карту сайта, его потенциальная область применения намного шире. Посмотрим, что он может делать:

• Считать с блога сообщения по заданным в настройках ярлыкам и сгруппировать их в категории. Например, допустим, у вас блог о растениях, и вы используете ярлыки «Комнатные цветы», «Садовые цветы» и «Плодовые культуры». Вы хотите, чтобы всё, что связано с цветами, отображалось в оглавлении в одной категории, а всё, что связано с ягодами/фруктами, в другой. Тогда в настройках вы задаёте, что «Плодовые культуры» — это отдельная категория, а вот «Комнатные цветы» и «Садовые цветы» следует объединить в категорию «Цветы». Также для каждой категории можно задать описание — дополнительный текст, который будет показан после заголовка категории.
• Для каждого сообщения отобразить дату, заголовок со ссылкой на сообщение, описание сообщения и картинку. Что именно из этого нужно показывать, а что нет, можно задать в настройках.
• Автоматически сформировать для каждого сообщения описание на основе начала текста сообщения. В настройках вы можете задать и свои собственные описания для конкретных сообщений.
• Найти в посте первую картинку и использовать её в качестве иллюстрации. Также есть возможность задать картинку и вручную.
• Отсортировать сообщения по дате публикации или названию — в прямом или обратном порядке.

Вы можете расположить всё оглавление вашего блога на одной странице или разместить скрипт на нескольких страницах и на каждой задать только оглавление конкретного раздела. Можете использовать краткое перечисление постов блога или дополнить их описанием — вручную введённым или автоматическим. Можете разбавить сухость текстового оглавления иллюстрациями к каждому сообщению.

Если же вы разбираетесь в программировании на javascript, то, благодаря расширяемости скрипта, вы можете дополнить его практически любыми возможностями. Несколько примеров:

• Можно в оглавлении показывать размер каждого сообщения.
• Можно отобразить оглавление в две колонки.
• Если у вас фотоблог, можно сделать галерею изображений.
• Если у вас в блоге есть статьи, посвященные каким-нибудь однотипным объектам (например, обзоры фильмов, описания цветов, рецензии и т.п.), то можно автоматически извлечь из таких постов какие-либо ключевые данные (например, для фильмов — год выхода, жанр, имя режиссёра и т.п.) и предоставить всю эту информацию в виде сводной таблицы, с возможностью сортировать её по выбранным посетителем сайта колонкам.

Во всех этих случаях ядро скрипта считывает с блога списки сообщений, а вам необходимо лишь переопределить методы, формирующие из списка готовую страницу, чтобы получить желаемый результат.

Установка и настройка

Скрипт устанавливается не как виджет и не как «хак» для шаблона блога, а в виде содержимого отдельного поста. Это может быть обычный пост или статическая страница. Таких постов-рубрик вы можете создать сколько угодно с разными настройками.

1. Итак, создаём новое сообщение блога, в редакторе постов переходим на вкладку «Изменить HTML» — все правки поста необходимо будет выполнять в этом режиме. Также убедитесь, что в настройках сообщения выбраны пункты «Интерпретировать введенный HTML-код» и «Используйте теги <br />». (Если вы создали страницу, а не пост, в её настройках пункт «Используйте теги <br />» подписан как «Пропускать символы новой строки».)

Вводим туда заклинание текст:

<script type='text/javascript'>
/* Настройки скрипта */
</script>

<script type='text/javascript' src='http://izhurnalscripts.googlecode.com/svn/trunk/itoc.js'></script>

<noscript>
Для отображения содержимого страницы необходима поддержка JavaScript.
</noscript>

В первый тег script мы сейчас будем вписывать настройки скрипта. Второй тег script подключает непосредственно сам скрипт с заданными настройками. Наконец, текст, введённый в теге noscript будет показан посетителю, если в его браузере отключена поддержка JavaScript.

2. Базовая настройка скрипта включает в себя указание адреса блога и списка рубрик. Примеры настройки здесь и далее будут показаны на примере настройки карты сайта на этом блоге.

В переменной itoc_siteUrl указываем адрес блога.

var itoc_siteUrl = "http://izhurnal.blogspot.com/"

Адрес блога, с которого будут показаны рубрики, не обязан совпадать с адресом блога, на котором вы размещаете само оглавление — в принципе, можно отображать на одном блоге оглавление другого блога. (Правда не знаю, зачем такое может понадобиться, но вдруг.)

Далее в переменной itoc_categories необходимо указать таблицу категорий. Тут проще показать, чем объяснить словами:

var itoc_categories = [
 ['Blogger.com'        , ''                   , 'Cкрипты, виджеты, идеи и советы для всех, кто держит блог на платформе Blogger.com'],
 ['блогеру на заметку' , 'Блогеру на заметку' , 'Полезности для блогеров, вне зависимости от используемой платформы.'],
 ['утилиты онлайн'     , 'Утилиты онлайн'     , 'Полезные скрипты, выполняющиеся прямо в браузере.'],
 ['советы по настройке', 'Советы по настройке', 'Рецепты и рекомендации по настройке программ.'],
 ['это интересно'      , 'Это интересно'      , 'Заметки обо всём на свете.'],
 ['мысль вслух'        , 'Мысль вслух'        , 'Случайные мысли на произвольные темы.'],
 ['разное'             , 'Разное'             , 'Сообщения, не вписавшиеся в формат других разделов.'],
 ['PR'                 , 'Разное'             , ''],
 ['поле чудес; страна дураков', 'Разное'      , '']
];

В первом столбце указывается ярлык, по которому будет считываться список сообщений.
Во втором столбце указывается название категории, к которой принадлежат сообщения, имеющие данный ярлык. Если название категории оставлено пустым, оно автоматически устанавливается равным названию ярлыка.
В третьем столбце (если он не пуст) задаётся описание категории.

В примере выше в первой строке указано, что ярлык Blogger.com относится к категории Blogger.com (поскольку имя категории категории не указано, считается равным названию ярлыка), и для этой категории дано описание. В следующих шести строчках задаётся еще 6 категорий с описаниями. Поскольку перечисленные там ярлыки написаны со строчной буквы, а названия категорий хотелось видеть с заглавной, то названия категорий указаны в явном виде. В последних двух строчках указано, что к категории Разное относятся еще 2 ярлыка. Поскольку описание категории Разное уже было дано до этого, то в этих двух строчках столбец описания не заполнен.

Здесь следует обратить внимание, что строки таблицы разделяются запятой, а в конце последней строки запятая не ставится — если у вас скрипт не станет работать, в первую очередь убедитесь, нет ли у вас лишних или пропущенных запятых.

3. Далее указываем настройки режима отображения. Эти опции не являются обязательными, если их не указывать, скрипт будет использовать значения по умолчанию.

var itoc_showDate = true;        // Отображать ли даты
var itoc_showDesc = true;        // Отображать ли описания
var itoc_showImg  = false;       // Отображать ли изображения-иллюстрации
var itoc_showImgOnlyWithDesc  = true; // Отображать изображение только если есть описание

var itoc_sortBy = 'published';   // Режим сортировки: published или title. (По дате публикации или по заголовку.)
var itoc_sortOrderAscending = true; // Сортировка по возрастанию/убыванию.

var itoc_minContentLength = 700; // Минимальная длина поста, при которой включается автоматическое описание.
var itoc_maxDescLength = 500;    // Максимальная длина автоматически формируемого описания.
var itoc_minDescLength = 30;     // Если автоматическое описание получилось короче этого значения, не выводить это описание.

Здесь первые 4 переменные указывают, какие данные отображать для каждого сообщения, далее еще 2 переменные задают режим сортировки — тут всё самоочевидно.

Переменные itoc_minContentLength, itoc_maxDescLength, itoc_minDescLength задают параметры работы механизма, отвечающего за автоматические описания постов. Тут следует подробнее остановиться на особенностях его работы.

При формировании краткого описания в первую очередь из сообщения вырезаются теги, не имеющие прямого отношения к текстовой составляющей — картинки, флеш-ролики и т.п. Затем проверяется длина этой урезанной версии. Если она меньше значения переменной itoc_minContentLength, то на этом обработка прекращается, и автоматическое описание не формируется. Эта проверка позволяет не показывать описания для коротких постов.

Затем текст урезается по одному из следующих тегов: многострочная цитата, таблица, список, разрыв сообщения по ссылке «Читать далее». Если получившийся фрагмент меньше, чем значение переменной itoc_minDescLength, автоматическое описание также не формируеться — это проверка проводится, чтобы избежать слишком коротких описаний. (Например, когда в начале поста идёт буквально пара слов, а затем таблица.)

Из оставшегося фрагмента удаляются остальные теги, и если размер текста превышает значение переменной itoc_maxDescLength, он урезается до этого размера. (Дополнительно проверяется, чтобы урезка шла по границе между словами, а не внутри слова.)

Следует заметить, что если у вас в настройках блога RSS-лента настроена отображать только начало постов, то данный скрипт «увидит» только такие укороченные варианты сообщений. В общем, если RSS-лента выводит, например, только первые 200 символов сообщения, то не стоит ожидать здесь описаний постов по 500 символов.

В данный момент всё готово для работы скрипта, можно нажать «Просмотр» и просмотреть получившееся или опубликовать пост. Однако результат будет выглядеть страшно, поскольку мы еще не задали стили оформления. Если вы не собираетесь вручную указывать описания сообщений и/или картинки, то переходите сразу к настройке CSS.

4. Если автоматические описания и картинки вас не устраивают, то можно настроить вручную заданные описания и иллюстрации. Описания задаются в переменной itoc_descriptions в виде пар «адрес поста : описание поста». Образец:

var itoc_descriptions = {
 'http://izhurnal.blogspot.com/2010/10/calendar-archive-widget-blogger.html' : 
  'Виджет «Календарь-архив» показывает в вашем блоге календарь на текущий месяц, в котором по дням проставлены ссылки на ваши статьи. Вам и вашим посетителям будет наглядно видно, когда и что вы писали. Календарь можно листать по месяцам и по годам, просматривая весь архив.',
 'http://izhurnal.blogspot.com/2010/11/css-typetextcss-table-background-color.html' :
  'Примеры оформления <a href="http://izhurnal.blogspot.com/2010/10/calendar-archive-widget-blogger.html">виджета Календарь</a> '+
  'при помощи таблиц стилей.'
};

Здесь, как и в случае с настройкой таблицы категорий, будьте внимательны с запятыми: все пары «адрес:описание» разделяются запятой, а после последней пары запятую ставить не нужно.

В переменной itoc_images аналогичным образом задаются иллюстрации, торлько вместо описания указывается URL картинки.

В итоге, после указания всех настроек получается что-то типа следующего:

<script type='text/javascript'>

var itoc_siteUrl = "http://izhurnal.blogspot.com/" // Адрес блога.

var itoc_categories = [
 ['Blogger.com'        , ''                   , 'Cкрипты, виджеты, идеи и советы для всех, кто держит блог на платформе Blogger.com'],
 ['блогеру на заметку' , 'Блогеру на заметку' , 'Полезности для блогеров, вне зависимости от используемой платформы.'],
 ['утилиты онлайн'     , 'Утилиты онлайн'     , 'Полезные скрипты, выполняющиеся прямо в браузере.'],
 ['советы по настройке', 'Советы по настройке', 'Рецепты и рекомендации по настройке программ.'],
 ['это интересно'      , 'Это интересно'      , 'Заметки обо всём на свете.'],
 ['мысль вслух'        , 'Мысль вслух'        , 'Случайные мысли на произвольные темы.'],
 ['разное'             , 'Разное'             , 'Сообщения, не вписавшиеся в формат других разделов.'],
 ['PR'                 , 'Разное'             , ''],
 ['поле чудес; страна дураков', 'Разное'      , '']
];

var itoc_descriptions = {
 'http://izhurnal.blogspot.com/2010/10/calendar-archive-widget-blogger.html' : 
  'Виджет «Календарь-архив» показывает в вашем блоге календарь на текущий месяц, в котором по дням проставлены ссылки на ваши статьи. Вам и вашим посетителям будет наглядно видно, когда и что вы писали. Календарь можно листать по месяцам и по годам, просматривая весь архив.',
 'http://izhurnal.blogspot.com/2010/11/css-typetextcss-table-background-color.html' :
  'Примеры оформления <a href="http://izhurnal.blogspot.com/2010/10/calendar-archive-widget-blogger.html">виджета Календарь</a> '+
  'при помощи таблиц стилей.',
 'http://izhurnal.blogspot.com/2010/09/blog-post_10.html' :
  'Как изменить подпись «Анонимный» в комментариях блога на «Гость» или любую другую. Небольшой скрипт-хак для Blogger.com.',
 'http://izhurnal.blogspot.com/2010/10/blog-post_11.html' :
  'Как изменить текст и внешний вид ссылок навигации, что расположены в конце каждой страницы блога.',
 'http://izhurnal.blogspot.com/2010/10/disqus.html' :
  'Идея о том, как заставить поисковые системы индексировать текст комментариев, оставленных на блоге при помощи системы Disqus.',
 'http://izhurnal.blogspot.com/2010/09/today-yesterday-date-blogger.html' :
  'Сегодня мы научим блог писать вместо даты слова «вчера» и «сегодня» для сообщений, которые были опубликованы вчера и сегодня. :)',
 'http://izhurnal.blogspot.com/2010/09/blogspot_08.html' :
  '«1 комментарий», «2 комментария», «25 комментариев»... Хотите, чтобы ваш блог показывал число комментариев в полном соответствии с правилами русского языка? На самом деле, сделать это очень просто...',
 'http://izhurnal.blogspot.com/2010/09/blogspot-hidden-posts.html' :
  'Небольшой хак для шаблона блога: делаем так, чтобы сообщения без ярлыков не было видно на главной, в архиве и т.п.',
 'http://izhurnal.blogspot.com/2010/09/blogger.html' :
  'Оптимизация шаблона блога с целью сделать ваш блог более дружественным для поисковых систем.',
 'http://izhurnal.blogspot.com/2010/09/blogspot.html' :
  'Описание синтаксиса, используемого в шаблонах блога. В первой части рассматриваются базовые элементы: теги секций и виджетов.',
 'http://izhurnal.blogspot.com/2010/09/widget-tags-blogspot.html' :
  'Синтаксис шаблонов блога, часть вторая. Теги для формирования внутренностей виджетов: условия, циклы, подключаемые сегменты и так далее.',
 'http://izhurnal.blogspot.com/2010/09/blogspot_04.html' :
  'Синтаксис шаблонов блога, часть третья. Теги для подстановки в шаблон реальных данных, таких как название блога, содержимое сообщений, ярлыки и т.п.',
 'http://izhurnal.blogspot.com/2010/10/blog-post_26.html' :
  'Мой вариант скрипта для списка похожих статей. Как и большинство подобных скриптов, определяет похожие сообщения на основе совпадения ярлыков. Расширенные возможности настройки: фильтрация, переименование и объединение ярлыков.',
 'http://izhurnal.blogspot.com/2010/08/mp.html' :
  '',
 'http://izhurnal.blogspot.com/2010/09/blog-post_05.html' :
  '',
 'http://izhurnal.blogspot.com/2010/09/seo-intelligence.html' :
  '',
 'http://izhurnal.blogspot.com/2010/09/blog-post_7110.html' :
  '',
 'http://izhurnal.blogspot.com/2010/09/blog-post_9547.html' :
  '',
 'http://izhurnal.blogspot.com/2010/10/blog-post_10.html' :
  ''
};

var itoc_images = {
 'http://izhurnal.blogspot.com/2010/10/firefox-cache.html' :
  'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtLABIkni621NqQjirRJtarkAcv72iztc0HhQrz9-O0ny2jU1P9rOVKN3FDbLBNlg7ZT69N0PK6Y8ct_yu3-YlioG2Yz3sgN6tBUIUB8bpStmRYIRHGWljQ7LBz7EUwzV3UN_3t0p8WsQ/s200/mozilla-firefox-logo.jpg',
 'http://izhurnal.blogspot.com/2010/10/feedburner.html' :
  ''
};

var itoc_showDate = true;
var itoc_showDesc = true;
var itoc_showImg  = false;
var itoc_showImgOnlyWithDesc  = true;

var itoc_maxDescLength = 500;
var itoc_minContentLength = 700;
var itoc_minDescLength = 30;

var itoc_sortBy = 'published';
var itoc_sortOrderAscending = true;

</script>

<script type='text/javascript' src='http://izhurnalscripts.googlecode.com/svn/trunk/itoc.js'></script>

<noscript>
Для отображения содержимого страницы необходима поддержка JavaScript.
</noscript>

Настройка CSS

Сейчас скрипт полностью настроен, но результат его работы выглядит жутко. Особенно если вы включили отображение картинок — вся разметка разъехалась, и картинки, описания и ссылки отображаются как попало. Это происходит потому, что мы еще не указали стили оформления для выводимых скриптом элементов.

Если у вас в блоге используется более одной страницы с данным скриптом, то имеет смысл вынести CSS в шаблон блога. Если же всёго одна страница, можно CSS указать прямо в посте перед настройками скрипта.

Элементы CSS, которые используются в скрипте:

.itoc h4	Заголовок категории
.itoc p	Описание категории
.itoc ul	Список сообщений категории
.itoc li	Элемент для конкретного сообщения
.itoc .date	Дата сообщения
.itoc a	Ссылка на сообщение
.itoc img	Иллюстрация к сообщению
.itoc .desc	Описание сообщения
.itoc .endofdesc	Пустой div, вставляемый в конце описания
.itoc .progressbartable	Полоса загрузки, появляющаяся когда скрипт читает RSS-ленту
.itoc .progressbartable td
.itoc .progressbartable .ready
.itoc .progressbartable .notready
.itoc .progressbartable .progressbartext

Я не буду здесь расписывать, как задавать стили элементов — предполагается, что читатель знаком с CSS хотя бы на уровне новичка. За основу при составлении вашего стиля можете взять CSS, который я использую для оглавления на этом блоге:

<style type='text/css'>
.itoc p {
 margin-top: 0px;
}
.itoc h4 {
 margin-bottom: 0px;
 clear:left;
}

.itoc li {
 list-style-type: none;
 clear:left;
}

.itoc .date {
 font-size: small;
 color: green;
 font-family: terminus, monospace;
}

.itoc a {
 font-size: 140%;
 color: #8bc;
}

.itoc .date:before  { content: "["  }
.itoc .date:after  { content: "]"  }

.itoc .desc {
 margin-left: 20px;
 padding-left: 20px;
 border-left: 1px solid green;
}

.itoc .endofdesc {
 clear:left;
}

.itoc img {
 float: left;
 padding-left: 41px;
 padding-right: 5px;
 width: 130px;
}

.itoc .progressbartable {
 margin-left: auto;
 margin-right: auto;
}

.itoc .progressbartable td {
 width:  10px;
 height: 5px;
}

.itoc .progressbartable .ready {
 background-color: #cdf;
}

.itoc .progressbartable .notready {
 background-color: #ccc;
}

.itoc .progressbartable .progressbartext {
 color: #cdf;
 font-family: terminus, monospace;
 font-size: small;
 text-align: center;
}
</style>

Расширение возможностей скрипта

В какую сторону копать, если вы знаете JavaScript и хотите получить от скрипта дополнительную функциональность:

Чтобы частично или полностью «взять на себя» управление формированием HTML-кода, выдаваемого виджетом, определите в шаблоне блога или в посте, из которого вызываете скрипт, следующие функции:

itoc_getShortDescFor	Возвращает автоматическое описание для заданного контента
itoc_getImageFor	Возвращает автоматически выбранный URL картинки для заданного контента
itoc_onItemReceived	Производит дополнительную обработку элемента перед началом сортировок и формированием HTML-кода
itoc_compareItems	Возвращает результат сравнения двух заданных постов для сортировки постов
itoc_getToCHtml	Возвращает HTML для всего оглавления
itoc_getHtmlForItems	Возвращает HTML для заданного списка элементов-постов
itoc_getHtmlForItem	Возвращает HTML для заданного элемента

Скрипт проверяет, определена ли соответствующая функция на момент вызова скрипта, и если да, использует её, а не встроенную реализацию.

Подробной документации по внутреннему устройству скрипта не пишу, так как всё можно посмотреть непосредственно в исходном коде.

Минусы скрипта

Основным минусом является необходимость загрузки RSS ленты со всеми теми постами, которые будут перечислены в выдаче скрипта. Если у вас RSS отдаётся в полном виде, то загружается полный текст постов. Соответственно, трафика скрипт кушает прилично и на медленных каналах загружаться может ощутимое время. Особенно это критично для посетителей с оплатой за трафик.

Что дальше?

Как я и обещал, отдельные части работы будут релизиться по мере готовности. Данный скрипт — лишь первая часть. Что же будет дальше?

Во-первых, хотя скрипт довольно гибок, на мой вгляд, он всё еще недостаточно гибок в настройке. Кроме того, в нём есть несколько мелких недоработок, а в процессе эксплутатации наверняка обнаружатся баги. Поэтому уже идёт работа над второй версией.

Во-вторых, результат работы скрипта формируется в браузере уже после открытия страницы, и значит, совершенно бесполезен для поисковых систем. Поэтом следующим шагом мы заставим все эти рубрики, оглавления, сводные таблицы и что угодно, что можно получить при помощи этого скрипта — заставим всё это индексироваться поисковыми ситемами как обычный текст. Фантастика? Как знать, как знать... Разумеется одним только джаваскриптом и браузером здесь не обойтись, но у нас есть кое-что в запасе.

В третьих... time will tell. :)