2007年4月15日星期日

blogger:杀手级应用,ajax式全部文章列表

感谢hans提供的方法。其实这个hack就有点像以前我介绍的那个杀手级AJAX标签改进版,只不过hans给出了当时我想要的那种把文章列表放在博客中间的方法。而且还能够随意点击标题,时间,标签来排序文章。

唯一问题是,如果你的博客文章过多,打开博客的时候读取的时间会很长。文章越多,读取时间越长……我在我有800篇文章的博客上实验,完全不可接受这个速度……
而且目前似乎不能把注释之类修改成中文,也不能添加图标,所以有点丑……


安装方法:第一步,在]]<>/b:skin>上边添加如下代码:

#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffd595;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
}

此为CSS代码,是确定此hack的样式的代码,可以自己修改。

第二步:在你想要能够让读者轻松打开此hack的侧边栏添加以下代码:
<div id="toclink"><a href="javascript:showToc();">Show Table of Contents</a><br/><br/></div>
<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
<script src="http://YOURID.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=100&amp;callback=loadtoc"></script>
<script src="http://YOURID.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=101&amp;max-results=100&amp;callback=loadtoc"></script>


注意把上面的YOURID改为你自己博客的二级域名,如我的GG派为ggpi。

另外注意这里的代码表示你的博客最多有200篇文章,如果有三百篇则增加一行代码如下:
<script src="http://YOURID.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=201&amp;max-results=100&amp;callback=loadtoc"></script>

就是不断添加变换201,301的数字脚本即可增加此hack要显示的文章。

最后再在文章页上方或者任何你想显示此hack调出的文章列表的地方,添加一个新的页面元素,页面元素里添加代码如下:
<div id="toc"></div>

完成。

6 评论:

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