IT博客汇 | jekyll显示分页

jekyll显示分页

maplebeats (maplebeats@gmail.com)发表于 2012-05-23 00:00:00

警告

也许是算法上的问题，js代码会在一定文章数之后出现失效的情况。so,自己看着办吧

静态分页

tips:代码请在链接里自己找，因为jekyll自动转义代码不好贴。

首先在_config.yml里增加配置paginate: 5，数字为分页显示文章的条数。这样子jekyll就会生成pageN的index了。然后就是显示分页的目录号，添加到想要的位置。

代码

jquery分页

ajax分页的好处就是点击分页不用刷新整页面，但是我写的这个并不是很好，因为是在进入网站的时候就载入了json，并不是请求的。分页之前，先要生成文章的json数据

代码

这是我生成json的文件的语句，你可以更改成你自己的样式。比如把整个post都写入post值中。

准备好json数据之后，就是js了。

$(document).ready(function () {
                    $(".page").html(" ")
                    $.getJSON("/post.json", function (data) {
                            var page = {
                                    Num : 5,//分页文章数
                                    MAX : data.length,
                                    index : 0,
                                    count : 5,//...
                                    next : function () {
                                        this.index += 1 ;
                                    },
                                    prev : function () {
                                        this.index -= 1 ;
                                    },
                                    content : function () {
                                        if(this.index < 0)
                                        {
                                            this.index = 0;
                                        }
                                        else if(this.index >= (this.MAX/this.Num|0)){
                                            this.count = this.MAX % this.Num;
                                            this.index = (this.MAX/this.Num|0)
                                        }
                                        else{
                                            this.count = 5;//...
                                        }
                                        var builder = '';
                                        for (var i = this.index*this.Num ; i < this.index*this.Num + this.count; i++) {
                                                builder += (" + data[i].url + ">" + data[i].title + "");
                                                builder += ("" + data[i].summary + "
");
                                        }
                                        return builder;
                                }
                            };
                            $("#down").click(function () {
                                            page.next();
                                            $(".posts").html(page.content());
                                    });
                            $("#up").click(function () {
                                            page.prev();
                                            $(".posts").html(page.content());
                                    });
                    });
            });

效果就是分把class为page的div换成上下页，js中page类中几个参数控制分页显示数。必须确保前面包含了jquery，虽然只有了它的极小的一部分。

PS

之所以写这个，是因为我放弃了jquery转向dojo。所以我打算把jquery从我的博客里去除，所以以前那个html5音乐没有了。加上分页依赖jquery,而我打算用dojo重写它，虽然进展并不顺利QAQ。就把这个留给有用的人吧，不过用jekyll建博客的我想不会写不出这玩意～。～