Blogger相关文章模块

感谢GG(没找到你的地址)提醒:只要“:”这个符号是英文标点":",就能查询这个英文冒号前的中文,从而搜索相关文章。

这段JS是根据文章标题来过滤相关文章的,所以对中文支持不怎么样,效果见这篇文章

这个模块可以在侧边栏上显示出与当前正查看的文章相关的文章。只在某一项目页起作用。不太完美的地方就是要等一段时间才会把相关文章“过滤”出来。添加也非常简单,无须展开代码,找到侧边栏的任意两个b:widget之间,把下面的代码加上就行。

<b:widget id='BlogArchive2' locked='false' title='相关文章' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:title'>
<h2 id='relatedTitle'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='RelatedPosts'>
<div expr:id='data:widget.instanceId + "_ArchiveList2"'>
<b:if cond='data:style == "HIERARCHY"'>
<ul id='relatedArticles'><b:include data='data' name='interval'/></ul>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
<script language='JavaScript' type='text/javascript'>
// 'Related Article' hack by Hoctro - Nov 2006 http://hoctro.blogspot.com
// Some rights reserved - 2006
//Cross browser event handling written by Scott Andrew
function addEvent2(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
}
else {
elm['on' + evType] = fn;
}
}
function copyNodes2() {
var ele = document.getElementById('relatedArticles').cloneNode(true);
var aList = ele.getElementsByTagName('a');
var atext = "<data:blog.pageTitle/>";
var arr = new Array(3);
arr = atext.split(":",3);
var related = document.getElementById('relatedArticles');
var relTitle = document.getElementById('relatedTitle');
relTitle.firstChild.nodeValue = relTitle.firstChild.nodeValue + " about " + arr[1] + 's';
while (document.getElementById('relatedArticles').hasChildNodes()){
document.getElementById('relatedArticles').removeChild(document.getElementById('relatedArticles').firstChild);
}
var listLen = aList.length;
for (var j=0;j &lt; listLen;j++){
var txt = aList[j].firstChild.nodeValue;
var sarr1 = arr[1].substr(1, arr[1].length-1);
if(txt.search(sarr1) != -1) {
var litxt = document.createElement('li');
txtNode = aList[j].cloneNode(true);
litxt.appendChild(txtNode);
related.appendChild(litxt);
}
}
}
// Load event to run our script
addEvent2(window, 'load', copyNodes2, false);
</script>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<b:loop values='data:posts' var='i'>
<a expr:href='data:i.url'><data:i.title/></a>
</b:loop>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</b:loop>
</b:includable>
</b:widget>

via Hoctro's place

9 条评论:

Ryan Hooper 说...

试了一下,如果根据label来过滤的话效果应该会更好,不过对中文支持不好真是残念。。

GG 说...

如果能在内容中过滤标签的确不错,不过对中文的支持的确是残念……

GG 说...

哦,建议更新博客说下,只要“:”这个符号是英文标点":",就能查询这个英文冒号前的中文,从而搜索相关文章

大地 说...

还有这一行“relTitle.firstChild.nodeValue = relTitle.firstChild.nodeValue + " about " + arr[1] + 's';”

可以变更成中文:

relTitle.firstChild.nodeValue = relTitle.firstChild.nodeValue + " 有关 " + arr[1] + ':';

在中文博客上看得更恰当

GG 说...

晕,感谢我什么啊,还是超级感谢你了,大家都跟着你的博客学着做博客了~~~

我做的是个同志博客,在你这里公布不恰当,所以不要公布了~~呵呵

GG 说...

还有个问题,怎么这样显示的相关文章我博客上最多显示篇,而你的示例文章显示了很多篇文章?

GG 说...

明白了,似乎这个只能显示一定范围内的最近发布的文章,例如你的博客里的示例文章只显示到了UnderWater模板,而后面以blogger beta开头的文章还有好多篇。

问题是,如果你博客文章真的很多,那么这个hack如何调整尽量多显示相关文章的链接呢?不然这个hack不是没有什么意义?对于文章特别多的博客?
例如我那个博客200多篇文章,找前面比较早的一篇文章,开头都是tv:,但是相关文章没有文章,因为以tv:开头的文章都是个把月前的文章,最近没有发表类似文章……

IwfWcf 说...

正如GG所说,感觉还是要继续加强,要不是效果如你所演示的这样就显得没有什么意义了

匿名 说...

顶一个!