如何当个部落格作者（2）（页数导航按钮）

第一部分：简介（如何添加页数导航按钮）
最近，小编学习到如何在部落格里添加一个页数导航按钮（PAGE NAVIGATION BUTTON）。为什么大家需要页数导航按钮呢？原因是当某个人的部落格文章越来越多，读者很难找到他们的文章。有了这个按钮，就能使读者更方便，更容易找文章。

如果你们有留意的话，我昨天（2017年11月25日，星期六）在这个部落格添加了页数导航按钮（其实“页数导航按钮”这六个字是小编自己直接从“PAGE NAVIGATION BUTTON”翻译的，不懂这翻译对不对… …）：

在小编还没添加那个按钮时，读者只能按“MORE POST”来看下一页文章，但当读者按了下一页，他们不懂他们在第几页，会很混乱：

在此声明，小编是从以下两个网站学回来的，但那两个网站有一些问题，小编等下会在第五部分讨论那个问题，所以小编建议你们先看完我的步骤才看下面那两个网站：
1.）https://helplogger.blogspot.my/2014/04/how-to-add-numbered-page-navigation-widget-for-blogger.html
2.）https://techtspot.blogspot.my/2016/03/add-page-numbered-navigation-for-blogger.html

那么大家开始吧！

第二部分：步骤一（BACKUP）
         首先，你们一定要做个备份（BACKUP）。万一你们做错了某一个步骤，就可以回头，重新再做过。

         要做备份，就进去你们的BLOGGER网站，再去你们自己的户口（https://www.blogger.com/about/?r=1-null_user）。

         然后去按左边的THEME。
         按右上角的BACKUP/RESTORE。

按DOWNLOAD THEME。
如果你们到时候做错，就按CHOOSE FILE，再按UPLOAD。

小编那个DOWNLOAD了的 BACKUP FILE是这样的（你们的FILE样子或ICON可能跟小编的不一样）：

第三部分：步骤二（添加“设置”的CODE）
你们做了备份后，就按EDIT HTML：

你们会看到以下画面 (别怕，冷静)：

然后你们可以在任何一边随便按一下（“|”会出现。“|”是打字时出现的符号，会一闪一闪的）：

按Ctrl+F( 也就是按着Ctrl按钮，然后按F)，SEARCH BOX就会出现：

复制以下的词去SEARCH BOX那边，然后在SEARCH BOX那边按ENTER：

</body>

然后在</body>上面那行粘帖（PASTE）以下的CODE：

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
 /*<![CDATA[*/
 var perPage=4;
 var numPages=10;
 var firstText ='First';
 var lastText ='Last';
 var prevText =' 《PREVIOUS';
 var nextText ='NEXT》';
 var urlactivepage=location.href;
 var home_page="/";
if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages / 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}
pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo / perPage)+1;if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="Page "+currentPageNo+' of '+lastPageNo+"";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<a href="'+home_page+'">'+firstText+'</a>'}else{html+='<a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a>'}}
if(currentPageNo>2){if(currentPageNo==2){if(currentPage=="page"){html+='<a href="'+home_page+'">'+prevText+'</a>'}else{html+='<a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a>'}}else{if(currentPage=="page"){html+='<a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a>'}}}
if(pageStart>1){if(currentPage=="page"){html+='<a href="'+home_page+'">1</a>'}else{html+='<a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a>'}}
if(pageStart>2){html+=' ... '}
for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+=''+jj+''}else if(jj==1){if(currentPage=="page"){html+='<a href="'+home_page+'">1</a>'}else{html+='<a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a>'}}else{if(currentPage=="page"){html+='<a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a>'}}}
if(pageEnd<lastPageNo-1){html+='...'}
if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a>'}}
var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a>'}}
if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a>'}}
var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}
if(pageArea&&pageArea.length>0){html=''}
if(blogPager){blogPager.innerHTML=html}}
function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}
function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}
if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}
if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}
function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}
function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}
function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}
location.href=pAddress}
 /*]]>*/
</script>
</b:if>
</b:if>

 现在，你们有一些设置要调一下。你们看到刚刚PASTE了那行CODE的前几行吗？

以下橙色的字是你们可以改的，你们可以改6个设置：
1.）var perPage=4;（这个是一页显示多少个POST，我建议放4个。）
2.）var numPages=10;（这是显示多少个页数按钮，如果你只调3个，你的部落格只会显示第一页、第二页和最后一页的页数按钮；如果你调100个，你的部落格会显示第一页至第一百页的页数按钮。但我不建议调20个以上。）：

3.）var firstText ='First';（这是直接跳去第一页的按钮，在这里只能设置改名字）
4.）var lastText ='Last';（这是直接跳去最后一页的按钮，在这里只能设置改名字）
5.）var prevText ='« Previous';（这是跳去上一页的按钮，在这里只能设置改名字）
6.）var nextText = ‘Next »';（这是跳去下一页的按钮，在这里只能设置改名字）

在还没进入下一个步骤之前，确保你已经（这个步骤是放“设置”，下一个步骤是放页数导航按钮的“皮肤或外貌”）：
1.）在</body>上面PASTE了那些CODE
2.）改了你们想要的那6个设置

第四部分：步骤三（按钮外貌）
在SEARCH BOX那边PASTE以下的词，然后按ENTER：

]]></b:skin>

然后在]]></b:skin>上面那行粘帖（PASTE）以下的CODE（这里有7个按钮外貌让你们选择，你们只需要选其中一个就可以了）：

1.）

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
.showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
#blog-pager .pages{border:none;}

2.）

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

3.）

#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}

4.）

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

在还没进入下一个部分之前，确保你已经（上一个步骤是放“设置”，这一个步骤是放页数导航按钮的“皮肤或外貌”）：
1.）在]]></b:skin>上面PASTE了那些CODE（记住，这里有7个选择，你们只需要选一个就够了，别PASTE完7个CODE，后果不堪设想。）
2.）按SAVE THEME，搞定！

第五部分：讨论那个问题
 这个部分是讨论一些问题，如果你们做完了以上那3个步骤，你们可以跳过这个部分，这个部分不是解释第四个步骤（弄那个按钮只需要刚刚那3个步骤），而是讨论小编昨天找到的错误。

 你们看到第二个步骤那边的CODE吗？
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
< script type='text/javascript'>
 /*<![CDATA[*/
 var perPage=3;
 var numPages=3;
 var firstText ='First';
 var lastText ='Last';
 var prevText =' 《PREVIOUS';
 var nextText ='NEXT》';
 var urlactivepage=location.href;
 var home_page="/";
if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages / 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}
pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo / perPage)+1;if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="Page "+currentPageNo+' of '+lastPageNo+"";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<a href="'+home_page+'">'+firstText+'</a>'}else{html+='<a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a>'}}
if(currentPageNo>2){if(currentPageNo==2)

 看到上面的最后一行吗？那行写着if(currentPageNo>2){if(currentPageNo==2){if(currentPage=="page") 。这一行是对的。

 我就是在这里找到这个问题，那两个网站写if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page") ：

小编并不会CODING这些东西，小编只是幸运找到错误而已。那么他们的那行CODE有什么错误呢？

当小编在第3页时，我按PREVIOUS那个按钮后，直接回去第1页，而不是回去第二页：

所以问题只是这个而已，小编暂时还没找到其它问题。

第六部分：总结
总结是如果你们想要你们的部落格更加整齐，那么就放一个页数导航按钮吧！

笔记和我们的故事 MYblog

Search This Blog

如何当个部落格作者（2）（页数导航按钮）

Comments

Post a Comment