среда, 6 мая 2009 г.

Добавление favicon для ссылок с использованием javacript

При описании стиля для дружественных ссылок возник вопрос по автоматическому добавлению соответствующего favicon. Совместными усилиями с r1mson и aam β-развитием этой темы стал javacript добавляющий к ссылкам favicon с сайта на который они ссылаются.

Скрипт размещается в шаблоне HTML перед закрывающим тегом </body>:
<script type='text/javascript'>
//<![CDATA[
  var allUrls = document.evaluate(
    '//div[contains(@class,"favicon")]//a[count(img)=0]',
    document,
    null,
    XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
    null);

  for (i = 0; i < allUrls.snapshotLength; i++) {
    var thisUrl = allUrls.snapshotItem(i);
    var urlHref = thisUrl.getAttribute('href');
    if (urlHref) {
      urlHref = urlHref.replace(/^(.*:\/\/[^\/]*).*/, '$1/favicon.ico');
      thisUrl.setAttribute('style', 'padding-left:20px;text-indent:0px;background-position:left center;background-repeat:no-repeat;background-size:16px;background-image:url('+urlHref+');');
    }
  }
//]]>
</script>

<!-- Добавить перед этим тегом -->
</body>

Скрипт будет действовать на ссылки, которые находятся внутри элементов со стилем favicon.
Для более точного указания области действия необходимо поставить флажок 'Расширить шаблоны виджета'. После этого найти нужные виджеты и добавить стиль favicon.
Для содержимого статьи:
<div class='post-body entry-content favicon'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Для общих новостей:
<b:widget id='HTML1' locked='false' title='Общие записи' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content favicon'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>


После этого проверяем. Если Ваши ссылки ведут на сайты с favicon, то выглядеть они будут примерно так:


Известные ошибки:
* если у сайта нет favicon.ico, то перед ссылкой будет 20 пикселей пустого места.

Особенности:
* для ссылок содержащих картинки, favicon добавляться не будет,
* кавычки, если есть, должны входить в состав ссылки.

2 комментария:

r1mson комментирует...

>> * для ссылок ведущих с картинок тоже будет добавлен favicon.

Без картинок:

//div[contains(@class,"favicon")]//a[count(img)=0]

Смолов Илья комментирует...

Спасибо, поправил.

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