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

[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' :
  'http://3.bp.blogspot.com/_9LzkYxYJB94/TLAXCacumTI/AAAAAAAAAIQ/9hR0lBxOYJE/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. :)

35 комментариев

Angel2S2

Сделано хорошо, мне нравится :) Еще бы добавить чтобы выделял наиболее свежие записи, как например тут - http://demo-abu-farhan-com.blogspot.com/p/table-of-content.html (а тут само описание - http://www.abu-farhan.com/2010/05/table-of-content-for-blogger-new-style/) и будет совсем конфетка ;)
Мне еще из того же блога понравилось вот такая реализация - http://www.abu-farhan.com/2010/05/table-of-content-and-accordion-for-blogger/ (там есть кнопочка Demo).

Flee.lancer

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

если делать это постом - то необходимо оформлять каждый пост? а если на отдельной странице, то получится, что бы увидеть рубрики, нужно будет перейти на специальную страницу?

Clr

@Angel2S2:
Добавил в TODO. Посмотрю, что можно сделать.

@Flee.lancer:
Разница в том, что страница, в отличие от поста, не видна в общем потоке сообщений блога, её можно увидеть только по конкретному адресу. Ну и еще разница в том, что у страниц по умолчанию выключены комментарии, но это можно менять в настройках страницы.
Да, необходимо в каждый пост(или страницу), служащий рубрикой, вписать указанный в статье код: настройки скрипта и вызов скрипта. Соответственно, для каждого поста настройка таблицы категорий itoc_categories будет отличаться — указываются только настройки, относящиеся к данной рубрике.
Настройки CSS в этом случае лучше вписать в шаблон блога, чтобы они применялись сразу ко всем рубрикам.
Если еще не читали, почитайте http://amateurblogger.ru/2010/11/kak-sdelat-rubriki-blogspot-blogger.html, там есть подробности, и отдельные детали описаны более понятным языком, чем у меня в статье.
Чтобы ссылки на рубрики отображались сбоку, добавьте на боковую панель стандартный виджет Список Ссылок и настройте в нём ссылки на посты/страницы с оглавлением рубрик.
В моём примере оглавления блога в itoc_categories вписаны настройки сразу для всех рубрик, поэтому получается общее одностраничное оглавление.

PANIC

а с чем может быть связано, что в оглавлении выводятся не все сообщения с данным ярлыком?

PANIC

и можно как-нибудь добавлять изображения ни к отдельным сообщениям блога, а ко всей рубрике?

Clr

@PANIC:
Внёс в скрипт небольшие правки, проверьте, как сейчас работает. Если всё еще не выводится часть сообщений, скажите адрес страницы, попробуем разобраться.

Изображения добавлять можно: описания рубрик могут представлять собой произвольный HTML-код. Просто используйте тег img как в обычном HTML. В качестве описания можно поставить произвольной сложности фрагмент HTML-текста, нужно только преобразовать его при помощи вот этой утилиты: http://www.htmlescape.net/stringescape_tool.html прежде чем вставлять в настройки скрипта (это нужно потому что он вписывается внутрь javascript-кода, а javascript свои правила насчёт некоторых символов в тексте)

Кроме того, в сам пост выше или ниже тегов script можно также писать что угодно, поскольку это будет просто обычная текстовая часть поста.

PANIC

Спасибо! сейчас всё работает :)

FUSESOUND

Здравствуйте пишу не по теме. Увидел у Вас в шапке меняется описание для страницы, как сделать подобное?!
И откуда берётся описание для шапки?! Это можно сделать для страницы или ярлыков?!

Clr

@FUSESOUND:
Ответил отдельным постом. Описание выбирается случайным образом.
Если требуется выводить разный текст для разных страниц, можно непосредственно в шаблоне выбирать из нескольких вариантов текста на основе URL страницы. Если вам это нужно, могу описать это подробно.

FUSESOUND

Спасибо, нужно очень!
Буду благодарен!
Думаю я не совсем правильно написал - для ярлыков нет смысла делать потому что у нас титлы главной и ярлыков одинаковы.
А вот у отдельной страницы есть своё название...

Clr

Опубликовал.

Елена

Мне кажется это сложновато. Столько много всего. Тут сразу не разберешься. Я вообще собралась страницу для каждой рубрики делать. На одном блоге так и сделала. Правда это долго. А то что у вас для меня не совсем понятно. Не знаю стоит ли экспериментировать?

Илюха

Огромное спасибо, поставил, настроил стили - просто шикарно вышло! :)

Levchun

А есть какой-нибудь скриншот - посмотреть, как это выглядит в живую.

Vlad

Вадим, практикуешь ли ты рубрику "Вопрос - ответ" по статьям своего блога. У меня возник вопрос, связанный с реализации отдельных рубрик (отдельных страниц) на платформе blogspot.com. За основу я взял твой скрипт. Проблема заключается в том, что для последних постов, на отдельных страницах не отображается их изображение, а только заголовок и краткое описание. Ссылку на блог в этом комментарии не буду оставлять. Но если, ты сталкивался с подобной проблемой (если её таковой можно назвать), был бы весьма благодарен, если поможешь. Слежу за твоим блогом! Хорошая работа!

