Blogger - Создание содержания статьи (ссылки на части документа)

В этой статье обсуждается проблема создания ссылок внутри поста написанного в блоггере. Проблема невозможности создавать внутренние ссылки и ссылки с относительными путями в редакторе Blogger-а. Эта проблема затрудняет делает невозможным создание содержания статей, ссылок-сносок на различные части документа и т.п., в постах публикуемых на blogspot.com! Как частичное решение этой проблемы, я предлагаю воспользоваться скриптом, позволяющим создавать содержание статьи автоматически (с правильными ссылки на части документа). При желании вы можете модифицировать его и под другие, подобные нужны, например создание блока ссылок-сносок и т.п. ...

Преамбула

Недавно писал очень длинный пост, который представлял собой очередной "How-to" по программированию.  Статья поста была разбита на 7-мь частей, в каждой из которой обсуждались отдельные аспекты программирования. Я решил сразу, в начале поста, перечислить эти части, чтоб читатель знал, какие темы в ней будут затронуты. Я так и сделал - добавил содержание в котором перечислил название частей статьи.

Когда статья была закончена и я ее перечитывал перед публикацией, мне в голову прошла вполне логичная идея - сделать названия статей в содержании ссылками к началу каждой части. Не долго думая, я открыл редактор блоггера в режиме отображения HTML кода. Добавил перед началом каждой части статьи закладки - <a name="part1"></a>, <a name="part2"></a> и т.д., для каждой части. А текст пунктов содержания сделал ссылками - <a href="#part1>Часть 1</a>, <a href="#part2>Часть 2</a> и т.д.
Потом я переключился опять в визуальный режим редактирования поста, сделал несколько исправлений, сохранил изменения и нажал просмотр... и тут меня ждал неприятный сюрприз - блоггер изгадил! мои ссылки!!! По добавлял к ним урлы, превратив их во внешние и полностью не рабочие ссылки (ведущие хрен знает куда!). Расставленные закладки тоже изменились - блоггер добавил к ним href="http://bla-bla-bla/"!

Проблему с закладками можно было решить добавив к тегу, в котором заключен текст названия части,  атрибут  id="part1" в место тега <a name="...">,  но что делать с ссылками на эти закладки!? Блоггер вообще не понимает ссылки с относительными путями к которым относятся ссылки на части документа. Я писал так: <a href="#part1> и так <a href="/#part1> и даже так <a href=".#part1>, но результат был один и тот же - блоггер постоянно подставлял в ссылку http://www.blogger.com/.... :(

Для приличия я погуглил минут десять, но так  и не нашел решения  ...
Не желая тратить время на поиск, я решил сам написать скрипт который создавал бы содержание (оглавление - как вам угодно) статьи автоматически. Минут 20-ть и решение готово!
Вкратце, как это работает:
Скрипт ищет (сверху-вниз) в html-коде статьи текст заключенный в определенный тег, например h2, и создает из найденного список содержания.
Для того, чтоб отобразить созданное содержание в посте, добавляем, туда где оно должно появится тег (span, div, ...) с атрибут id и значением "jqblg_contents".

Пример работы скрипта прямо пред вами:


Содержание статьи
h2

Решение

Теперь о том как добавить этот скрипт в blogger и как с ним работать.

Добавление скрипта.
Зайдите в панель управления блогом на blogger-е и перейдите в раздел "Дизайн".
Кликните "Добавить гаджет" в самой нижней части шаблона:

В открывшемся окне найдите гаджет "HTML/JavaScript" и выберите его:

Вам откроется окно редактирования гаджета.
Добавьте код скрипта* в поле "Содержание", а поле "Название" оставьте пустым. Сохраните изменения:
код скрипта*

<script type="text/javascript">
//<![CDATA[ 
var ltt = String.fromCharCode(60); 
var rtt = String.fromCharCode(62); 

if(!window.jQuery){
document.write(ltt+'scr'+'ipt type="text/javascript" src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.3.2\/jquery.min.js"'+rtt+ltt+'/scr'+'ipt'+rtt);
}
//]]>
</script>

<script type="text/javascript"> 
//<![CDATA[ 
var ltt = String.fromCharCode(60); 
var rtt = String.fromCharCode(62); 
var output = $("#jqblg_contents"); 
var selector = output.text();  
var text_output = ltt+'ol style="text-align: left; list-style-type:none;"'+rtt+'\n';  
$(".post-body "+selector).each(function (i) {
text_output += ltt+'li'+rtt+ltt+'a href="#part' + i + '"' +rtt+ $(this).text() +ltt+'/a'+rtt+ltt+'/li'+rtt+'\n'; 
$(this).before(ltt+'a name="part' + i + '"'+rtt+ltt+'/a'+rtt);
});
text_output+=ltt+'/ol'+rtt; output.html(text_output); 
//]]>
</script>

