Виджет похожих статей является одним из наиболее важных и распространенных дополнений в блоге. Его наличие помогает удержать читателей на ресурсе и способствует лучшему ознакомлению с материалами блога.

Существует несколько способов вывода похожих сообщений блога в одном блоке. Об одном из них пойдет речь дальше.

Данный гаджет весьма прост в установке и не потребует каких-либо дополнительных правок. Между тем, это достаточно гибкий для дальнейших настроек скрипт, который действительно выводит к показу похожие статьи из той же рубрики, что и пост, к которому он приведен, а не просто отображает списки опубликованных ранее сообщений блога.

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

Установка виджета похожих статей:

Чтобы разместить виджет похожих по тематике статей, в административной панели вашего блога совершите путешествие: Дизайн > Изменить HTML. Так как требуется непосредственно правка шаблона, не поленитесь сделать его резервную копию.

Виджет оптимально и наиболее информативно смотрится в конце сообщений блога, а потому именно случай с таким размещением мы и рассмотрим. Для этого найдите в шаблоне отрезок кода <data:post.body/>. Напомню, что все поиски выполняются посредством сочетания клавиш CTRL+F. Обнаружив указанную выше строку, сразу после нее впишите следующий код виджета похожих статей:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
	<div class='similiar'>
	<div class='widget-content'>
	<br/>
	<div id='data2007840981'/>
	<div id='data2007840980'/><br/>
	<script type='text/javascript'>
	var headerN = "Похожие статьи:"; /* Заголовок виджета, когда в нём отображается более чем одна метка. */
	var header1 = "Еще статьи из категории \"__LABEL__\":"; /* Заголовок виджета, когда в нём отображается одна метка. Если в заголовке есть слово __LABEL__, то вместо него будет подставлено имя метки. */
	var header0 = ""; /* Текст, выводимый, если нет ни одной метки и ссылки. */
	var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; /* Адрес блога, откуда берём список постов. */
	var maxNumberOfPostsPerLabel = 5; /* Максимальное число постов, отображаемых для каждой метки. */
	var maxNumberOfLabels = 4; /* Максимальное число отображаемых меток. */
	var excludeEmptyLabels = true; /* Скрывать ли метки, для которых нет подходящих постов. true - скрывать, false - отображать. */
	var excludeLabels = []; /* Метки, которые не следует отображать. */

	/* Смена отображаемых имён.
	Здесь перечисляем соответствия реального имени метки и названия, которое будет показано на странице.
	Если для двух меток указать одно название, они при отображении склеятся в одну метку.
	Если метка здесь не перечисляется, то отображается под своим настоящим названием.
	*/
	var renameLabels = {};
	function is_in(item, array) {
	for (k in array)
	if (array[k] == item) return true;
	return false;
	}
	function label_title(label) {
	if (renameLabels[label])
	return renameLabels[label];
	return label;
	}
	totalLabels = 0;
	receivedReplies = 0;
	var receivedItems = [];
	var k_label;
	function labelReceived() {
	receivedReplies++;
	if (receivedReplies != totalLabels)
	return;
	var labelCount = 0;
	for (k_label in receivedItems) {
	var items = receivedItems[k_label];
	if (items.length == 0 &amp;&amp; excludeEmptyLabels)
	continue;
	labelCount++;
	}
	var labelCount1 = 0;
	for (k_label in receivedItems) {
	var items = receivedItems[k_label];
	if (items.length == 0 &amp;&amp; excludeEmptyLabels)
	continue;
	var ul = document.createElement(&#39;ul&#39;);
	var itemsCount = 0;
	for (var k_item in items) {
	item = items[k_item];
	var li = document.createElement(&#39;li&#39;);
	var a = document.createElement(&#39;a&#39;);
	a.href = item.href;
	var txt = document.createTextNode(item.title);
	a.appendChild(txt);
	li.appendChild(a);
	ul.appendChild(li);
	itemsCount++;
	if (itemsCount == maxNumberOfPostsPerLabel)
	break;
	}
	var txt = document.createTextNode(k_label);
	var h = document.createElement(&#39;b&#39;);
	h.appendChild(txt);
	var div1 = document.createElement(&#39;div&#39;);
	if (!(labelCount == 1 &amp;&amp; header1.search &amp;&amp; header1.search(/(LABEL)/) != -1))
	div1.appendChild(h);
	div1.appendChild(ul);
	document.getElementById(&#39;data2007840980&#39;).appendChild(div1);
	labelCount1++;
	if (labelCount1 == maxNumberOfLabels)
	break;
	}
	var txt;
	if (labelCount == 1 &amp;&amp; header1)
	txt = document.createTextNode(header1.replace("__LABEL__", k_label));
	else if (labelCount)
	txt = document.createTextNode(headerN);
	else if (header0)
	txt = document.createTextNode(headerN);
	if (txt)
	{
	var h = document.createElement("h4");
	h.appendChild(txt);
	document.getElementById(&#39;data2007840981&#39;).appendChild(h);
	}
	}
	function receiveReply_123(json) {
	var label = "";
	for (var l = 0; l &lt; json.feed.link.length; l++) {
	if (json.feed.link[l].rel == &#39;alternate&#39;) {
	var raw = json.feed.link[l].href;
	var label = raw.substr(homeUrl3.length+13);
	var k;
	for (k=0; k&lt;20; k++)
	label = label.replace(&quot;%20&quot;, &quot; &quot;);
	label = decodeURI(label);
	break;
	}
	}
	var labelTitle = label_title(label);
	if (typeof receivedItems[labelTitle] != "object")
	receivedItems[labelTitle] = [];
	for (var k in json.feed.entry) {
	var entry = json.feed.entry[k];
	var href = "";
	for (var kl in entry.link) {
	if (entry.link[kl].rel == "alternate") {
	href = entry.link[kl].href;
	break;
	}
	}
	if(href != "" &amp;&amp; href != location.href) {
	var item = { "href" : href, "title" : entry.title.$t};
	receivedItems[labelTitle].push(item);
	}
	}
	labelReceived();
	}
	function sendQueryForLabel(query, label) {
	var script = document.createElement(&#39;script&#39;);
	script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
	+ label +
	&#39;?alt=json-in-script&amp;callback=receiveReply_123&#39;);
	script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
	document.documentElement.firstChild.appendChild(script);
	}
	var parsedlabels = [];
	var labelsCount = 0;
	function list_items(textLabel) {
	if (labelsCount &gt;= maxNumberOfLabels ||
	is_in(textLabel, excludeLabels) ||
	is_in(textLabel, parsedlabels)) {
	labelReceived();
	return;
	}
	labelsCount++;
	parsedlabels.push(textLabel);
	sendQueryForLabel(homeUrl3, textLabel);
	}
	<b:loop values='data:posts' var='post'>
	<b:loop values='data:post.labels' var='label'>
	totalLabels++;
	</b:loop>
	</b:loop>
	<b:loop values='data:posts' var='post'>
	<b:loop values='data:post.labels' var='label'>
	list_items(&quot;<data:label.name/>&quot;);
	</b:loop>
	</b:loop>
	</script>
	</div>
	</div>
</b:if>

Произведя манипуляции по насыщению шаблона этим скриптом, сохранитесь и проверьте его отображение в блоге.

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