Блоговод | Виджет Related Posts by Categories (Похожие статьи по категориям) для Blogger’а

Виджет Related Posts by Categories (Похожие статьи по категориям) для Blogger’а

Ещё один виджет из серии “Related Posts”. Этот виджет мне нравится даже больше чем тот, что я описывал в предыдущей статье. Виджет разработан Hoctro, слегка переработан для удобства Джеком и доработан мной для устранения бага, связанного с использованием виджета в Unicode блогах (non-English).

Инструкция по установке

Зайдите в Панель инструментов > Макет > Изменить HTML, установите флажок “Расширить шаблоны виджета”, найдите код <data:post.body /> и вставьте код, представленный ниже, сразу после найденного кода.

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
  <!-- *****************//hoctro.blogspot.com*****Jan,2007****************** -->
  <!-- *****************Related Articles by Labels - Take Two****************** -->
 
  <!--
   Modified by JackBook.Com to make it easier to use.
  1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
  2. The current article will also be listed, now it's no more.
  -->
 
  <!-- Modified by minimusX to fixing problems using in Unicode blogs -->
<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/>
<div id='hoctro'>
 
    Widget by <u><noindex><a target="_blank" href='//blogcoding.ru/35671b/C0YVQQxOHl1ZUhFEDExQVQxUEkILEh0CWw4=/'>Hoctro</a></noindex></u> | <u><noindex><a target="_blank" href='//blogcoding.ru/35671b/C0YVQQxOHkJBRktcAgFZWwxcChwHCV5O/' title='Related Posts on Blogger Modified by JackBook.Com. Read More?'>Jack Book</a></noindex></u> | <u><a href='//blogcoding.ru/' title='Related Posts on Blogger Modified by minimus Read More?'>minimus</a></u>
   </div>
 
   <script type='text/javascript'>
 
   var homeUrl3 = "<data:blog.homepageUrl/>";
   var maxNumberOfPostsPerLabel = 4;
   var maxNumberOfLabels = 10;
 
   <b:if cond='data:blog.pageType == "item"'>
    maxNumberOfPostsPerLabel = 100;
    maxNumberOfLabels = 3;
   </b:if>
 
   function listEntries10(json) {
     var ul = document.createElement('ul');
     var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel;
     for (var i = 0; i < maxPosts; i++) {
       var entry = json.feed.entry[i];
       var alturl;
 
       for (var k = 0; k < entry.link.length; k++) {
         if (entry.link[k].rel == 'alternate') {
           alturl = entry.link[k].href;
           break;
         }
       }
       var li = document.createElement('li');
       var a = document.createElement('a');
       a.href = alturl;
 
    if(a.href!=location.href) {
     var txt = document.createTextNode(entry.title.$t);
     a.appendChild(txt);
     li.appendChild(a);
     ul.appendChild(li);
    }
     }
     for (var l = 0; l < json.feed.link.length; l++) {
       if (json.feed.link[l].rel == 'alternate') {
         var raw = json.feed.link[l].href;
         var label = decodeURI(raw.substr(homeUrl3.length+13));
         var k;
         for (k=0; k<20; k++) labellabel = label.replace("%20", " ");
         var txt = document.createTextNode(label);
         var h = document.createElement('b');
         h.appendChild(txt);
         var div1 = document.createElement('div');
          div1.appendChild(h);
         div1.appendChild(ul);
         document.getElementById('data2007').appendChild(div1);
       }
     }
   }
   function search10(query, label) {
 
   var script = document.createElement('script');
   script.setAttribute('src', query + 'feeds/posts/default/-/'
    + label + '?alt=json-in-script&amp;amp;callback=listEntries10');
   script.setAttribute('type', 'text/javascript');
   document.documentElement.firstChild.appendChild(script);
   }
 
   var labelArray = new Array();
   var numLabel = 0;
 
   <b:loop values='data:posts' var='post'>
     <b:loop values='data:post.labels' var='label'>
       textLabel = "<data:label.name/>";
 
       var test = 0;
       for (var i = 0; i < labelArray.length; i++)
       if (labelArray[i] == textLabel) test = 1;
       if (test == 0) {
          labelArray.push(textLabel);
          var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
                 labelArray.length : maxNumberOfLabels;
          if (numLabel < maxLabels) {
             search10(homeUrl3, textLabel);
             numLabel++;
          }
       }
     </b:loop>
   </b:loop>
   </script>
  </div>
