воскресенье, 30 сентября 2012 г.

Добавление авто-подписи к каждому сообщению на blogspot

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

В blogspot можно создать шаблон, который используется при создании новых сообщений. Но если вы когда-нибудь захотите изменить авто-подпись, придется править ВСЕ сообщения вручную. Других стандартных способов для решения этой проблемы я не нашел и .. изобрел свой :)

Для этого было решено воспользоваться JavaScript для динамического изменения DOM (Document Object Model) страницы. JavaScript можно добавить на блог как гаджет в его дизайнере:



Подсмотрев код HTML блога установил, что все посты блога заключены в элемент DIV с классом "post-body entry-content". Этого абсолютно достаточно знать, что бы как я, не зная JavaScript (лишь смутные представления) при помощи поисковика накодить следующий скрипт:

<script type='text/javascript'>
  // Тест, что DIV элементы скриптом находятся:
  // var posts = document.getElementsByClassName("post-body entry-content");
  // document.write("Posts: " + posts.length);

  var posts = document.getElementsByClassName("post-body entry-content");
  for (var i=0; i<posts.length; i++) {
    newDiv = document.createElement("div");

    // a) Содержимое DIV можно наполнить так:
    // newLine1 = document.createTextNode("Этот текстовый элемент создан при помощи createTextNode()");
    // newDiv.appendChild(newLine1);

    // b) но мы воспользуемся другим способом: newDiv.innerHTML = '<li>text</li>';
    str = "<span style='font-size: smaller;'>Это первая строка HTML-кода.</span><BR/><span style='font-size: smaller;'>Вторая строка.</span>";
    newDiv.innerHTML = str;

    // Добавим созданный DIV после DIV-сообщения.
    // К сожалению, не существует insertAfter-функции, поэтому эмулируем ее с помощью "parentElement" и "nextSibling":
    posts[i].parentElement.insertBefore(newDiv, posts[i].nextSibling);
  }
</script>


* This source code was highlighted with Source Code Highlighter.


Название в окне настроек гаджета я оставил пустым - теперь о наличии скрипта можно только догадываться.


Результат вы можете посмотреть на моем клипарт-блоге

Ссылки по теме:
Document Object Model (http://en.wikipedia.org/wiki/Document_Object_Model)
document.getElementsByClassName (https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName)
Adding elements to the DOM (http://www.javascriptkit.com/javatutors/dom2.shtml)

Комментариев нет: