суббота, 20 ноября 2010 г.

[Blogger.com] Скрипт для отображения списка похожих статей — обновленная версия

Новая версия скрипта для отслеживания похожих сообщений блога. Основные изменения:

  • Основная часть скрипта вынесена во внешний файл. Теперь не нужно помещать в шаблон больше двух страниц (10 килобайт) текста скрипта.
  • Добавлен плоский режим без разделения выдачи по ярлыкам.
  • Добавлена возможность сортировать ярлыки по вручную задаваемому приоритету.
  • Реализована возможность игнорировать ярлыки низкого приоритета, если сообщению назначены ярлыки высокого приоритета.

Принцип работы

Скрипт имеет 2 режима работы: с группировкой ссылок на посты по ярлыкам и плоский (общим списком). Принцип работы скрипта в режиме группировки:

  • Берётся список ярлыков текущего поста, из него отбрасываются ярлыки, занесенные в настройках в список игнорируемых.
  • Запрашивается с блога информация о постах, соответствующих оставшимся ярлыкам. (Параметр relposts_queryPostsPerLabel указывает, по сколько постов запрашивать для каждого ярлыка).
  • Полученные посты группируются по ярлыкам с учётом настроек переименования ярлыков.
  • В каждой группе удаляются лишние посты, если их количество превышает указанное в параметре relposts_showPostsPerLabel
  • Каждой группе постов назначается приоритет, заданный в настройках.
  • Группы ссылок на посты показываются на странице. Группы отображаются в порядке их приоритета, заданного в настройках. (Если у двух групп приоритет одинаков, первым показывается группа, идущая раньше по алфавиту.)
  • При показе групп проверяются параметры relposts_showLabels и relposts_prioDelta, и при выполнении соответствующих условий, вывод прекращается. (Подробнее ниже, в описании настроек.)

В плоском режиме скрипт работает иначе:

  • Берётся список ярлыков текущего поста, из него отбрасываются ярлыки, занесенные в настройках в список игнорируемых.
  • Запрашивается с блога информация о постах, соответствующих оставшимся ярлыкам. (Параметр relposts_queryPostsPerLabel указывает, по сколько постов запрашивать для каждого ярлыка).
  • Каждому посту назначается приоритет, равный сумме приоритетов ярлыков, по которым он пересекается с текущим постом. (Т.е. если у текущего поста ярлыки А, Б и В, и некий пост имеет ярлыки А, В и Г, то этот пост получит приритет, равный сумме приоритетов для ярлыков А и В.)
  • Посты сортируются по приоритету.
  • На странице отображаются ссылки на посты. Количество задаётся параметром relposts_showPostsPlainMode.

Настройка и установка

Аналогично изначальной версии скрипта, находим в шаблоне место, куда будем вставлять код. Обычно оно после строки <data:post.body/>.

Пишем туда:

<!--[relposts]-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.labels'>
<div class='relposts'>

 <div id='relpostsdataheader'></div>
 <div id='relpostsdatalisting'></div>

 <script type='text/javascript'>

 // Сюда будем вписывать настройки

 </script>

 <script type='text/javascript'>
 relposts_sourceLabels = []
 <b:loop values='data:posts' var='post'>
  <b:loop values='data:post.labels' var='label'>
   relposts_sourceLabels.push(&quot;<data:label.name/>&quot;);
  </b:loop>
 </b:loop>
 </script>

 <script type='text/javascript' src='http://izhurnalscripts.googlecode.com/svn/trunk/relposts.js'></script>
</div>
</b:if>
</b:if>
<!--[/relposts]-->

Внутри тега script, где написано «Сюда будем вписывать настройки», следует поместить настройки скрипта. Впрочем и без настроек по умолчанию всё работает — можете сохранить шаблон и проверить. :)

Настройки (общие для обоих режимов):

  • relposts_headerPlain — использовать плоский или обычный режим. Значения: true, false.
  • relposts_excludeLabels — список ярлыков, которые следует игнорировать. Значение: массив строк.
  • relposts_queryPostsPerLabel — Количество постов, запрашиваемых для каждого ярлыка с блога. Значение: число.
  • relposts_renameLabels — таблица для переименования ярлыков. Если при переименовании названия 2-х или более ярлыко совпадают, посты этих ярлыков объединяются в выдаче. Значение: ассоциативный массив.
  • relposts_labelPrio — таблица приоритетов ярлыков. Обратите внимание: имена ярлыков даются в таблице в уже переименованном виде. Ярлыки, для которых приоритет не указан в таблице, имеют приоритет 1. Значение: ассоциативный массив.

Настройки, использущиеся в режиме группировки по ярлыкам:

  • relposts_excludeDups — исключать ли повторяющиеся ссылки в разных ярлыках. Значения: true, false.
  • relposts_showPostsPerLabel — сколько максимально постов отображать для каждого ярлыка. Если постов с блога запрошено больше, чем число relposts_showPostsPerLabel, посты выбираются случайным образом. Значение: число.
  • relposts_showLabels — сколько максимально ярлыков отображать. Ярлыки отображаются, начиная с более высокого приоритета, и до тех пор, пока не будет выведено relposts_showLabels ярлыков. Значение: число.
  • relposts_prioDelta — ограничение на разницу приоритетов между ярлыками. Берётся приоритет максимального ярлыка и ярлыки выводятся до тех пор, пока разница между приоритетом следующего ярлыка и приоритетом первого не превысит значение relposts_prioDelta. Значение: число.
  • relposts_header0 — Текст, который будет показан, если похожих постов не найдено. Значение: строка.
  • relposts_header1 — Текст, который будет показан, если найдёны похожие посты только по одному ярлыку. Если в строке есть фрагмент __LABEL__, он заменяется на название ярлыка. Значение: строка.
  • relposts_headerN — Текст, который будет показан, если похожие посты найдены более чем по одному ярлыку. Значение: строка.