Vlad

в продолжении к моему предыдущему сообщению: http://in-casual-notes.blogspot.com/p/var-itocsiteurl-httpin-casual-notes_15.html

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

Vlad

Разобрался. Проблема заключалась в том, что ты исключал хранилище "googleusercontent" (что бы в отображение миниатюр постов, не выводились 1-пиксельные счетчики гугл), но с недавних пор, все изображения, используемые в блоге гугл стал хранить в этом хранилище. Убрав это условие, все заработало.

NaStan

Сделал все, как написано, вместо краткого описания выводит:
Normal 0 false false false RU X-NONE X-NONE MicrosoftInternetExplorer4 /* Style Definitions */...
Уже сломал голову (((

NaStan

Все нормально, вставлял текст в сообщения копипастом прямо из ворда, если перебросить через блокнот, то все пучком!!! Автору скрипта - огромное спасибо, была бы кнопка - +1 в гугл!

chintsu

Привет. Добавил этот скрипт на отдельную страницу. При загрузке счетчик к "x/68" останаливается на разных значениях x (например 36 или 51), а в в консоли firebug ошибки типа "NetworkError: 503 Service Unavailable - http://chintsu-life.blogspot.com/feeds/posts/default/-/%D1%80%D0%B5%D0%BB%D0%B8%D0%B3%D0%B8%D1%8F?alt=json-in-script&callback=itoc_receiveReply_dfsyufsdxvc789j&max-results=999"(

igorkru

Здравствуйте
Пользуюсь Вашим скриптом, спасибо. Возникла необходимость отфильтровать посты по нескольким с ярлыкам. Например в блоге 10 постов, среди них 5 постов с ярлыком1, среди них есть 3 поста с ярлыком2 (ярлык1+ярлык2).
Подскажите пожалуйста решение как выдать на экран только эти 3 поста (включить условие отбора постов - "и ярлык1 и ярлык2")

Анонимный

Скрипт довольно интересный. Но я хотел узнать можно ли с помощью него создать вертикальное выпадающее меню, ну или горизонтальное. Просто было бы очень удобно. Идея в следующем:
Ярлыки разнести по категориям и выдавать единым целым. То есть имеются головные категории, нажимаем на одну из них, выпадает меню которое сдвигает ниже стоящие категории вниз а раскрывается список рубрик(ярлыков) при нажатии на рубрику открываются все сообщения ярлыка.
Такая схема вообще возможна или нужен совершенно другой скрипт?

Diana T

Очень грустно, что у меня ничего не получилось. Я подумала, что что-то сделала не так, и чтобы это проверить создала еще одну страницу и просто скопировала туда ваш код (со ссылкой на ваш http), но и тогда ничего не вышло. В чем может быть проблема? У меня блог на blogger

Сергей b@h

А как сделать чтобы картинка и ссылка на статью располагались на одной строке? Или вот допустим я имею публикации только с фотками, можно ли сделать ка кбы облако мини-фоток которые и являются ссылками на полные публикации? Т.е. мне не нужны ни названия ни описания, мне нужно только мини фотки-превью ведущие на полную версию

Сергей b@h

И еще, возможно ли добавлять фото не первое в сообщении, а выбирать например второе или третье?
Плюс размещать в две три колонки?

Сергей b@h

колонки это я про превью-ссылки, а то списком выходит очень длинно вниз

Distel

Здравствуйте, спасибо за полезные советы! А подскажите, как сделать карту блога не по тегам, а по датам (в хронологическом порядке), или ткните в ссылку, если не сложно. Спасибо!

Сергей b@h

Скажите, а как мне сделать чтобы не выводились названия постов со ссылкой а ссылкой была картинка? Очень нужно. Еще, можно ли обрезать программно картинки под единый формат? именно не менять размеры а как бы кадрировать? Использую так http://odnushka.blogspot.ru/p/var-itocsiteurl-http.html

Сергей b@h

И можно ли выводить список именно списком а не облаком?

Tatiana Zappa

Здравствуйте подскажите а как спрятать название ярзыка?
У меня раздел NEWS и там все сообщения с этим ярлыком ...
как спрятать?

Tatiana Zappa

решила проблему настройкой стелей =)

ReAtLat

А подскажите как настроить скрипт чтобы дата выводилсь в формате "ГОД" или "ГОД МЕСЯЦ"

Анатолій Нечипурук

А нам как быть?
http://bloguritest.blogspot.com/2015/01/itocjscss2-1_30.html

ReAtLat

Ээээ...

Ребта а кто нибудь поверял работу этого скрипта на мобильных браузер iPad?

У меня не работает!

ReAtLat

Товарищи проверил этот скрипт совершенно не работает на мобильных устройствах от Apple!!!

Отправить комментарий