2010年9月21日 星期二

讓Blogspot 也有數字分頁功能

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

Blogspot 數字分頁功能

經常看到別人的部落格裡有【數字分頁功能表】,看起來又酷又炫,而且又好用,比起 Blogger/Blogspot 內建的分頁實在好用太多了,不過找來找去都只有 Wordpress 的外掛版本,讓使用 Blogspot 的網友望之興歎!這裡幫大家找到了一個 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小工具的放置位置。

Blogspot 數字分頁功能表放置處

程式碼的原作者為【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的「清單」小工具建立「水平導覽列選單」

14 則留言:

creadeer 提到...

照著設定卻沒有成功耶:<

工作熊 提到...

請確實將程式碼擺放在【網誌文章】的下面位置,另外建議先不要更改任何的程式內容,等正常顯示了才更改內容。

creadeer 提到...

是的,一直都有確實擺放在網誌文章下面,也未更動任何程式內容,僅將文章篇數改成符合設定內容,但一直並未顯示出來,始終一片空白QQ

工作熊 提到...

給個網址瞧瞧吧!

creadeer 提到...

那個...
原先我的網誌是設為只有作者能閱讀
欲將網址貼給您請教而更改設定為每個人可閱讀時
數字分頁奇蹟似地出現了!
(莫非設定為只有作者能閱讀,使語法不能確實執行?)

工作熊 提到...

看樣子確實是如此,只有設成全部的人都可以觀看才能正常執行。

creadeer 提到...

嗯嗯,這下沒問題了,感謝您

Admin 提到...

目前还没有解决标签计算错误的方法吗?这个好用,可惜就是标签那里计算错误

Admin 提到...

目前还没有解决标签计算错误的方法吗?这个好用,可惜就是标签那里计算错误

IM91 提到...

請問這個功能要如何也在按下某個標籤之後也適用?
我安裝好後,在首頁有效果,但是按進標籤裡的文章就變回預設的了。

工作熊 提到...

Yu-Cheng;
自從Blogger的版型改版後,這個數字分頁功能就有點怪怪的了,目前只有舊版型比較適用。

Evan's 提到...

我弄到了分页了,可是不能把第一页的文章放到第二页去,要怎样做呢?><

Glad_Hiking 提到...

請問我安裝後,在首頁仍然是 MORE POST, 按下MORE POST後第二頁就有了數字分頁功能,請問如何解決,在首頁也是數字分頁功能,而不是顯示MORE POST?

工作熊 提到...

KC Leung,
這個應該是版型變更的關係,建議你去這個網站參考一下:http://www.wfublog.com/2014/11/blogger-number-page-navigation.html