</div>
</b:if>

100

101

102

103

104

105

<b:if cond='data:blog.pageType == "item"'>

<!--

Modified by JackBook.Com to make it easier to use.

1. Now, users don't need to change anything to use this widget. just copy and paste, and done!

2. The current article will also be listed, now it's no more.

-->

<h3>Related Posts by Categories</h3>

Widget by <u><noindex><a target="_blank" href='//blogcoding.ru/35671b/C0YVQQxOHl1ZUhFEDExQVQxUEkILEh0CWw4=/'>Hoctro</a></noindex></u> | <u><noindex><a target="_blank" href='//blogcoding.ru/35671b/C0YVQQxOHkJBRktcAgFZWwxcChwHCV5O/' title='Related Posts on Blogger Modified by JackBook.Com. Read More?'>Jack Book</a></noindex></u> | <u><a href='//blogcoding.ru/' title='Related Posts on Blogger Modified by minimus Read More?'>minimus</a></u>

</div>

var homeUrl3 = "<data:blog.homepageUrl/>";

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 10;

<b:if cond='data:blog.pageType == "item"'>

maxNumberOfPostsPerLabel = 100;

maxNumberOfLabels = 3;

</b:if>

function listEntries10(json) {

var ul = document.createElement('ul');

var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel;

for (var i = 0; i < maxPosts; i++) {

var entry = json.feed.entry[i];

var alturl;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

alturl = entry.link[k].href;

break;

}

var li = document.createElement('li');

var a = document.createElement('a');

a.href = alturl;

if(a.href!=location.href) {

var txt = document.createTextNode(entry.title.$t);

a.appendChild(txt);

li.appendChild(a);

ul.appendChild(li);

}

for (var l = 0; l < json.feed.link.length; l++) {

if (json.feed.link[l].rel == 'alternate') {

var raw = json.feed.link[l].href;

var label = decodeURI(raw.substr(homeUrl3.length+13));

var k;

for (k=0; k<20; k++) labellabel = label.replace("%20", " ");

var txt = document.createTextNode(label);

var h = document.createElement('b');

h.appendChild(txt);

var div1 = document.createElement('div');

div1.appendChild(h);

div1.appendChild(ul);

document.getElementById('data2007').appendChild(div1);

}

function search10(query, label) {

var script = document.createElement('script');

script.setAttribute('src', query + 'feeds/posts/default/-/'

+ label + '?alt=json-in-script&amp;callback=listEntries10');

script.setAttribute('type', 'text/javascript');

document.documentElement.firstChild.appendChild(script);

}

var labelArray = new Array();

var numLabel = 0;

<b:loop values='data:posts' var='post'>

<b:loop values='data:post.labels' var='label'>

textLabel = "<data:label.name/>";

var test = 0;

for (var i = 0; i < labelArray.length; i++)

if (labelArray[i] == textLabel) test = 1;

if (test == 0) {

labelArray.push(textLabel);

var maxLabels = (labelArray.length <= maxNumberOfLabels) ?

labelArray.length : maxNumberOfLabels;

if (numLabel < maxLabels) {

search10(homeUrl3, textLabel);

numLabel++;

}

</b:loop>

</script>

</div>

</b:if>

Сохраните шаблон и посмотрите на результат.

Настройки виджета

Две переменные, показанные ниже, позволяют управлять внешним видом и временем загрузки виджета

var maxNumberOfPostsPerLabel = 4; 
var maxNumberOfLabels = 10;

1 2	var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel – количество статей выводимых по каждой категории.

maxNumberOfLabels – глубина сканирования статей на предмет соответствия теме. Чем глубже копаешь, тем больше найдёшь. С другой стороны – чем глубже копаешь, тем дольше получаешь результат. Здесь главное найти “золотую середину”.

P.S. Пока готовил статью к публикации, Hoctro внёс изменения в свой виджет. Изменения фактически идентичны моим, разница лишь в названии функции – результат тот-же.

Похожие статьи:

07.08.2008 / Виджеты (Blogger) / Метки: Blogger, виджет

Поделитесь статьёй

Об авторе

minimus

Lead Frontend Developer (ReactJS, NodeJS)

[title element="h4"] Комментарии (15) [/title]

Arrow – 02.03.2009 - 12:00:

ответ

А не подскажете, как можно прикрутить такой виджет не просто снизу статьи, а так, чтобы попадало прям в RSS-поток блога ?
- minimus – 02.03.2009 - 12:59:
  
  ответ
  
  В Blogger это невозможно, хотя бы потому, что этот виджет сам берёт данные из RSS. Вообще, в Blogger управлять данными RSS невозможно 🙁 (в отличие от WordPress 🙂 )
  
  Впрочем, если извратиться и вставить код прямо в текст статьи, то может, что-то и выгорит … 😉
Arrow – 02.03.2009 - 13:55:

ответ

Спасибо за ответ!
Очень жаль 🙁
comely – 25.11.2009 - 22:16:

ответ

Изучила Вашу статью, поставлю теперь у себя этот виджет.
Подскажите как поставить виджет “голосование” после поста (Действия, забавно, интересно и т. д.)
- comely – 26.11.2009 - 00:27:
  
  ответ
  
  В элементах страницы я добавила эту функцию, но шаблон у меня не классический, поэтому не видно этой панельки. А что сделать, чтоб увидеть? 🙂
  - minimus – 26.11.2009 - 18:18:
    
    ответ
    
    О какой панельке идёт речь? Со звёздочками или с похожими статьями?
Japas – 15.05.2010 - 19:28:

ответ

Здравствуйте!
у меня в шаблоне для строчки <p><data:post.body /></p> нет

<p> и </p>, но есть такое:

<div class=’post-body entry-content’>
<data:post.body/>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>
и выше и ниже нет открывающих и закрывающих тэгов<p>
Подскажите, как здесь можно поступить
- minimus – 15.05.2010 - 21:28:
  
  ответ
  
  Там и не должно быть тегов p, наверное при переносе вклинилось … 🙁
Japas – 21.05.2010 - 09:27:

ответ

Спасибо за виджет, всё заработало. Хотел бы спросить у Вас, где в шаблоне задать форматирование для строки “Похожие статьи:” — цвет, кегль, шрифт.
Как можно изменить, а то у меня она как бельмо на глазу, какой то вариант по умолчанию?
- minimus – 21.05.2010 - 16:16:
  
  ответ
  
  Строка 15! Задайте style для h3.
BSB – 11.08.2010 - 04:03:

ответ

Привет!
Я не нашел такие тэги, которые ты описываешь в статье. Статьи у меня выводятся через тэг
<b:widget id=’Blog1′ locked=’true’ title=’Сообщения блога’ type=’Blog’/>
Как быть в таком случае?
- minimus – 11.08.2010 - 08:42:
  
  ответ
  
  Установите флажок “Расширить шаблоны виджета”- внутри кода виджета должен быть этот тег, он является базовым для Blogger, поэтому должен быть обязательно.
akkad – 14.07.2011 - 17:38:

ответ

Не работает. Когда сохраняю выдаёт ошибку “Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
Сообщение об ошибке в XML: The content of elements must consist of well-formed character data or markup.” И код на странице не отображается у Вас, приходится копать.
- minimus – 15.07.2011 - 12:40:
  
  ответ
  
  Это обычное дело … Замените в коде все знаки < и > на их представления: (амперсанд)lt; и (амперсанд)gt;
  (амперсанд) замените на &
  - massimo_indie – 22.01.2014 - 16:16:
    
    ответ
    
    Тоже такое было. Заменил, как ты сказал. Ничего не работает, никаких изменений на страницах постов.