【原】很土的在博客园实现了：前一篇、后一篇

所谓“前一篇”、“后一篇”，就是在一篇博客的结尾处显示在该篇博客之前和之后的博客标题和链接。因为博文一般都会有时间相关性，沿时间顺序阅读是一种很自然的做法。假设一个读者从搜索引擎根据某个关键字来到你的博客，看了你的一篇文章，然后被你的技术人格魅力深深折服，想要再做延伸阅读，相比在下面一堆广告中找“相关文章”、“所属分类的其他文章”，直接根据“前一篇”、“后一篇”要来的快捷的多，而且对于懒得在写完一系列文章之后还要做索引、目录的人来说，这也是比较省事的做法，因为一般同一系列的文章在时间上也是相连的。所以像新浪、CSDN等地方都有这样的贴心设计，可惜博客园这里没有……

好在博客园这里有“自定义签名”、“页首代码”、“页尾代码”，javascript在这里也不是屏蔽字，那么，就自己动手，丰衣足食吧！

给博客添加“前一篇”、“后一篇”总共分三步:

第一步，获得自己的博文列表

如果你并没有打算自己另开一台服务器专门为自己在博客园的博客提供文章列表服务，那么我们还是老老实实在客户端想折吧。目前我个人的解决方案是：进入管理-》查看源码-》人工处理……总共三十来篇随笔，处理了十来分钟……当然，你可以做的更高效些，比如在Vim或者UltraEdit中做正则匹配，或者自己写个程序，把文章列表从Rss中筛出来，总之，我们最后要获得的文章列表是类似这个样子的：

<ul id="allposts" style="display:none">
    <li uid="http://www.cnblogs.com/smjack/archive/2009/03/03/1401893.html">
    【原】改进了的&amp;quot;利用Silverlight实现类似iGoogle的浮动拖拽效果&amp;quot;</li>
    <li uid="http://www.cnblogs.com/smjack/archive/2009/03/02/1279787.html">
    【原】HTML页面元素加载顺序研究报告（5）----Script标签在Firefox下对背景图片的影响</li>
    <li uid="http://www.cnblogs.com/smjack/archive/2009/03/02/1279779.html">
    【原】HTML页面元素加载顺序研究报告（4）----用JavaScript插入图片</li>
    <li uid="http://www.cnblogs.com/smjack/archive/2009/03/01/1400646.html">
    【原】利用Silverlight实现类似iGoogle的浮动层拖拽效果</li>
    <li>……</li>
</ul>

列表的每一条目都有标题和链接两条信息，uid属性值是文章链接，li内文是文章标题，文章的顺序是按时间倒序，当然这些都和下面的javascript逻辑相关，你用别的标签做列表，用别的属性放链接，文章顺序用正序都没问题。整个列表是要偷偷放在页面里的，自然不能让人看见，display:none，掩盖之。

然后把这个列表塞进“页首Html代码”吧。虽然长了点……

第二步，写逻辑代码

既然有了文章列表，下面就该javascript华丽现身了。好歹也要让javascript做点除了流量统计之外的事情吧。和列表一样，这段javascript也是本人纯手工编写的，比较土，不过能用：

<script language="javascript" type="text/javascript">
    var postList = document.getElementById('allposts');
    var curUrl = location.href;
    var prePost = {
                    title:'没有啦',
                    url:''
    };
    var nextPost = {
                    title:'没有啦',
                    url:curUrl
    };
    var getNextPost = false;
    for(var i=0;i<postList.childNodes.length;i++)
    {
        var post = postList.childNodes[i];
        if(post.tagName == 'LI')
        {
            var url = post.attributes['uid'].value;
            var title = post.firstChild.nodeValue;
            if(url != curUrl )
            {
                if(!getNextPost)
                {
                    nextPost.title = title;
                    nextPost.url = url;
                }
                else
                {
                    prePost.title = title;
                    prePost.url = url;
                    break;
                }
            }
            else
            {
                getNextPost = true;
            }
        }
    }
    document.write("<ul><li><b>前一篇: </b>"+"<a href='"+prePost.url+"'>"+prePost.title+"</a></li>");
    document.write("<li><b>后一篇: </b>"+"<a href='"+nextPost.url+"'>"+nextPost.title+"</a></li></ul>");
</script>

这段代码没什么好讲解的。关键是放代码的地方，伟大的“自定义签名”，终于也有了除了打广告之外的作用了。把这段javascript丢到你原来的广告|签名后面，那么每篇博客下面，最该出现“前一篇”、“后一篇”的位置上，就真的出现了“前一篇”、“后一篇”！

第三步，维护

还记得文章列表是怎么产生的么？手工，那么你只要记住每次写新的文章，同步更新页首的文章列表就好了……有点麻烦？文章都写了，再给文章列表上加上一项有什么麻烦的……当然，的确有点麻烦……但这已经比你维护每篇文章下的链接轻松多了。

 

注：

• 文章列表一定要在脚本之前出现，除非你把javascript方法放到Onload里执行。
• 在页首放一大堆文章列表会影响页面加载速度？如果你的文章列表已经大到这种程度了，那你还是去威逼dudu吧。
• 把文章列表放在页面里的一个额外好处是，能增多你页面里的关键词。这样应该不算作弊吧……
• 虽然这东西是手工的，但灵活啊，既然列表是自己编的，当然也可以不按时间顺序排列， 那么按相关性排列，也许是个更好的主意。

 

效果：

往下瞅。

转载于:https://www.cnblogs.com/smjack/archive/2009/03/15/1412153.html