Написал расширение (widget) для тем blogger'а. Расширение отображает список постов похожих по меткам. Данное расширение отличается от всех прочих Related Posts Widget'ов тем, что
очень легковесно и не замедляет загрузку страницы браузером, так как выполняет дополнительные запросы к серверу параллельно (асинхронно) с загрузкой страницы. Более того, записи сортируются не только с учетом даты написания постов, но и
с учетом релевантности (по меткам). Так как у меня несколько блогов и мне не хочется заниматься рутиной, то я постарался написать виджет как можно более простым для установки.
Итак, чтобы установить это расширение в своем блоге, необходимо произвести две довольно простые модификации HTML шаблона (HTML Template'а). Для этого нужно открыть
Настройки (Settings) -> Макет (Layout) -> Изменить HTML. Перед тем как менять что-то далее, сделайте резервную копию шаблона (
Загрузить весь шаблон)! После чего нужно пометить галочкой
Расширить шаблоны виджета (Expend Widget Templates). После чего можно приступать к редактированию:
1. В поле с текстом шаблона нужно найти строку
<data:post.body/>. И вот сразу за этой строкой нужно аккуратно вставить следующий код:
<div caption='Похожие темы:' id='akRelatedPosts' max='8'/>
<b:if cond='data:blog.pageType == "item"'>
<script language='javascript' type='text/javascript'>
(function(_1,_2){var _3={};var _4=_2.length;var _5=function(_6){var _7="([0-9]{4})(-([0-9]{2})(-([0-9]{2})(T([0-9]{2}):([0-9]{2})(:([0-9]{2})(.([0-9]+))?)?(Z|(([-+])([0-9]{2}):([0-9]{2})))?)?)?)?";var d=_6.match(new RegExp(_7));var _9=0;var _a=new Date(d[1],0,1);if(d[3]){_a.setMonth(d[3]-1)}if(d[5]){_a.setDate(d[5])}if(d[7]){_a.setHours(d[7])}if(d[8]){_a.setMinutes(d[8])}if(d[10]){_a.setSeconds(d[10])}if(d[12]){_a.setMilliseconds(Number("0."+d[12])*1000)}if(d[14]){_9=(Number(d[16])*60)+Number(d[17]);_9*=((d[15]=="-")?1:-1)}_9-=_a.getTimezoneOffset();time=(Number(_a)+(_9*60*1000));return Number(time)};var _b=function(){var _c=[];for(var i in _3){_c.push(_3[i])}if(_c.length<1){return}var _e=document.getElementById("akRelatedPosts");if(!_e){return}var _f=_e.getAttribute("max")||5;_c=_c.sort(function(a,b){var _12=b.weight-a.weight;if(_12!=0){return _12}return b.date-a.date});var s="<ul>";for(var i in _c){if(_f--<1){break}var _14=_c[i];s+="<li><a href='"+_14.href+"'>"+_14.title+"</a></li>"}s+="</ul>";var _15=_e.getAttribute("caption");s="<span class='caption'>"+_15+"</span>"+s;_e.innerHTML=s};var _16=function(_17){for(var i in _17.feed.entry){var _19=_17.feed.entry[i];var _1a=_19.id["$t"];var _1b=_3[_1a];if(_1b){_1b.weight++}else{var _1c;for(var _1d in _19.link){if(_19.link[_1d].rel=="alternate"){_1c=_19.link[_1d].href;break}}if(_1c==_1){continue}_1b={weight:1,title:_19.title["$t"],date:_5(_19.published["$t"]),href:_1c};_3[_1a]=_1b}}if(--_4==0){_b()}};var _1e=function(_1f){var _20;try{_20=new XMLHttpRequest()}catch(excp1){try{_20=new ActiveXObject("Msxml2.XMLHTTP")}catch(excp2){try{_20=new ActiveXObject("Microsoft.XMLHTTP")}catch(excp3){_20=false}}}var _21=function(){if(_20.readyState==4){if(_20.status==200){_16(eval("("+_20.responseText+")"))}}};_20.open("GET",_1f,true);_20.onreadystatechange=_21;_20.send(null)};for(var _22 in _2){_1e(_2[_22])}} <!-- = = = = = endoffunc = = = = = = -->
)("<data:blog.url/>",[
<b:loop values='data:post.labels' var='label'>
"/feeds/posts/default/-/<data:label.name/>?alt=json&max-results=5"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
]);
</script>
</b:if>
Должно получиться что-то типа вот этого (на картинку можно нажать и нормально рассмотреть):
Обратите внимание на caption='...' и max='8' Значения в кавычках можно изменить. Значение для
caption определяет текст, который будет высвечиватся над списком похожих постов. Значение
max определяет максимальное количество элементов в списке.
2. Это изменение вобщем-то и не обязательно, все должно заработать и без него. Но выглядеть оно будет не очень. Поэтому, этим шагом производится настройка внешнего вида. Для этого необходимо найти строку
]]></b:skin>. И
перед(!) этой строкой вставить вот такой кусок настроек:
#akRelatedPosts {
padding-top: 20px;
}
#akRelatedPosts .caption {
font-weight: bold;
}
#akRelatedPosts ul {
margin: 0;
}Если есть желание и знание css, то можно тут подкрутить стили как душе угодно. Должно получиться как-то вот так:
Это все. Можно сохранять шаблон и пробовать.
Сообщения
