给 Blogger 做个页码导航

@ Blogger笔记

不知道我哪根筋又抽抽了,论文不写,弄代码。这次的主题是:给blogger做个页码导航

众所周知,blogger的页脚只有“上一页”“下一页”这样简单的页面导航。如果读者想跳跃着阅览,除了点击归档以外别无他法。但是办法是人想出来的,所以我,谷歌-亲测-推荐。效果如下:

给 Blogger 做个页码导航
给 Blogger 做个页码导航

下面介绍具体方法。操作地点:Edit HTML。文章引用自:左上极限(链接失效)(有修改)。

首先找到代码 ]]></b:skin>,替换为如下代码:

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>

TIP:以上参数中的颜色、边框神马的看着改改。

再找到 </body> 改为

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=1;
var displayPageNum=5;
var upPageWord =&#39;Previous';
var downPageWord =&#39;Next';
</script>
<script src='http://pagenavi-ccyann.googlecode.com/files/blogger-page-navi.v2.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</body>

TIP:http://pagenavi-ccyann.googlecode.com/files/blogger-page-navi.v2.js 部分可以自己下载更改,原版也不是我写的。原版在这里(链接失效)。原来的v1版本有bug,大概是页数按照时间分类之类的。因为我设置了每页显示1篇文章,所以如果是同一天的文章,无法显示在下一页中,下一页显示的是过去一天的文章。但是这个bug已经在v2中得到修正,撒花!感谢原作者!

另外,pageCount=1 表示每页显示1篇文章;displayPageNum=5 表示导航中当前页面前/后所显示的页码数。比如上图中就是 =5 的情况。

接下来还需要修改一点就成功了,找到所有的 data:label.url 替换为 data:label.url + "?&amp;max-results=5"
TIP:这里的 max-results=5 要跟上面的 displayPageNum=5 中的数字一致。

到这里为止大功告成。实例可见本博。有问题提。


评论