看了Hoctro's类似功能的Blogger Hack后,我首先有了这样想法。不幸的是,他要求我们去更改所有帖子的标题,让每一个相关文章的标题都有个相同的前缀。我想应该可以通过帖子的标签将并相关帖子显示出来。最后,我用了Json的新方法来做。 我也看过一些通过Json方法而做的Blogger Hacks,我将通过他们来分析Json方法是如何做到的。
(注:如果你的标签使用了Blogger的问号(?)、斜杠)/)等保留字的法,这可能不能正常起作用。在这里,我不能编辑他们。)
先首,进入Blogger 布局里的“修改HTML”(Edit HTML),将下面的代码粘贴到头部,即<head></head>中,(最好直接粘贴在</head>的前面。)
点击保存,然后勾选“扩展小工具”(Expand Widget Template)复选框,找到下面的代码。
替换成下面的代码,红色粗体为我增加的。
保存它,然后回到模板布局(Layout)下,增加一个HTML/Javascripts的小工具(Widget)。我是在博客帖子下面增加的。在弹出的对话框的上面代码区内,拷贝下在的代码进入。
现在,再回到模板(Template)=>修改HTML(Edit HTML)下,勾选“扩展小工具”(Expand Widget Template)复选框,并找到你刚才加入的HTML/Javascripts小工具。它看出来类似下面的代码:(注:粗体红色部分为新增加的代码)
你可以增加与减少显示相关帖子的数量。在这个代码框中,你可以改变 i < 20 与max-results=10的值,来改变显示数量,而视你的网页情况而定。数字太大,会影响你的页面加载速度。
(注:这里的我代表:原作者PurpleMoggy)
Read rest of entry(全文阅读)...
(注:如果你的标签使用了Blogger的问号(?)、斜杠)/)等保留字的法,这可能不能正常起作用。在这里,我不能编辑他们。)
先首,进入Blogger 布局里的“修改HTML”(Edit HTML),将下面的代码粘贴到头部,即<head></head>中,(最好直接粘贴在</head>的前面。)
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
点击保存,然后勾选“扩展小工具”(Expand Widget Template)复选框,找到下面的代码。
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
替换成下面的代码,红色粗体为我增加的。
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
保存它,然后回到模板布局(Layout)下,增加一个HTML/Javascripts的小工具(Widget)。我是在博客帖子下面增加的。在弹出的对话框的上面代码区内,拷贝下在的代码进入。
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
现在,再回到模板(Template)=>修改HTML(Edit HTML)下,勾选“扩展小工具”(Expand Widget Template)复选框,并找到你刚才加入的HTML/Javascripts小工具。它看出来类似下面的代码:(注:粗体红色部分为新增加的代码)
<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
你可以增加与减少显示相关帖子的数量。在这个代码框中,你可以改变 i < 20 与max-results=10的值,来改变显示数量,而视你的网页情况而定。数字太大,会影响你的页面加载速度。
(注:这里的我代表:原作者PurpleMoggy)