为防止网页过长，大概可以采用三种方法：1.分成更多的列，如綸太郞写的《文章分類太長了嗎?教你將它變成兩行》；2.让元素闭合，需要时再点击打开，具体见Abin写的《讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)》；3.三使用选项卡（Module Tabs）方式，让相关元素集合在同一个位置。前两种都有对应blogspot的教程，第三种我还没有看到，于是我试着能不能让最近留言、最近文章在同一个元素里以选项卡方式显示，折腾出这篇文章。
先说一下参考文章，因为我所做的只是把文章中提到的代码合到一起，实际上很简单。
PJBlog侧边栏整合tab(滑动)选项卡(增加多个调用)
「最新回應」模組 (Recent Comments)
最新文章模組「終極版」
1. 在后台新建一个HTML/javsscript元素，命令为“test”。
2. 把下面的代码复制到元素中。
<style type="text/css">
<!--
/*选项卡*/
#Tab1{
margin:0px;
padding:0px;
margin:1.6em auto;}
/*菜单class*/
.Menubox {
width:100%;
}
.Menubox ul{
margin:0px;
padding:0px;
}
.Menubox li{
float:left;
display:block;
cursor:pointer;
width:73px;
text-align:left;
font-weight:bold;
}
.Menubox li.hover{
color:#5b792c;
}
.Menubox_on {
color:#5b792c;
}
.Contentbox{
clear:both;
margin-top:10px;
border-top:none;
text-align:left;
}
.item-title a{
text-decoration:none;
}
.item-title a:hover{
text-decoration:underline;
}
-->
</style>
<script>
<!--
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>
<div id="Tab1">
<div class="Menubox">
<ul>
<li id="one1" onclick="setTab('one',1,3)" class="Menubox_on" title="顯示近期回應">近期回應</li>
<li id="one2" onclick="setTab('one',2,3)" title="顯示近期文章">近期文章</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_one_1">
<div id="newComments">
<noscript>failed!<br />Javascript not supported here!</noscript>
</div>
<script>
var nCommentStartIndex = 1;
var nCommentShow = 5;
function showRecentComments(nIndex) {
if (!nIndex)
nIndex = nCommentStartIndex;
var sFeedURL = '/feeds/comments/summary?orderby=published&start-index='+nIndex+'&max-results='+(nCommentShow+1)+'&alt=json-in-script&callback=generateComments';
var script = document.createElement('script');
document.getElementById('newComments').innerHTML = 'Loading <blink>...</blink>';
script.setAttribute('src', sFeedURL);
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
function generateComments(json) {
function compareentry(a,b) {
order= Date.parse(a.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT')) - Date.parse(b.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT'));
return 0-order;
}
var sHTML = '<ul>';
var sortentry = json.feed.entry.sort(compareentry);
var nIndex = parseInt(json.feed.openSearch$startIndex.$t);
var nTotalComment = parseInt(json.feed.openSearch$totalResults.$t);
for (var i = 0, Comment; Comment = sortentry[i]; i++) {
if (i >= nCommentShow)
break;
var authorname = Comment.author[0].name.$t;
var title = Comment.title.$t.substr(0,30);
var j = 0;
while (j < Comment.link.length && Comment.link[j].rel != "alternate")
j++;
var link = Comment.link[j].href;
var timestamp = Comment.published.$t.substr(0,10);
sHTML += '<li><span class="item-title"><strong>'+authorname+'</strong>: <a href="'+link+'">'+ title +'</a> <small>'+timestamp+'</small></span></li>';
}
sHTML += '</ul>';
sHTML += generateCommentLink(parseInt(json.feed.entry.length), nIndex, nTotalComment);
document.getElementById('newComments').innerHTML = sHTML;
}
function generateCommentLink(nFetch, nIndex, nTotalComment) {
var bOld = (nFetch > nCommentShow);
if (bOld) nFetch = nCommentShow;
var sResult = '<p align="right">回應 '+nIndex+'-'+(nIndex+nFetch-1)+', 共: '+nTotalComment+'. ';
if (nIndex > nCommentStartIndex)
sResult += '<a href="javascript:showRecentComments('+(nIndex-nCommentShow)+');" title="Newer Comments">«</a> ';
if (bOld)
sResult += '<a href="javascript:showRecentComments('+(nIndex+nCommentShow)+');" title="Older Comments">»</a>';
sResult += '</p>';
return sResult;
}
</script>
<script language="javascript">showRecentComments();</script>
</div>
<div id="con_one_2" style="display:none">
<div id="newPosts">
<noscript>failed!<br />Javascript not supported here!</noscript>
</div>
<script>
var nPostStartIndex = 1;
var nPostShow = 9;
function showRecentPosts(nIndex) {
if (!nIndex)
nIndex = nPostStartIndex;
var sFeedURL = '/feeds/posts/summary?orderby=published&start-index='+nIndex+'&max-results='+(nPostShow+1)+'&alt=json-in-script&callback=generatePosts';
var script = document.createElement('script');
document.getElementById('newPosts').innerHTML = 'Loading <blink>...</blink>';
script.setAttribute('src', sFeedURL);
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
function generatePosts(json) {
function compareentry(a,b) {
order= Date.parse(a.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT')) - Date.parse(b.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT'));
return 0-order;
}
var sHTML = '<ul>';
var sortentry = json.feed.entry.sort(compareentry);
var nIndex = parseInt(json.feed.openSearch$startIndex.$t);
var nTotalPost = parseInt(json.feed.openSearch$totalResults.$t);
for (var i = 0, Post; Post = sortentry[i]; i++) {
if (i >= nPostShow)
break;
var title = Post.title.$t;
var j = 0;
while (j < Post.link.length && Post.link[j].rel != "alternate")
j++;
var link = Post.link[j].href;
var timestamp=Post.published.$t.substr(0,10);
sHTML += '<li><span class="item-title"><a href="'+link+'">'+ title +'</a> <small>'+timestamp+'</small></span></li>';
}
sHTML += '</ul>';
sHTML += generatePostLink(parseInt(json.feed.entry.length), nIndex, nTotalPost);
document.getElementById('newPosts').innerHTML = sHTML;
}
function generatePostLink(nFetch, nIndex, nTotalPost) {
var bOld = (nFetch > nPostShow);
if (bOld) nFetch = nPostShow;
var sResult = '<p align="right">文章 '+nIndex+'-'+(nIndex+nFetch-1)+', 共: '+nTotalPost+'. ';
if (nIndex > nPostStartIndex)
sResult += '<a href="javascript:showRecentPosts('+(nIndex-nPostShow)+');" title="Newer Posts">«</a> ';
if (bOld)
sResult += '<a href="javascript:showRecentPosts('+(nIndex+nPostShow)+');" title="Older Posts">»</a>';
sResult += '</p>';
return sResult;
}
</script>
<script language="javascript">showRecentPosts();</script>
</div>
</div>
</div>
我使用的是最简单的选项卡代码，这与我喜欢简单的东西有关，如果使用JQuery之类的东西应该可以像很多网站那样实现很华丽的动态效果。
3. 修改HTML。给“展开小装置范本”打上钩。搜索“test”找到刚才新建的元素。把 <b:if cond='data:title != ""'>
改成: <b:if cond='data:title == ""'>
这样做的目的是让标题“test”不显示。
当我实现了这个功能后，我大概明白了为什么没有这方面的教程。选项卡的标题无法使用默认的H2标签，于是效果就像现在在我的博客上所看到的哪样无法与其它元素保持风格上的统一，通过修改CSS大概是可以使用风格统一的，但对于像我这样的非专业人士，这么做难度很大，时间成本也很高，所以我还得慢慢折腾。
(完）
博文
從WFU大大那邊得知您的分享，受用了 ^^
回复删除