October 25, 2011

Blogger的美化─加入「相關文章」

通常我們閱覽一些部落格的時候,在文章的結尾的地方,通常會秀出了一些站內相關文章的列表,讓你可以繼續點選來看,這個作法可以讓你對這個部落格多一些認識。我們就來看看是怎麼作到的。

這個功能要透過「範本」中「修改HTML」的功能來達成。在修改前,請先將範本作好備份。進入修改功能後,記的勾選「展開小裝置範本」。

我們利用 Ctrl+F 先找到 </head> 然後在它的上方貼入底下的程式碼,程式碼裏面藍色的相關文章可以換成你想用的字詞。

<!-- 加入相關文章-->
<script type='text/javascript'>
//<![CDATA[
var relatedPostsNum = 0;
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedDates = new Array();

function RelatedLabels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedPostsNum] = entry.title.$t;
relatedDates[relatedPostsNum] = entry.published.$t.substr(0,10);
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel == 'alternate') {
relatedUrls[relatedPostsNum] = entry.link[j].href;
relatedPostsNum++;
break;
}
}
}
}

function RemoveDuplicatedPosts(PostUrl) {
var tmpUrls = new Array(0);
var tmpTitles = new Array(0);
var tmpDates = new Array(0);
function contains(a, e) {
for(var j = 0; j < a.length; j++)
if (a[j]==e)
return true;
return false;
}
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmpUrls, relatedUrls[i]) && PostUrl != relatedUrls[i]) {
tmpUrls.length += 1;
tmpUrls[tmpUrls.length - 1] = relatedUrls[i];
tmpTitles.length += 1;
tmpTitles[tmpTitles.length - 1] = relatedTitles[i];
tmpDates.length += 1;
tmpDates[tmpDates.length - 1] = relatedDates[i];
}
}
relatedTitles = tmpTitles;
relatedUrls = tmpUrls;
relatedDates = tmpDates;
}
function ShowRelatedPosts(PostUrl) {
RemoveDuplicatedPosts(PostUrl);
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if (relatedTitles.length > 0) {
document.write('相關文章: <ul>');
while (i < relatedTitles.length && i < 5) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a> - ' + relatedDates[r] + '</li>');
if (r < relatedTitles.length - 1)
r++;
else
r = 0;
i++;
}
document.write('</ul>');
}
}
//]]>
</script>
<!-- 加入相關文章-->

接著我們再找到底下所黑色字體程式碼的位置,然後將紅色字體的程式碼放進去。其中 max-results=5 控制相關文章的數量,需要顯示多一點,就將5改成你所需要的數值。

<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 != &quot;true&quot;'>,</b:if>
<!-- 加入相關文章 -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=RelatedLabels&amp;max-results=5&quot;' type='
text/javascript'/>
</b:if>
<!-- 加入相關文章 -->
</b:loop>
</b:if>

最後一個步驟,決定相關文章列出的位置,通常是放在文章的結尾的地方,所以我們先找到 <data:post.body/> 這個位置,在下方放入下面這段程式碼後,修改的工作就結束了,記得要將範本存檔後再退出。

<!-- 加入相關文章 -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
ShowRelatedPosts(&#39;<data:post.url/>&#39;);
</script>
</b:if>
<!-- 加入相關文章 -->

「Blogger的美化」系列筆記

參考網站:睡覺吹泡泡 章魚約翰的無限光音

0 意見:

Post a Comment

STAY WITH US

 
;