[Blogger] 使用分頁

Blogger 頁面預設在下方提供 [較新的文章] , [較舊的文章] 來選取上下頁, 在找尋文章時較不便.

Blogger 預設頁面瀏覽方式, 如下圖紅框所示:

這個問題可透過下面方法解決:

[1] 如果已知關鍵字可直接使用搜尋窗口尋找文章

[2] 為各文章使用合適的標籤以利搜尋

[3] 無關鍵字無標籤的文章只能一頁一頁找, 因此若能提供分頁按鈕, 即可快速前往特定分頁, 這篇文章主要討論這一種方法

網路搜尋到一篇文章教學可在 blogger 新增分頁, 測試可正常執行, 參考連結如下:

https://helplogger.blogspot.com/2014/04/how-to-add-numbered-page-navigation-widget-for-blogger.html

修改後執行效果:

方法

注意:

[1] 因為該方法直接修改 HTML 內容, 每次更換 blogger 主題後便需再修改一次。

[2] HTML 語法是直接拷貝作者提供的程式碼, 不確定安全性及副作用。

~~[3]~~ ~~對 mobile view 無作用。~~

[4] 程式碼建議直接拷貝自原作者網站以避免不預期的問題。

步驟如下:

[1] 登入 blogger, 按[主題]後點選 [編輯 HTML]

[2] 搜尋: ]]></b:skin> 字串

[3] 在]]></b:skin> 字串上方插入按鈕樣式的程式碼 (選用的樣式如下, 原作者提供多種按鈕樣式可供選用)

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 4px;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);}

如果最後顯示的效果需調整(如: 字太大, 無法在同一列放置所有按鈕 … 等), 可修改此段程式碼。

例如: 我就把上面 displaypageNum 的 padding 寬改成 4px

[4] 搜尋 </body>, 在上一行加入下方程式碼 (拷貝自原作者網站):

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

/*<![CDATA[*/

var perPage=7;

var numPages=8;

var firstText ='首頁';

var lastText ='末頁';

var prevText ='« 上一頁';

var nextText ='下一頁»';

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==3){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>'}}

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>

[5] 分頁客製化

剛剛貼上的程式碼提供變數值供使用者客製化分頁, 解釋如下:

perPage: 7,	每一分頁要顯示的文章個數。這個值需和原設定下的一致
numPages: 8,	在分頁瀏覽列中顯示的個數
var firstText ='First';	[首頁] 字串
var lastText ='Last';	[末頁] 字串
var prevText ='« Previous';	[上一頁] 字串
var nextText ='Next »';	[下一頁] 字串

[6] 搜尋 expr:href='data:label.url', 修改為:

expr:href='data:label.url + "?&max-results=7"'

其中, 7 需和 perPage 設定的值一致

[7] 儲存後開啟 blogger, 即可看見分頁效果

選單

2020年9月10日星期四