老怪的挨踢日誌: [Blogger Hacks] 讓Blogger有文章分頁功能

當文章數量一多，有時要查看舊文章實在是不方便，雖然有標籤功能，雖然可以利用 Google 自訂搜尋作出站內文章搜尋功能，但是總覺得少了什麼。

後來看到 Google、Yahoo、Digg 等網站，才猛然發現原來少了文章分頁的功能，但是似乎在 Blogger 上採用的不多，因此搜尋測試了好幾天。

參考文章：

Blogger Accessories - Page Navigation Hack for Blogger (第一版：一般網路上常介紹的方式)
Blogger Accessories - Page Navigation Menu Widget for Blogger (第二版: 只使用一個 {HTML/Javascript} Widget )
Woork - Perfect pagination style using CSS
WowboxBlog - 24款實用的翻頁頁碼CSS代碼
Mis-Algoritmos - Some styles for your pagination
[CSS] 多種分頁樣式範例 (上一篇的中文介紹)
Blogger Buster - Numbered Page Navigation for Blogger (該文開頭的橘色按鈕有倒影的圖很想要，可惜範例介紹的不是該Style)
[Blogger]為文章區加上方便瀏覽的頁數按鈕 (上述的中文介紹內容，其實也和第一項一樣)

我是採用上述第2項的方式，再調整CSS設定，方法如同上述第2項所介紹的方式，在此簡略概述一下：

到［版面配置］-->［網頁元素］-->任何一個有［新增小工具］的地方-->新增一個{HTML/Javascript}。
在 {HTML/Javascript} 中貼上原始碼-->[儲存]。
再將該 {HTML/Javascript} 網頁元素，用滑鼠左鍵拖曳到［網誌文章］區塊的[編輯]功能的底下。(原網站Blogger Accessories有提供動態的操作示意圖，應該很容易看懂，本來想將該圖展現在文章內，可惜怎麼測試都不成功。)

我的原始碼如下:

CSS 區段：

<style>
.showpageArea {
padding: 0 2px;
margin-top:5px;
margin-bottom:5px;
font-size:11px;
height:25px;
}
.showpageArea a {
border: 1px solid #339966;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
background-color: #FFFFFF;
color: #000000;
font-size:11px;
font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
line-height:24px;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #339966;
color: #000000;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
background-color: #FFFFFF;
}

.showpageNum {
font-size:11px;
font-weight: bold;
text-decoration: none;
height:25px;
}
.showpageNum a {
padding: 3px 6px !important;
padding: 2px 6px 2px 6px;margin:0px 4px;
border: 1px solid #339966;
color: #000000;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
background-color: #FFFFFF;
line-height:24px;
}
.showpageNum a:hover {
border: 1px solid #339966;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
color: #000000;
background-color: #bcb;
padding: 2px 6px 2px 6px;
margin: 2px;
line-height:24px;
}
.showpageNum a:link {
text-decoration: none;
border: 1px solid #339966;
color: #0066cc;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
margin: 2px;
line-height:24px;
}

/*目前的頁次*/
.showpagePoint {
padding: 2px 8px 2px 8px;
margin: 2px;
font-weight: bold;
border: 1px solid #339966;
color: #000;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
background-color: #bcb;
height:25px;
line-height:24px;
font-size:11px;
font-weight: bold;
}

/*第一頁、上一頁、下一頁、最後一頁 的CSS*/
.showpage a:link {
border: 1px solid #339966;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
color: #0066cc;
background-color: #FFFFFF;
line-height:24px;
padding: 2px 6px 2px 6px;
margin: 1px;
font-size:11px;
font-weight: bold;
text-decoration: none;
height:25px;
line-height:24px;
}
.showpage a:hover {
border: 1px solid #339966;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
color: #000000;
background-color: #bcb;
font-size:11px;
font-weight: bold;
text-decoration: none;
height:25px;
line-height:24px;
}
</style>

Javascript 區段：

<script type="text/javascript">

function showpageCount(json) {
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 ='';

// 每一頁的文章數，和Blogger設定配合
var pageCount=8;
var displayPageNum=3;
var firstPageWord = '第一頁';
var endPageWord = '最後一頁';
var upPageWord ='上一頁';
var downPageWord ='下一頁';

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="font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;background-color: #FFFFFF;" class="showpage">頁次：'+thisNum+' of '+(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>

<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>

除了 Javascript 區段沒啥變動(英文顯示改成中文顯示而已)，CSS區段我是用 Try Error 的方式改出來的，後續應該還會再做修改，也很難保證有排列順序和語法錯誤的地方。所以，請盡量採用原文的 CSS 去調整成自己想要的 Style。其中，有中文註解的地方是我加上去的，僅是個人的理解＋備忘，僅供參考。(它的CSS不好改，或者我比較笨)

此段程式碼，我換了不同的顯示方式，是採用C # Code format這個網站轉出來的，目前測試的結果，會有超過寬度不能自動換行問題。但是如果使用Postable網頁轉碼＋Code標籤，會把 Javascript 的 "+" 轉不見，怕有將原程式碼轉貼 Lost 的地方。

------Update 2008-12-15

測試安裝SyntaxHighlighter for Windows Live Writer 2.00，沒有預期的效果，才發現必須在 Blogger 裡增加掛載了 SyntaxHighlighter 系列的 .js。

由於不想在這篇文章延伸測試和主題不搭的功能，~~暫時改成由~~ ~~Online syntax highlighting for "Java"~~ ~~轉碼的 HighlightCode 顯示。~~整理測試OK之後，再開另一篇文章敘述。

尚待解決問題：

Blogger 問題：雖然我在 Blogger上設定每頁文章顯示為8篇，但是點選標籤(側邊欄的標籤Widget)時，卻是一開就20篇文章，只有點底下的 Pagination 分頁才能依照設定顯示每一頁8篇文章。這應該是 Blogger 本身的問題，尚未找到適切的設定可以調整。

老怪的挨踢日誌

12.12.2008

[Blogger Hacks] 讓Blogger有文章分頁功能

沒有留言:

張貼留言