讓Blogspot 也有數字分頁功能

https://blogger-script-study.blogspot.com/2010/09/blogspot-pagenavi.html

經常看到別人的部落格裡有【數字分頁功能表】，看起來又酷又炫，而且又好用，比起 Blogger/Blogspot 內建的分頁實在好用太多了，不過找來找去都只有 Wordpress 的外掛版本，讓使用 Blogspot 的網友望之興歎！這裡幫大家找到了一個 Blogspot 專用的【數字分頁】功能程式，它不是用外掛的方式達成，而是提供完整的程式碼讓你放在自己的 Blogspot 裡，可惜好像只能放在頁尾的地方，放頁首沒有反應。

▼Blogspot原來的分頁功能，超陽春的。

使用時必須先至 Blogspot 的管理後台開啟一個「HTML/JavaScript」的小工具，然後把下面這段程式碼整個貼上去。目前你只能將「HTML/JavaScript」小工具放置在網誌文章的下面，這樣【數字分頁】功能就會正常運作。 

<!-- 數字分頁功能 -->
<script type="text/javascript">

function showpageCount(json) {
var pageCount=6; /* 需配合與Blog文章顯示篇數一致 */
var displayPageNum=3;
var firstPageWord = '« First'; /* First page首頁 */
var endPageWord = 'Last »'; /* Last page末頁 */
var upPageWord ='«'; /* Previous上頁 */
var downPageWord ='»'; /* Next下頁 */

var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' / '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

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 = html;
}
}
}
</script>

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px; font-size:15px; font:Arial;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;

}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div>

【數字分頁功能表】的HTML/JavaScript小工具的放置位置。

程式碼的原作者為【http://www.bloggerdummies.com/blogger-page-navigation-widget】，不過原始程式碼內有許多的引號錯誤，如果直接複製貼上不能使用，後來看到【0 與 1 謎詭世界】的【一分鐘讓你的部落格也有數字分頁效果 】也有介紹，而且修正的錯誤，可以正常使用。

我作了一些小修改，把需要手動更改的地方移到程式碼最上面的位置，保留作者的原來程式碼出處的語法。

下面是程式碼中需要注意的地方，我特別把他們標示為藍色及桃紅色。

其中 【pageCount】 代表部落格主要頁面上文章數，必須與Blogspot文章顯示的篇數一致，否則會計算錯誤，造成有些文章重複出現或不出現。

var pageCount=3; /* 需配合與Blog文章顯示篇數一致 */

而 【displayPageNum】則是顯示瀏覽頁後面出現幾個頁數，比如說設定為3，又目前正在瀏覽第2頁，則後面會跟著 3 4 5 頁

var displayPageNum=3;

至於【firstPageWord】、【endPageWord】、【upPageWord】、【donwPageWord】則可以參考下面的註解說明，你可以試著將其變為中文。

var firstPageWord = '« First'; /* First page首頁 */
var endPageWord = 'Last »'; /* Last page末頁 */
var upPageWord ='«'; /* Previous上頁 */
var downPageWord ='»'; /* Next下頁 */

另外，【<style>…</style>】裡面定義了分頁功能表的樣式，包括字型顏色、大小、底色、框邊樣式及顏色，有興趣的可以字型修改。

PS：使用一段時間後我發現首頁的翻頁沒什麼太大問題，可是用標籤搜尋的結果翻頁就會有計算錯誤的問題，看來還得想看看如何修改程式碼啊！

---

回到》Blogger 部落格技巧總整理

延伸閱讀：
Blogspot推出「熱門文章」小工具
試用Blogger提供的新模板範本修改工具
用Blogger的「清單」小工具建立「水平導覽列選單」