首先是思路

不要着急写代码，思路很重要！我设想的运行流程应该是这样： 1. 读取地址栏参数（index.html?currentPage=1&displayTag=All），分别表示当前页码和当前需要显示标签, tag=all代表显示所有tag 2. 得到含有displayTag的文章的总数，能分成几页 3. 从0开始给这些文章（<article>）添加一个自定义属性currentIndex，作为显示的序号 4. 设置页码导航栏

5. 根据currentPage当前页码和每页显示的数量，计算那些文章显示/隐藏。第3步设置的自定义属性排上用场了！

HTML中的工作

1. 我想要实现，点击某个标签就只显示含有该标签的文章，别的隐藏。这就需要给文章（<article>）加上class，值为tag-XX。比如文章标签是"jQuery"，那么class="tag-jQuery"。显然tag不能有中文。我用的是jekyll模板语言，可以自动给加上class。当然你也可以用别的方法，总之加上class就行了

<article class="『% for tag in post.tags %} tag-{『tag』} 『% endfor%』">	 
这里是文章的标题，摘要信息。（我插入了一些jekyll代码，大括号会被解析，所以看到『换成{就能行了）
</article>

2. 我还需要一个导航栏和标签云。

导航栏
<nav class="pagination" role="navigation">
		<a id="fristpage" class="newer-posts"  href="">
				<i class="fa fa-angle-double-left"></i></a>  
		<a id="prepage"   class="newer-posts"  href=""><i class="fa fa-angle-left"></i></a> 
		<span id="pagenumber" class="page-number">第 页/共页<i class="fa caret-up"></i>			</span>	
		<a id="nextpage" class="older-posts"  href=""><i class="fa fa-angle-right"></i></a>  
		<a id="lastpage" class="older-posts"  href=""><i class="fa fa-angle-double-right"></i></a> 
</nav>

标签云，同样基于jekyll,加上了地址栏参数l
<a href='{『site.baseurl』}/index.html?currentPage=1&displayTag=All'>ALL</a>
『% for tag in site.tags %』
		<a href='{『site.baseurl』}/index.html?currentPage=1&displayTag={『tag[0]』}'>{『tag[0]』}</a>
『% endfor %』

开始写jQuery！

首先我们将函数封装在一个对象中。代码注释很详细，不用解释了吧？

var Paginate = {
	postTotal:0,  //某Tag总文章数()
	displayTag:"All",//要显示的标签
	paginateNum:3,//每页的文章数量
	maxPage:1,    //最大页码
	currentPage:1,//当前页码
	
	//根据Tag 为Article设置Index 并输出该Tag下的postTotal maxPage
	SetIndex:function(tag){
		if(tag==null){tag="All";}
		//1——设置当前Tag
		this.displayTag=tag;
		//2——设置Index
		tag="tag-"+tag;
		var num=0;
		$("article").each(function(index,element){
			$(element).attr("originIndex",index.toString());
			if(tag=="tag-All"){	
				$(element).attr("currentIndex",index.toString());
				num++;
			}
			else{//判断Article中是否有Tag Class				
				if($(element).hasClass("indexhtml") && $(element).hasClass(tag)){
					$(element).attr("currentIndex",num.toString());
					num++;					
				}else{
					$(element).attr("currentIndex","-1");
				}
			}
		});
		//3——输出参数
		this.postTotal=num;//文章总数
		var varmaxPage=num/this.paginateNum;
		this.maxPage=Math.ceil(varmaxPage);//最大页码		
		this.result=this.maxPage;
	},
	//设置页脚导航栏格式 pageNum当前页数
	SetNavBar:function(pageNum){
		//容错
		if(pageNum==null) pageNum=1;
		pageNum=Math.ceil(pageNum);
		if(pageNum>this.maxPage) pageNum=this.maxPage;
		if(pageNum<1) pageNum=1;
		//设置当前页码
		this.currentPage=pageNum;
		//1——修改页脚导航栏，给链接加上地址栏参数
		if(pageNum>1){
			$("#fristpage").show();
			$("#prepage").show();
			var prepage=pageNum-1;
			$("#fristpage").attr('href','/index.html?currentPage=1&displayTag='+this.displayTag);
			$("#prepage").attr('href','/index.html?currentPage='+prepage.toString()+'&displayTag='+this.displayTag);
		} else {
			$("#fristpage").hide();
			$("#prepage").hide();
		}
		if(pageNum<this.maxPage){
			$("#lastpage").show();
			$("#nextpage").show();
			var nextpage=pageNum+1;
			$("#lastpage").attr('href','/index.html?currentPage='+this.maxPage.toString()+'&displayTag='+this.displayTag);
			$("#nextpage").attr('href','/index.html?currentPage='+nextpage.toString()+'&displayTag='+this.displayTag);
		} else {
			$("#lastpage").hide();
			$("#nextpage").hide();
		}
		$("#pagenumber").html("第 "+pageNum.toString()+" 页/共 "+this.maxPage.toString()+" 页");
	},
	//分页 根据当前页码显示或隐藏Article
	Paging:function(){
		//1——计算得到Article的显示范围 最小为0
		var minIndex=(this.currentPage-1)*this.paginateNum;
		var maxIndex=this.currentPage*this.paginateNum-1;
		//2——根据currentIndex隐藏或显示Article
		$("article").each(function(index, element) {
			var currentIndex=$(element).attr("currentIndex");
			if(currentIndex>=minIndex && currentIndex<=maxIndex){ 
				$(element).show(1000);
			}else{
				$(element).hide(1000);
			}
		});
	}
};

然后我们需要一个解析地址栏参数的函数。如果没有参数则返回null

//作用 得到地址栏参数
function GetUrlPara(name){  
	var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
	var r = window.location.search.substr(1).match(reg);  //匹配目标参数
	if (r!=null) return unescape(r[2]); return null; //返回参数值 
}

然后我们调用函数，实现功能

var currentPage=GetUrlPara("currentPage");
var displayTag=GetUrlPara("displayTag");
Paginate.SetIndex(displayTag);
Paginate.SetNavBar(currentPage);	
Paginate.Paging();