彙整
【Blogger Hacks】MyHotPost 問題 和 測試 GoingUp! 紀錄
[WLW] 使用 Windows Live Writer + SyntaxHighlighter 整合編輯 (美化顯示在Blog文章中的程式碼)
本篇介紹如何運用 Windows Live Writer 和 SyntaxHighlighter (高亮度彩色程式碼關鍵字)的整合,一起來編輯文章中的程式碼,讓你文章中的程式碼更容易觀看,就如同現在經常看到的程式編輯器一樣,會將你的程式碼中的指令、關鍵字…等,用不同的顏色來顯示。
備註:寫著寫著沒想到此篇文章卻變的很長,不容易觀看,也想不到一篇文章居然修修改改了一星期,因此稍微編排一下段落,文章分為以下幾個段落:
一、前言 (通常 前言=廢話,可跳過)
二、軟體需求
三、安裝及設定步驟
四、在 Windows Live Writter 插入程式碼的操作
五、在 Blogger 的配合設定 (更新于 2008-12-17)
六、優缺點
七、參考文章
一、前言:
每次在文章中想要秀出程式碼,總是覺得不方便,早期是採用 <code>…</code> (可參考之前的文章: 將程式碼顯示在Blogger上) 的方式,但是每次都得要作好幾道步驟:轉碼、切換HTML編碼、用 code 標籤包起來、貼上程式碼、每一行最後加上 br 換行、切換網頁檢視、挑關鍵字、改顏色…,才能在文章中秀出比較可看的程式碼,實在是非常的不便和麻煩。
雖然很早就知道有 SyntaxHighlighter 這個好工具,但是有幾個原因讓我一直沒有更換:
- 程式碼之間可用 Textarea or Pre 標籤如下格式包起來。(詳細作法請參考文章中1~4項的介紹。)這種作法和我之前採用的 code 標籤方式類似 (可參考之前的文章: 將程式碼顯示在Blogger上) ,都必須將程式碼的前後用標籤包起來,而 code 標籤算是最簡單的方式,沒有分辨程式語法及彩色關鍵字功能,一切得完全靠自己手動。下圖的顯示就是用 code 標籤的處理結果:(2008-12-17更新)
<textarea name='code' class='程式碼的語法名稱'>
...程式碼...
</textarea>or
<pre name='code' class='程式碼的語法名稱'>
...程式碼...
</pre> - 需要將 Javascript 放置在自己的網頁空間,但是 MSN 及 Google Sites 都不支援放置Javascript和呼叫,我又懶的申請其他空間。
- 使用 Windows Live Writer 編輯文章時,還是得切換檢視方式。(在[版面配置]及[HTML編碼]二邊切換+編輯)
後來雖然有安裝測試 InsertCode,但是整體上操作還是感覺有些不方便。
直到看到 LiveWriter SyntaxHighlighter Plugin–點部落 的介紹,才決定測試及改成SyntaxHighlighter 的方式。(目前使用 SyntaxHighlighter 1.5.1)
二、軟體需求:
- Microsoft .NET Framework (2.0 以上)
- Windows Live Writer (2008 中文版)
- SyntaxHighlighter for Windows Live Writer (2.0 英文版)
三、安裝及設定步驟如下:
- 安裝 SyntaxHighlighter for Windows Live Writer ,打開網頁後,在下圖中的位置下載安裝檔案,然後再執行安裝即可。(安裝後為英文版 2.00,另外該軟體似乎為日本人寫的,有興趣朋友可以下載Source Code研究。)
- 打開 Blogger 的[版面配置]–[修改HTML],將下列CSS語法放在 ]]></b:skin> 前面。或是先行下載http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Styles/SyntaxHighlighter.css 再將內容貼上。(測試過採用link方式直接連結Google的CSS檔案,卻不能正確顯示)(因程式碼有點長,所以預設為收合狀態,可按 + expand source 展開)
.dp-highlighter { font-family: "Consolas","Courier New",Courier,mono,serif; font-size: 12px; background-color: #E7E5DC; width: 99%; overflow: auto; margin: 18px 0 18px 0 !important; padding-top: 1px; /* adds a little border on top when controls are hidden */ } /* clear styles */ .dp-highlighter ol, .dp-highlighter ol li, .dp-highlighter ol li span { margin: 0; padding: 0; border: none; } .dp-highlighter a, .dp-highlighter a:hover { background: none; border: none; padding: 0; margin: 0; } .dp-highlighter .bar { padding-left: 45px; } .dp-highlighter.collapsed .bar, .dp-highlighter.nogutter .bar { padding-left: 0px; } .dp-highlighter ol { list-style: decimal; /* for ie */ background-color: #fff; margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */ padding: 0px; color: #5C5C5C; } .dp-highlighter.nogutter ol, .dp-highlighter.nogutter ol li { list-style: none !important; margin-left: 0px !important; } .dp-highlighter ol li, .dp-highlighter .columns div { list-style: decimal-leading-zero; /* better look for others, override cascade from OL */ list-style-position: outside !important; border-left: 3px solid #6CE26C; background-color: #F8F8F8; color: #5C5C5C; padding: 0 3px 0 10px !important; margin: 0 !important; line-height: 14px; } .dp-highlighter.nogutter ol li, .dp-highlighter.nogutter .columns div { border: 0; } .dp-highlighter .columns { background-color: #F8F8F8; color: gray; overflow: hidden; width: 100%; } .dp-highlighter .columns div { padding-bottom: 5px; } .dp-highlighter ol li.alt { background-color: #FFF; color: inherit; } .dp-highlighter ol li span { color: black; background-color: inherit; } /* Adjust some properties when collapsed */ .dp-highlighter.collapsed ol { margin: 0px; } .dp-highlighter.collapsed ol li { display: none; } /* Additional modifications when in print-view */ .dp-highlighter.printing { border: none; } .dp-highlighter.printing .tools {display: none !important;} .dp-highlighter.printing li {display: list-item !important;} /* Styles for the tools */ .dp-highlighter .tools { padding: 3px 8px 3px 10px; font: 9px Verdana,Geneva,Arial,Helvetica,sans-serif; color: silver; background-color: #f8f8f8; padding-bottom: 10px; border-left: 3px solid #6CE26C; } .dp-highlighter.nogutter .tools { border-left: 0; } .dp-highlighter.collapsed .tools { border-bottom: 0; } .dp-highlighter .tools a { font-size: 9px; color: #a0a0a0; background-color: inherit; text-decoration: none; margin-right: 10px; } .dp-highlighter .tools a:hover { color: red; background-color: inherit; text-decoration: underline; } /* About dialog styles */ .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; } .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma,Verdana,Arial,sans-serif !important; } .dp-about td { padding: 10px; vertical-align: top; } .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; } .dp-about .title { color: red; background-color: inherit; font-weight: bold; } .dp-about .para { margin: 0 0 4px 0; } .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; } .dp-about .close { font-size: 11px; font-family: Tahoma,Verdana,Arial,sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; } /* Language specific styles */ .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; } .dp-highlighter .string { color: blue; background-color: inherit; } .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; } .dp-highlighter .preprocessor { color: gray; background-color: inherit; }
- 再把下列語法放在 </head> 前面。(因程式碼有點長,所以預設為收合狀態,可按 + expand source 展開)
<!-- syntaxhighlighter 1.5.1 --> //<!-- 此連結CSS的方式,不知道為何不能正確顯示,但是位址是正確的 //<link href='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/> //--> <script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shCore.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushCSharp.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushVb.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushPhp.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushJScript.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushSql.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushXml.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushPython.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushCss.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/tags /1.5.1/Scripts/shBrushCpp.js' type='text/javascript'/> //<!-- //window.onload 事件會在整個 HTML 頁面 (包含圖片等) 載入完成 //後,才進行執行。但若是您先前也有程式使用 window.onload 的話 //,這將是會把前一個 window.onload 的動作給覆蓋。 //此段說明內容來自:德瑞克(Derrick) 網址: http://sharedderrick.blogspot.com/2007/12/blogger-syntaxhighlighter.html //--> <SCRIPT type='text/javascript'> //<![CDATA[ window.onload = function () { dp.SyntaxHighlighter.ClipboardSwf='http://syntaxhighlighter.googlecode.com/svn/tags /1.5.1/Scripts/clipboard.swf'; dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code'); } //]]> </SCRIPT>
四、在 Windows Live Writter 插入程式碼的操作如下:
- 點選 WLW 功能表上的[插入]–[Code],或是右側邊的 [插入 Code]。如下二圖:
- 當出現下圖的視窗後,就可以貼上程式碼及調整設定了,操作如下圖說明:
- 按OK之後,會把剛剛貼上的程式碼當成一個[物件區塊],放在WLW編輯的文章中,而程式碼的周圍會出現一個虛線框,如下圖:
- 當你點選在編輯文章中的程式碼區塊時,就會如上圖出現一個虛線框,而在 WLW 的右側邊欄,則會出現一些可調整顯示的相關功能設定,如下圖:
- 以上就是設定 Blog 文章中的程式碼方式。
五、在 Blogger 的配合設定:(更新于 2008-12-17)
在 [設定]–[格式]檢查一下如下畫面的設定:轉換分行符號 請選(否),不然會在 </p>、<ol>、</ol>…的後面自動再多加一個 <br /> 換行符號。調整過後,幾乎就能和WLW看到的一樣了。(讓我奇怪的是,以前都不會如此,當然以前我也沒見過轉換分行符號的效果,現在終於看到了。 =.=)
六、優缺點:
優點:
- 不用在WLW切換檢視,再手動加入或修改語法。(幾乎是所見即所得)
- 不用另找空間存放 Javascript 然後再做呼叫了。(直接套用 Google 的程式。)
- 不用再手動調整一些語法顏色。(如果相關註解寫的夠清楚,也是很容易閱讀的。)
缺點:
- 無法針對程式碼中的一些Code 標上特別的顏色。例如:想特別用顏色註明增加/修改的部份。 這時候可以多花點心思在程式碼的註解上了,這不也正是一個程式設計師的好習慣之ㄧ嗎。
- 程式區塊上方的功能表不是中文。畢竟是直接套用 Google 上的 Javascript,有興趣的朋友可以到SyntaxHighlighter下載完整的程式回來研究,在功能表顯示的部份是在 shCore.js 這個檔案內,可以參考 YEHYEH 網站上提供的 shCore中文化 下載,不過該網站上的版本似乎是 1.5,而該作者也有作一些修正,建議不要直接和1.5.1版本混合套用。
- 過長的程式碼,須手動調整一下,才會比較美觀。在IE6中,超過頁面的程式碼會自動折行顯示;但是在 Firefox 卻是會不會自動折行顯示,而是在程式碼區塊最底下顯示一條滾動條。(在ZBLOG利用dp.SyntaxHighlighter進行語法高亮(轉)有提到可以調整 Textarea 和 Pre 標籤的CSS樣式來解決此問題,另找時間測試。而該文雖是轉來的,但是因為原文卻已經找不到了,只好僅放上該連結。)–2008-12-17 更新
七、參考文章:
- 如何在Google Blog中用SyntaxHighlighter–成長來自學習
- 在 Google Blogger 中使用 SyntaxHighlighter–彭嘉宏的學習筆記
- SyntaxHighlighter 語法高亮標記–lan 懶惰蟲筆記
- 用SyntaxHighlighter在Blog做程式語法教學說明–喬伊的天空
- plugin_syntaxhighlight–blogger-ext2
- plugin_syntaxhighlighter–Thinking More…
- LiveWriter SyntaxHighlighter Plugin–點部落
- SyntaxHighlighter for Windows Live Writer
- Blogger dp.SyntaxHighlighter斷行問題解決方法–YEHYEH
- ZBLOG利用dp.SyntaxHighlighter進行語法高亮(轉) (簡體) (2008-12-17 add)
[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 += ' <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 本身的問題,尚未找到適切的設定可以調整。
[Blogger Hacks]測試 MyHotPost 及增加每篇文章的點閱次數
之前看到 HotBox (熱盒子) 的作者公告,說他受到 MyHotPost 的刺激而決定提早改版,因此,不禁想看看 MyHotPost 是什麼咚咚。
Google 了一下找到 MyHotPost 取得你的熱門文章 這篇介紹,也開始動手安裝測試。安裝步驟很簡單,該篇文章介紹的還不錯,圖文並茂簡單明瞭,我這裡就不畫蛇添足了。
後來,其實 HotBox (熱盒子)已經改的不錯了,所以也只是把貼紙貼上而已。雖然有測試過一些展現的小工具,但是沒多久也拿掉了,一個熱門文章的 Box 我認為夠用了。
但是,如果想知道每一篇文章的點閱次數,HotBox (熱盒子) 似乎就有所不足了。
底下介紹運用 MyHotPost 將每一篇文章都加上點閱次數。
- 在 MyHotPost 官網上,註冊好之後,在[取得語法]那一頁最底下,有一段 JavaScript點閱數,如下圖,請先複製下來。
- 接著進入 Blogger 的[版面配置]–[修改HTML]–[展開小裝置範本]要打勾。
- 如果預計放置在每篇文章底下,有個鉛筆圖案的右邊,一般是第一列。所以請搜尋postQuickEdit,看到大約如下程式碼區段:
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> <span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span> </div>- 把剛剛複製的 Javascript 程式碼,加在 </span>…</div> 之間,前後再加上 span 標籤防止被換行,程式碼大約如下:(紅字部分請改為自己的 Javascript 程式碼)
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> <span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>
<span>點閱數: <script charset='UTF-8' src='http://myhotpost.kengao.tw/jscript/pinfo/824427bd4189a1f5573f97b1c222454e' type='text/javascript'/></span>
</div>- 這樣就OK了。
以上作法,除了在測邊列加入一張 MyHotPost 小貼紙,以及增加一段 Javascript,就不需要再增加其他的外掛 Widget 了。
唯一美中不足的是,MyHotPost 及 HotBox 在同一篇文章的點閱次數是不同的,畢竟是二位不同的作者寫的外掛Widget,而且可能計算的基礎會不同。
另外,如果想看到每篇文章的正確點閱數,必須打開該篇文章才能看到。在首頁上的文章 List 底下顯示的都只會是 點閱數: 1。(2008-12-22)
處理 IE6 不能顯示 PNG 透明背景的問題 (及 Google Sites 問題)
不知道為什麼,今天的網站突然開不出來,每次開到底下狀態列顯示[完成],畫面就突然消失了,變成一片空白。即使進入 Blogger 的網頁元素,狀況也一樣,網頁元素全部看不見。
後來嘗試著把一些元件(Widget),圖片及Javascript連結一樣一樣測試去除,最後才發現,原來是之前放在 Google Site 的 Javascript 檔案的問題,移除之後一切就正常能開啟了。(真是,忙了一個上午)
其實 Google Sites 並不允許直接放置 Javascript 檔案(.js)上去,我是將副檔名改成 .txt 放上去的,然後在網站程式碼裡,宣告為 Javascript 呼叫引用。
知道問題之後,只好嘗試著直接將 Javascript 程式碼寫在 Head 區域裡。
我想原因可能是:Google Sites 不再允許你把放上去的檔案,當作 Javascript 呼叫了。
以下為一段處理 PNG 檔案的 Javascript,目的是為了解決在IE6無法顯示 .png 的透明背景。之前的文章 在 MenuBar 上的圖片處理問題 有做介紹。
程式碼如下:(此段程式碼放在 </Head> 前面,紅色字必須記得加上去)
<SCRIPT type='text/javascript'>
//<![CDATA[
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
function fixPNG(myImage)
{
if ((version >= 5.5) && (version < 7) &&
(document.body.filters))
{
var imgID = (myImage.id) ? "id='" + myImage.id + "'":""
var imgClass = (myImage.className) ?
"class='" + myImage.className + "'":""
var imgTitle = (myImage.title) ?
"title='" + myImage.title +"'":"title='" + myImage.alt + "'"
var imgStyle = "display:inline-block;" + myImage.style.cssText
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" "width:" + myImage.width
+ "px; height:" + myImage.height
+ "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + myImage.src
+ "\',sizingMethod='scale');\"></span>"
myImage.outerHTML = strNewHTML
}
}
//]]>
</SCRIPT>
使用時,在 <img 標籤裡面加上 onload="fixPNG(this)" 即可。
[Blogger Hacks] 在 Blogger 標頭圖形上任意移動 Menubar 位置(2)
在前面一篇: [Blogger Hacks] 在 Blogger 標頭圖形上任意移動 Menubar 位置(1) 中,遇到的問題:
缺點:標頭的下方和 Post 區域之間,會多出一列空白。(IE多出的空白高度是Firefox的2倍)
這幾天一直在做調整和測試,總算有點成果。紀錄如下:
- 原本是直接在 Blogger 上的標頭的[網頁元素]上,直接放上 Title 背景圖,現在已移除。而移除的方式: [版面配置]–[網頁元素]–[標頭調整]–[編輯] 把背景圖移除。
- 把原本的上邊 Title 背景圖改放在 Outer-wrapper 的 CSS 區段。
- 區段程式碼如下:紅字部分為增加的部份。
#outer-wrapper {
width:850px;
margin:0px auto;
margin-top:20px; /* 原本在 Header-wrapper 區段與螢幕上緣的間距 */
text-align:$startSide;
font: $bodyFont;
background:url("http://sites.google.com/site/japlinchen/dang-an-gui/Head-03.gif?attredirects=0") no-repeat;
}
- 修改及調整 Head-wrapper 區段的設定。
- 區段程式碼如下:紅字部分為增加的部份。
#header-wrapper {
margin-top:20px;
*margin-top:0px;/*for IE6*/
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:0px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
background:transparent;
/*背景顏色改為透明,才能完整顯示背景圖*/
}
- 調整 Menubar 位置的部份,主要增加 margin-top 和 *margin-top (for IE)。
IE6的問題(尚待處理問題):
在 Firefox 上已經都能正常顯示,上邊(Title) 及下邊(Main) 之間的間距也都如預期;但是在 IE6 上還就是會多出一段間距。不過至少比之前的間距少很多了。
再找時間針對 IE6 作調整吧!
——以下於 2008-12-05 新增
在 #main-wrap1 及 #sidebar-wrap 區段加入 *margin:-10px 0 0; /*for IE6*/
以#main-wrap1 為例:
#main-wrap1 {
...
/* Header 和 Body 之間的間隙 */
margin:15px 0 0; /*margin:框線外緣以外的距離。順序:下右上左*/
padding:0 0 10px; /*padding:內容-框線內緣的距離。順序:下右上左*/
...
}IE6 似乎會把 margin+padding 加在一起,我試著只調整過 margin:0px 0 0; 還是會有多出間距,但是,當扣掉 padding 的 10px 之後就OK了。
所以,加入後的程式碼大約如下:
#main-wrap1 {
...
/* Header 和 Body 之間的間隙 */
margin:15px 0 0; /*margin:框線外緣以外的距離。順序:下右上左*/
*margin:-10px 0 0; /*專門給IE6看的*/
padding:0 0 10px; /*padding:內容-框線內緣的距離。順序:下右上左*/
...
}
[Blogger Hacks] 換掉 Google 自訂搜尋的醜醜按鈕
原本按照 Google 自訂搜尋的語法,[搜尋]的按鈕實在很醜,如下圖:
不管怎麼調整,常常都會是破壞畫面的兇手。
現在想將該醜醜的按鈕,換成圖片方式來顯示,方法很簡單,如下:
將原本的搜尋指令,如下:
<input value="搜尋" name="sa" type="submit"/>
置換成:
<input type="image" src="你的圖片位址" onClick="document.formname.submit()">
即可。
另外,我是採用CSS定義整個搜尋區塊的顯示,再用 DIV 配合使用。這樣比較方便處理文字與圖形的對齊問題,CSS定義如下:
<style type="text/CSS">
#searchbar{
display:block;
float:left;
position: relative;
top: 4px;
left: 120px;
width:300px;
margin:0 1px;
color:#ffffff;
border: 0px;
vertical-align:middle; /*to firefox 讓圖片文字垂直居中*/
}
</style>
而原本的 Google 自訂搜尋 Code,前後用 DIV 包起來,如下:
<div id="searchbar">
...[Google 自訂搜尋引擎]程式碼...
</div>