網頁

2014年11月8日

|

Blogspot 文章數字分頁

Views:
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個都是不好處理的, 再加上單頁顯示時, 根本不需頁數字分頁,
所以 "搜索"; "文章封存"; "單篇文章" 都是用回原本的分頁模式.


5 則留言:

  1. 網路上爬文試了二、三篇的教學方法(包括版主的),但不知為什麼所有的方式顯示的結果都會變成直的,試了好久,就算把按鈕數減少到只剩一個,也仍會變成直的,不知道問題出在哪。
    http://chingjuwu.blogspot.tw/

    blogger使用範本是網路上下載修改套用的,原型:http://darkred-ivy.blogspot.tw/
    原設計在文章內文中並無顯示發文日期,如果想讓日期顯示,該怎麼做?

    感謝解惑!!

    回覆刪除
    回覆
    1. 以你所講, 使用的"範本"並不是原 blogspot 的提供的, 內碼不對應, 可以話一定會發生.
      我的程式碼主要是用 innerHTML 指令, 取代 "blogPager" 的顯示, 而得出結果.
      而 id='blog-pager' 在原始程式中, 沒有設立 CSS 的修訂, 即是沒有指定顯示格式.
      而你所選用的範本中, 有設立 blog-pager 的 CSS 碼, 約在 200行左右有句...
      #blog-pager-newer-link{float:left}
      #blog-pager-older-link{float:right}
      #blog-pager{text-align:center}
      而最後一句, 極有可能"變成直"的主因. 試試先這3句刪除, 看看結果.

      刪除
  2. 您好,我有把那三句刪除了,但顯示還是直的,謝謝。

    另外我想請教,我想把留言板上方那個表情符號表刪除,是不是刪掉整個// Emoticon bar before comment-form(大約是225x到2400行左右)就可以了?

    回覆刪除
    回覆
    1. 相信是它.
      但要由它開始時的 script type='text/javascript' , 一直到它的結尾 /script 一整段.
      因為你所用的不是 Blogger 正式範本, 所以極難修改當中問題.

      刪除
  3. 感恩d(`・∀・)b
    已成功刪除表情符號表,數字分頁的部份我會再慢慢嘗試,現在要試文章文字一鍵調整大小,謝謝分享及回覆。

    回覆刪除

★ 謝謝留言,留下的一句話,已經是很好的推動力 !
★ 勾選右下角的「通知我 」可以由電郵收到留言回覆!
★ 留言與文章無關的主題時,請到頂列「留言版 GuestBook」暢所欲言。
★ 若發佈留言後,留言不見了。可能被系統錯誤判斷為垃圾留言,請不用擔心,我會盡快將留言恢復。
◎ 本留言區已經支援 Unicode Emoji,對應 Win10 的浮動鍵盤。歡迎貼上,增加效果。
◎ 支援 YouTube 超連結對應,支援 jpg , jpeg , gif , png 這4種圖片顯示格式。
◎ 文章介紹 2016 表情符號 V2 更新版 ( Unicode Emoji 格式 ) 顯示策劃