Blogspot 文章數字分頁

Blogspot Page Navigation 不是個新東西, 多個網站或是網誌都有相關語法介紹,
它有著多個不同版本, 華麗的, 簡樸的...
重點是極多都不可以在今天 Blogspot 裡頭正常使用.

直到找得這個網誌...
http://mkhere.blogspot.hk/2009/11/blogger-pagination.html

網主《姆奈》MKnight 在2009 的介紹, 得知這個語法開始時, 是由一名台灣網主 Mr.J 在2007年所開發,
再經各大網站轉發公開, 當中加入了不小功能改善, 或是外觀變化.
可惜改變後的語法跟現時 blogspot 範本出現了不相容, 非常多問題發生, 而且語法多次修改後變得不好理解, 修正困難.

但是 MKnight 網綕上的, 正常可用. 相信是原 Mr.J 所寫第一手版本, 經 MKnight 改進後的第二手版本.
參考內容少了華麗包裝, 比較簡單容易了解. 同時得到網主答允, 轉發推介, 再加上我個人對它的一些修正及改進, 介紹它的第三手版本.

Blogspot 文章數字分頁

全段語法只要把下面 code 全部複製到 HTML/Javascript 小工具的內容裡,
無需在"標題"加入文字.
按下[儲存], 重新啟用網誌即可.
(極度建議把小工具放到"版面配置"最下方位置.  因為語法中會修改網頁的 HTML, 所以放到最底下. 網頁完成載入後, 一一自動對應修改.)

<!-- Start Page Navigation -->
<style type="text/css">
.showpageArea {margin:5px 0 20px 0;}
.showpageNum A{margin:0 4px 0 4px;text-decoration: none;}
.showpagePoint {background: #191919;margin:0 3px;padding:2px 5px;text-decoration: none;
  -webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;
  -moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;
  -webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;
  -moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px}
</style>
<script type="text/javascript">
function showpageCount(json) {
var postNum=1;
var thisUrl = location.href;
var htmlMap = new Array();
var htmlPoint = 1;
var isFirstPage = thisUrl.match(/\.blogspot\.(\w+)\/$/);
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated-max")!=-1;
var lablePage = thisUrl.indexOf("/search/label/");
var thisLable = lablePage !=-1 ? thisUrl.substr(lablePage+14,thisUrl.length) : ""; 
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var fFlag = 0;
var eFlag = 0;
var labelCount = 0;
var html= '<span class="showpageArea">';
var upPageHtml ='';
var downPageHtml ='';
//以下是可以自行設定資料 (開始)
var pageCount=8; //每頁筆數
var displayPageNum=4; //顯示幾個分頁
var firstPageWord = '1'; //顯示第一頁的文字
var upPageWord ='« Previous'; //顯示上一頁的文字
var downPageWord ='Next »'; //顯示下一頁的文字
var myHome = '«« Home'; //顯示首頁的文字
//以上是可以自行設定資料 (結束)
lb1 = document.getElementById("Label1");
if (lb1){
a = lb1.getElementsByTagName("a");
for (i=0; i<a.length; i++) {a[i].href += '?max-results='+pageCount;}
}
ptlbs = document.getElementsByClassName("post-labels");
for (j=0; j<ptlbs.length; j++) {
if (ptlbs){
a = ptlbs[j].getElementsByTagName("a");
for (i=0; i<a.length; i++) {a[i].href += '?max-results='+pageCount;}
}}
for(var i=0, post; post = json.feed.entry[i]; i++) {
var date2 = post.published.$t;
timestamp = encodeURIComponent(date2.substring(0,19)+date2.substring(23,date2.length));
var lablePage = '';
var category ='';
if(isLablePage){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
category = encodeURIComponent(post_category.term);
if(encodeURIComponent(post_category.term)==thisLable){ 
if(labelCount==0 || (labelCount % pageCount ==(pageCount-1))){
if(labelCount==0 || thisUrl.indexOf(timestamp)!=-1 ){
htmlPoint = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;
}
labelCount++; 
}}
}//end if(post.category){
}else{
if(i==0 || (i % pageCount ==(pageCount-1))){
if(i==0 || thisUrl.indexOf(timestamp)!=-1 ){
htmlPoint = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}}}
for(var p =0;p< htmlMap.length;p++){
if(p>=(htmlPoint-displayPageNum-1) && p<(htmlPoint+displayPageNum)){
if(fFlag ==0 && p == htmlPoint-2){
if(htmlPoint==2){
if(!isLablePage){
upPageHtml = '<span class="showpageNum"><a href="/">'+ upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(eFlag ==0 && p == htmlPoint){
downPageHtml = '<span class="showpageNum"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
if(p==(htmlPoint-1)){
html += '<span class="showpagePoint"><u>'+htmlPoint+'</u></span>';
}else{
if(p==0){
if(!isLablePage){
html += '<span class="showpageNum"><a href="/">1</a></span>';
}else{
html = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}}
}//end if(p>=(htmlPoint-displayPageNum-1) && p<(htmlPoint+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(htmlPoint>displayPageNum+1){
if(!isLablePage){
html = upPageHtml+' <span class="showpageNum"><a href="/">'+ firstPageWord +' </a></span>... '+html +' ';
}else{
html = upPageHtml+' <span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">'+ firstPageWord //+' </a></span>... '+html +' ';
}}
if(htmlPoint>1 && htmlPoint<=displayPageNum+1){
html = upPageHtml+' <span class="showpageNum"></span>'+html +' ';
}
if(htmlPoint<(postNum-displayPageNum-1)){
html += '<span class="showpageNum">... <a href="'+htmlMap[htmlMap.length-1]+'"> '+(postNum-1)+'</a></span>';
html += downPageHtml;
}
if(htmlPoint<(postNum-1) && htmlPoint>=(postNum-displayPageNum-1)){
html += downPageHtml;
}
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = '<span class="showpagePoint"><a href="/" style="text-decoration: none">'+myHome+'</a></span>'+'  '
blogPager.innerHTML += html+'<a href="http://freetongdiy.blogspot.hk/2014/11/blogspot.html"><img src="https://www.google.com/images/icons/product/blogger-16.png" align="right"/></a>';
}}}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=9999" type="text/javascript"></script>
<!-- End Page Navigation -->

可以正確得到效果, 首先需要決定每頁所顯示的文章數量,
[設計]> [設定]> [文章和留言]> [顯示最多]> [主頁上的文章]
如果是 8 篇, 就輸入 [8],
而語法中第 30行, "pageCount" 也改成 8.

在"數字分頁"顯示時, 個人覺得需要一個"一鍵回到首頁"的按鈕.
語法中第 35 行, "var myHome =" 自選"首頁"名稱
語法中第 138 行, "blogPager.innerHTML =" 加入這個功能

除了首頁可以得到"數字分頁"效果, 標籤(Labels)都是可以.
可惜的是它原先預設是顯示20篇, 跟"pageCount"不相符, 語法中便會出現計算錯誤.
前人多是介紹在後台的 HTML 入手, 在合適位置上加上 "?max-results="指令. 一旦修改後台, 容易出錯, 所以我在語法裡頭加入2段程式, 自動加上標籤時最多顯示篇章功能. 那麼使不需要接觸後台了.
語法中第 37~41 行, "Label1" widget 裡的標籤
語法中第 42~47  行, "post-labels" 網誌裡的標籤

網誌裡還2個, 會顯示多篇幅的工具, "搜索" & "文章封存",
這2個都是不好處理的, 再加上單頁顯示時, 根本不需頁數字分頁,
所以 "搜索"; "文章封存"; "單篇文章" 都是用回原本的分頁模式.