Все, скрипт добавлен и готов к работе!

Как работать со скриптом.

Открываем пост в редакторе blogger и пишем статью.
Наверняка, по ходу написания, вы будете выделять названия частей и скорее всего это будет заголовок или подзалоговок. Предположим, что вы использовали заголовок, тогда у вас поучится что-то вроде:
---------------------------------------------------
Какая-то наша статья....

Часть первая

Текст первой часть
...
...

Часть вторая

Текст второй части
.....
....

и т.д. ....
---------------------------------------------
Теперь обозначим место где должно появляться содержание. Впишем там - "Содержание:"
Перейдем в режим редактирования HTML:

Отыщем в коде где мы вписали "Содержание:" и под ним добавим такой код:

<b>Содержание:</b>
<span id="jqblg_contents">h2</span>
......

......


где:

• id="jqblg_contents" - указывает, что именно этот тег должен использоваться для вывода содержания.
• span - тег в внутри которого будет выведен список содержания. Может быть и другой тег, например: div, article, section  и т.п. ... главное что он имел атрибут - id="jqblg_contents"!
• h2  - указывает какой тег был использован для выделения текста названий частей. Для заголовка это - h2, для первого подзаголовка - h3? для второго - h4. Так, что если решите выделить названия частей например подзаголовком, впишите - h3, вместо - h2, и все заработает!

Сохраните пост и перейдите в визуальный режим редактирования:

Вот что у вас будет в редакторе:

---------------------------------------------------
Какая-то наша статья....

Содержание:
h2

Часть первая

Текст первой часть
...
...

Часть вторая

Текст второй части
.....
....

и т.д. ....
---------------------------------------------

В редакторе содержание выводиться не будет, только в опубликованном посте или в режиме просмотра.

Давайте поверим как работает скрипт - нажмите на кнопу просмотр и  ... вуаля,  на месте "h2" появилось содержание с ссылками на части статьи!

Плюсы и минусы скрипта

Плюсы:

• Прост в установки
• Прост в использовании и настройке
• Автоматически создает содержание
• Автоматически меняет его, если меняются название частей

Минусы:

• Необходима поддержка JavaScript
• Может не работать в мобильной версии blogger-а

Кастомизация скрипта(настойка под свои нужды)

При желании, для обозначения тега в котором находится название части, вы можете использовать имя класса, вместо названия тега.
Например: пусть текст частей находится в теге "p" к которому добавлен класс с именем - "part".
Тогда, чтоб скрипт нашел ваши части и создал содержание, необходимо ему об этом указать в теле маркировочного тега:

<span id="jqblg_contents">.part</span>

Обратите внимание, перед именем класса необходимо добавить точку.

Если вы хотите изменить функциональность скрипта, добавив например возможность создания обратной ссылки от названия части к содержанию, тогда вам нужно будет разобраться в коде скрипта и дописать его.
Если вы знаете JS, тогда вы справитесь с этой задачей без труда! Но, как вы могли заметить, код скрипта не очень читабелен из-за того, что я по заменял символы "<" и ">" переменными ltt и rtt. Я это сделал в целях безопасности, чтоб блоггер не поковырял исходник скрипта и тем самым не испортил его!

Вот вариант скрипта без переменных ltt и rtt. Я думаю в таком виде вам будет проще разобраться с тем как работает скрипт и модифицировать его.

<script type="text/javascript">
//<![CDATA[ 
if(!window.jQuery){
 document.write(
  '<scr'+'ipt type="text/javascript" src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.3.2\/jquery.min.js">'+'</scr'+'ipt>'
 );
}
//]]>
</script>
<script type="text/javascript"> 
//<![CDATA[  
var output = $("#jqblg_contents"); 
var selector = output.text();  
var text_output = '<ol style="text-align: left; list-style-type:none;">\n';  
$(".post-body "+selector).each(function (i) {
 text_output += '<li><a href="#part' + i + '">' + $(this).text() +'</a></li>\n'; 
 $(this).before('<a name="part' + i + '"></a>');
});
text_output+='</ol>'; 

output.html(text_output); 
//]]>
</script>

Вот и все! Надеюсь вам понравится скрипт!