Настройки, использущиеся в плоском режиме:

  • relposts_showPostsPlainMode — сколько максимально постов показывать. Посты показываются, начиная с самых приоритетных. Значение: строка.
  • relposts_headerPlain — текст заголовка. Значение: строка.

Значения опций по умолчанию:

relposts_headerN"Похожие статьи:"
relposts_header1"Еще статьи из категории «__LABEL__»:"
relposts_header0""
relposts_headerPlain"Похожие статьи:"
relposts_plainModefalse
relposts_showPostsPlainMode5
relposts_showPostsPerLabel5
relposts_queryPostsPerLabel10
relposts_excludeDupsfalse
relposts_showLabels1000
relposts_excludeLabels[]
relposts_renameLabels{}
relposts_labelPrio{}
relposts_prioDelta10000

Приоритеты ярлыков реализованы не только для указания порядка, в котором будут выводиться ярлыки, но и для того, чтобы иметь возможность прерывать вывод после определённых ярлыков.

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

<script type='text/javascript'>
 var relposts_prioDelta = 0;
 var relposts_labelPrio = {
  'javascript' : 2,
  'перевод' : 2
 };
</script>

вторник, 16 ноября 2010 г.

[Blogger.com] Как сделать, чтобы на разных страницах отдельные элементы блога были разными

Описываю, как сделать, чтобы определённая часть блога имела разный вид на разных страницах/постах/разделах.
Пост написан для по просьбе FUSESOUND. Всяким программистам и прочим гикам типа меня достаточно краткого справочника, а нормальным людям более подробный мануал лишним не будет.

четверг, 11 ноября 2010 г.

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

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

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

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

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

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

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

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

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

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

пятница, 5 ноября 2010 г.

[всячина] Хроники веб-девелопера: о IE, запятых, PHP и снова о getElementsByClassName

Убил полвечера на отладку скрипта только потому, что у меня нет под рукой компьютера с Windows, и баги в IE мне пришлось «отлаживать» через скриншоты и переписку по электронной почте. При этом еще и отнимая время у человека, не имеющего к программированию ни малейшего отношения.

В итоге, как обычно и бывает с IE, виной всему оказались не мои кривые руки, а альтернативное восприятие действительности разработчиками браузера. Настолько альтернативное, что они уже 10 лет как не могут починить парсер, а в 5-м издании javascript специально для них добавлено особое разъяснение.
Да-да, — запятые — если вы, не ходя по ссылке, догадались, что дело было в запятых, то вы молодец. А я — не молодец, я про них забыл и твердо верил, что как написано в спецификации, так оно и обязано работать.

Попутно узнал о самом коротком определении IE из-под javascript с использованием этого бага. А так же — внезапно — о том, что «многие языки для реализации и массивов, и хэшей используют один и тот же тип данных» (пунктуация цитаты не сохранена — хоть тут дайте запятую поставить нормально). Напомню, что в число «многих языков» входит PHP... и, собственно, никто больше не входит.
PHP разрушает мозг, ну вы в курсе.

Еще выяснилось, что в отдельных случах IE8 таки настаивает на своём и по-прежнему «не поддерживает это свойство или метод». Я наугад потыкал код, но кажется, это привело лишь к тому, что теперь на этом блоге в IE вообще никак не работаёт скрипт дат, а проверить не на чем. Да и чёрт с ним. На следующей неделе доберусь до ноутбука, на котором установлена винда, там и посмотрим, что опять не так с getElementsByClassName.

Ну и самое главное-то чуть не забыл сказать. Мы тут с amateurblogger подумали-подумали, и решили еще что-нибудь радикально улучшить в этом буржуйском блогспоте. Поэтому скоро вас ждёт нечто более удивительное, чем какой-то там календарь. Удивительное будет выходить в свет по частям, по мере готовности частей к релизу.
Stay tuned!

вторник, 2 ноября 2010 г.

[Blogger.com] Примеры стилей для виджета календаря

Примеры оформления виджета календаря при помощи CSS:

<style type='text/css'>

.iacalendar table {
 background-color: #888;
}

.iacalendar table td {
 background-color: #ddd !important;
 text-align: center  !important;
 font-family: Arial !important
}

.iacalendar .wday_cell {
 font-weight: bold !important
}

</style>

<style type='text/css'>

.iacalendar table td {
 text-align: left  !important;
 font-family: Arial !important;
 font-size: 10pt !important;
 color: #ddd !important;
}

.iacalendar .wday_cell, .iacalendar .month_year_cell {
 font-weight: bold !important;
 color: #999 !important;
}

.iacalendar .month_year_cell {
 text-align: center !important;
}

.iacalendar .cell a {
 color: #888 !important;
 text-decoration: none !important;
}

.iacalendar .cell a:hover {
 color: #888 !important;
 text-decoration: underline !important;
}

</style>

<style type='text/css'>

.iacalendar table {
 border: 1px solid #888;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

.iacalendar table td {
 text-align: center  !important;
 font-family: Arial !important
}

.iacalendar .wday_cell {
 font-weight: bold !important
}

.iacalendar .month_year_cell {
 border-bottom: 1px solid #888;
}
</style>

<style type='text/css'>

.iacalendar table {
 border: 1px solid #888;
}

.iacalendar table td {
 text-align: center !important;
 font-family: Monospace !important
}

.iacalendar .wday_cell {
 font-weight: bold !important
}

.iacalendar .month_year_cell {
 border-bottom: 1px solid #888;
}

.iacalendar .cell a {
 display: block;
 background-color: #ddd;
 text-decoration: none !important;
}

</style>