在 Blogger 裡加入 Google AdSense

Google AdSense 推出繁體中文版後，付款方式也可以使用小額的美金支票，友人加入 Google Adsense 也因此增加了一點不無小補的收入，我看了自己的 Counter，這樣的訪客流量應該也可以玩一下吧！所以也去申請了。過兩天果然接獲通知申請成功，馬上拿自己另外一個測試的 blog 來玩，搞定！接著就正式安裝起來。三種類型我都有裝：AdSense for Content (直接顯示圖文廣告)、AdSense for Search (透過搜尋置入廣告)、以及 Google 推薦 (推薦 Google 的相關產品)，彈性很不錯，置入廣告並不會和自己的 Blog 版型樣式有什麼衝突，根據 AdSense 產生的程式碼我還是有稍作修正，準備要正式開張斂財囉！

我做的修改有兩個特別的地方：首先，我用 AdSense for Search 取代部分我原來的搜尋元件（本來只有 SiteSearch，現在不但結合廣告，還多了原 Google 的網站搜尋，這真是一舉數得！不過再強調一次，找不找得到內容端看 Google Search Engine 有沒有 cache 你的 page，不要再問我為什麼搜尋引擎找不到自己的文章了），接下來另外拉一個獨立的網頁元素（Page Element），裡面就只貼廣告的 Javascript，搞定！不過因為我愛用 Firefox，內建的 Adblock Plus 會把 AdSense 一併自動地檔掉，所以自己用 Firefox 看這個模組會空有標題卻空無一物，有點奇怪，既然愛用 Firefox 就順便替它做廣告吧！因此放上推薦下載的官方 Logo，即使 AdSense 的廣告被擋光，該模組裡面還是有東西，看起來就不會突兀囉！想和我一樣裝 AdSense 的可以參考類似的作法。

首先，我把原來的 Google SiteSearch 程式碼改成下面（僅供參考，如果整個剪貼抄去的話就是替我賺錢喔），比起之前的 SiteSearch 更多一點彈性（Web Search + Blog Search，還可以自訂高度 50 pixels 或 100x100 的 Logo！我儘量不改 AdSense 給我的原始碼，有需要也可以套用一些 CSS style）：

<!-- SiteSearch Google -->
<form action="http://www.google.com/custom" target="_top" method="get">
<input value="abintech.blogspot.com" name="domains" type="hidden"/>
<label for="sbi" style="display: none">輸入您的搜尋字詞</label>
<input maxlength="255" id="sbi" value="" name="q" type="text"/>
<input id="sbb" value="搜尋" name="sa" type="submit"/>
<label for="sbb" style="display: none">提交搜尋表單</label>
<input id="ss0" value="" name="sitesearch" type="radio"/>
<label for="ss0" title="搜尋網頁"><font color="#ffffff" size="-1">Google</font></label>
<input id="ss1" checked value="abintech.blogspot.com" name="sitesearch" type="radio"/>
<label for="ss1" title="搜尋 abintech.blogspot.com"><font color="#ffffff" size="-1">This Blog</font></label>
<input value="pub-2957923128429638" name="client" type="hidden"/>
<input value="1" name="forid" type="hidden"/>
<input value="big5" name="ie" type="hidden"/>
<input value="big5" name="oe" type="hidden"/>
<input value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1" name="cof" type="hidden"/>
<input value="zh-TW" name="hl" type="hidden"/>
</form>
<!-- SiteSearch Google -->

接下來我拉了一個廣告推薦模組 (RECOMMEND + AD)，裡面 Firefox 的圖從這裡來的，不過連結我指向了台灣 Mozilla，接著貼入 AdSense for Content 的 200x90 五欄的文字廣告，另外再拉兩個 Google 推薦：附加 Google 工具列的 Firefox 以及宣告本網站透過 AdSense 增加收益的連結（程式碼 step by step 就會產生），打完收工，這樣就搞定了！不過以我的訪客數量，不知道要多久才能收到支票呢～（好心的大爺們，沒事多來我的 Blog 晃晃吧～）

延伸閱讀：
孤狗大神變財神？（Google AdSense懶人包）

在文末加入文章訂閱圖示

在預設的版型裡，每篇文章的結尾處，都可以透過管理介面去設定文章格式和功能（動作：版面配置->網頁元素->Blog 文章區塊->修改），像是文章的發表時間、要不要顯示作者、回應，或是一些項目的顯示用詞(comment->意見or回應)，另外，還有兩個有圖示的功能：快速編輯（管理者用的）、郵件發佈連結（透過 email 轉寄該文章內容）。現在各種網路書籤的服務大行其道，能不能一樣加入一些圖示供讀者訂閱或收錄自己 Blog 的文章，最好還可以和系統版型的圖示整齊地擺在一起呢？網站的收錄（訂閱 Feed 或是加入"我的最愛"書籤）比較簡單，畢竟 Feed URL 或是網站網址都是固定的，直接寫死連結就好，但是文章的訂閱牽扯到該篇文章的「永久連結」，這一定要發表文章後才會產生的網址，這時候透過 Blogger 的 Hack 才能做到了。

首先瞭解一下版型這部分的程式碼。打開範本的 HTML 程式碼（要展開 Widget 範本），找下面這一行：

<span class='post-icons'>

顧名思義，在這個<span>標籤裡面定義的是文章相關的圖示，這一行下面，會看到關於 email post links（郵件發佈連結）或是 quickedit pencil（快速編輯）的原始碼定義，我們要做的就是在這些圖示後面加入能訂閱文章的圖示，同屬於 post-icons 的區塊中。

步驟很簡單，首先，因為我想讓圖示都靠右，而且連結不會出現底線，因此先自訂 span.post-icons 的 style （有些範本預設沒定義）。接著仿造系統的圖示的定義方法（預設系統圖示定義的樣式表請參考這裡，參考 .email-post-icon 的 Style），在範本裡 CSS 的區段內再加入這些小圖示的 Class 定義，程式碼如下：

/* Adjust post footer*/
span.post-icons {
  float: right;
}
span.post-icons a{
  text-decoration: none;
}

/* Post footer icons*/
.HemiDemi-icon {
   background: url("http://abinlee.link.googlepages.com/Icon-HemiDemi.gif") no-repeat left;
   padding: 8px;
}
.funP-icon {
   background: url("http://abinlee.link.googlepages.com/Icon-funP.gif") no-repeat left;
   padding: 8px;
}
.delicious-icon {
   background: url("http://abinlee.link.googlepages.com/Icon-Delicious.gif") no-repeat left;
   padding: 8px;
}
.Technorati-icon {
   background: url("http://abinlee.link.googlepages.com/Icon-Technorati.png") no-repeat left;
   padding: 8px;
}
.Top-icon {
   background: url("http://abinlee.link.googlepages.com/Icon-Top.gif") no-repeat left;
   padding: 8px;
}

從上面可以看到，我有五個小圖示(16x16)，其中四個分別是用來加入 HemiDemi (黑米共享書籤), funP (推推王), Delicious, Technorati 四個書籤服務（HemiDemi 和 funP 是中文的），最後一個是利用 Javascript 讓閱讀的頁面跳到整個頁首，以上用到的圖片和參數要自行調整。

接著是重頭戲，貼入顯示圖示和連結的程式碼到文末去。先找到上面提到的那一行： <span class='post-icons'>，安排圖示的順序，像自己想看到的效果是：在首頁只顯示快速編輯和跳到頁首的圖示，當使用者點入特定文章的完整連結，才出現訂閱的圖示。所以在標籤 <span class='post-icons'> 和 <span> 之間，用下面的程式碼取代：

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>

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

  <!-- email post links -->
  <b:if cond='data:post.emailPostUrl'>
    <span class='item-action'>
    <a expr:href='data:post.emailPostUrl' title='Email Post'>
      <span class='email-post-icon'>&#160;</span>
    </a>
    </span>
  </b:if>
 
  <!-- Bookmark icons -->               
  <a expr:href='"http://www.hemidemi.com/user_bookmark/new?title=" + data:post.title + "&amp;url=" + data:post.url' target='_blank' title='Add to HEMiDEMi'>
    <span class='HemiDemi-icon'>&#160;</span>
  </a>
  <a expr:href='"http://funp.com/pages/submit/add.php?url=" + data:post.url + "&amp;s=" + data:post.title + "&amp;via=tools"' target='_blank' title='Add to funP'>
    <span class='funP-icon'>&#160;</span>
  </a>
  <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Add to Delicious'>
    <span class='delicious-icon'>&#160;</span>
  </a>
  <a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank' title='Add to Technorati Favorites'>
    <span class='Technorati-icon'>&#160;</span>
  </a>
</b:if>

<a href='javascript:scroll(0,0)' title='Top of this page'>
  <span class='Top-icon'>&#160;</span>
</a>

搞定！所以在該文章的固定連結裡顯示完整文章的時候，最多會出現七個圖示（其中四個是書籤訂閱），而在首頁裡最多兩個圖示，分別是快速編輯和跳到頁首。（註：像 data:post.url/data:post.title 這種變數和前後 '+' 的空白不能刪掉，砍掉會有奇怪的錯誤發生。）沒有你要的書籤服務？可以參閱下面 Angelo 的文章，作者很用心地整理了大部分坊間有提供類似服務的程式碼喔～

參考文章：
各大共享書籤代碼

更新：
2007/05/31 - 更改順序，拿掉 MyShare 的圖示，並取代成另外一個當下流行的 funP 「推推王」。

調整 Post footer 的回應連結

在首頁每篇文章的文末都會顯示目前回應（迴響、意見...就是 Comment）的數量，這些文字一併附連結讓讀者可以發表意見。不過習慣一些中文 Blog 系統的讀者常常一時找不到：「哪裡可以發表意見啊」，殊不知要去點那個有數字的「連結」，或是跳轉完整文章再看文末才會有「張貼意見」的字樣。我做的「小手術」只是把「張貼意見」的字樣特別拉出來，並加上圖示，讓讀者能比較容易找到發表回應的地方。

Blogger 裡面因應多國語文有很多顯示的字串都是定義成變數，不同語系字串之間比較容易轉換顯示，可惜並不是所有的字串變數都能讓使用者去更改和定義。舉例來說，就 comment 這個 term，變數名稱是：<data:top.commentLabel/>，西方語系裡還有複數型：< data:top.commentLabelPlural/>（應該就是加 's' 吧），在中文裡這兩個變數顯示的字串應該一樣，也讓使用者能自行定義（看是要叫它"回應"還是"意見"隨便你）。但是上面說的「張貼意見」字串也是變數： <data:postCommentMsg/>，但是使用者就沒有地方可以改它的對應中文字串囉！而在調整回應連結的時候，我也希望儘量少 hard code 中文進去，最好使用這類的既有變數才有彈性。因此改完範本以後會發現，在區塊裡面多了類似「張貼意見」的中文，但是更改的程式裡面卻沒有用到 hard code 的中文字喔！

原來的程式碼應該只有下面短短幾行：

<span class='post-comment-link'>
  <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:post.allowComments'>
      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
    </b:if>
  </b:if>
</span>

意思是：如果停留在首頁的時候，而且允許讀者能自由回應的狀態下，顯示發表回應的介面連結。如果回應數量是 1 則顯示回應的單數量詞，否則顯示複數的量詞（真怪，把程式翻譯成一段話）。我的調整是把以上這段 <span> 標籤內的內容，取代成下面的程式：

<span class='post-comment-link'>
  <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:post.allowComments'>
     <span class='comment-link'>|</span>
     <span class='comment-link'><data:top.commentLabelPlural/>:</span>
      <b:if cond='data:post.numComments == 0'>
        <span class='comment-link'>0</span>
      <b:else/>
        <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
        <data:post.numComments/></a>
      </b:if>
    </b:if>
  </b:if>
</span>
<span class='post-comment-link'>
  <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:post.allowComments'>
    <span class='comment-link'>|</span>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><img src='http://abinlee.link.googlepages.com/Icon-Comment.gif' border='0'/> <data:postCommentMsg/></a>
    </b:if>
  </b:if>
</span>

解釋一下，首先我加了 '|' 當作每項資訊的分隔符號（套用 class='comment-link' 是為了版面整齊），接著我把原來回應的格式：「1 回應」改成「回應: 1」，用的是複數型變數，即使是英文版型應該也不會很奇怪，最後多加了「張貼意見」的字串變數，並且在前面貼了一個小圖示，這樣讀者想發表回應的時候，是不是更直覺清楚，也很容易找到呢？

在版面格式中放入小圖示

在 Hack Blogger 的過程中，改版型和調整範本的時候發現，原來放圖片貼圖示也是很有技巧的。舉例來說，文章裡面我們想貼圖，大多直接用標準的 HTML 語法，像是這樣的標籤： <img src="網址">，最多加一些參數調整。可是呢，很多的項目在 Blogger 裡面被模組化，定義在特定的 Class 或 ID 裡面，就不能用 <img> 這個標籤了。後來研究偷看到 Blogger 的系統圖示在 CSS 裡的定義方式，喔～原來是這樣，他用背景圖和 no-repeat 參數來貼圖示，而且還可以微調圖片的位置，CSS 還有模組化的好處（而且也沒辦法另存新檔偷你的圖示），實在是學到了啊！利用上述技巧替 Blog 版面格式的一些項目加些圖示吧！（整理如下，每個人的版型不同，以下程式並不一定都適用）

首先，在每篇文章的發表日期前面加上小圖示：

h2.date-header {
  margin: 0;
  padding: 0 0 0 15px;
  background: url("http://abinlee.link.googlepages.com/Icon-Date.gif") no-repeat 1px 2px; 
}

Sidebar 上不是會有一些條列式的項目嗎？在這些項目前面加上一個小圖示，條列起來更整齊更一目了然：

.sidebar li {
  margin:0;
  line-height:1.5em;
  background:url("http://abinlee.link.googlepages.com/Icon-Bullet.gif") no-repeat 3px .45em;
  padding:0 0 5px 15px;
}

個人 Profile 的連結一樣可以動手腳，在連結前面加一個圖示：

.profile-link {
  font: normal normal 82% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 0 0 0 15px;
  background: url("http://abinlee.link.googlepages.com/Icon-Profile.gif") no-repeat 0 0;
}

以上整理，如果要放到 CSS 的版面圖示，要用類似上面的方法來做才有彈性。好，那如果文章裡面的貼圖也想搞花樣呢？那還是要搞 <img> 標籤了。我舉自己的例子，像我想在文章的貼圖裡自動加線框，並保留一點點文繞圖的空間，範例如下：

.post-body img {
  padding:4px;
  border:1px solid #333333;
}

幾個網頁跳轉的技巧

透過簡單的幾行 Javascript，就可以讓你的 Blog 文章在瀏覽版面的時候有更多彈性，這裡整理幾種方法：

1. 上一頁 (Previous page)

<a href="javascript:history.back()">Previous page</a>

也可以用這種：

<a href="javascript:history.go(-1)">Previous page</a>

裡面的數字 "-1" 如果改成 "-2", "-3" 之類的，就代表是要回到前兩頁、前三頁～

2. 下一頁 (Next page)

<a href="javascript:history.forward()">Next page</a>

同上，一樣可以改成：

<a href="javascript:history.go(1)">Next page</a>

3. 跳回頁首 (Top of page)

<a href='javascript:scroll(0,0)'>Top of Page</a>

就程式上來看的意思。要求瀏覽器自動往上捲，捲到絕對座標是 (0, 0) 頁首的位置

4. 跳回文首 (Top of post)

這個比較複雜，因為程式本身如果沒有處理的話，並沒辦法知道每篇文章的文首在哪裡。一般來說，每個文首的地方應該要有識別的標籤，像是 Post-ID，然後透過 Javascript 去找到該物件，讓捲軸捲到文首去，語法大致如下：

<a onclick='"javascript:document.getElementById(\"post-ID\").scrollIntoView(true);"' href='javascript:void(0);'>Top of Post</a>

中間那個 Post-ID 要自己搞定。如果是要用到 Blogger.com 上面，要改成這樣：

<a expr:onclick='"javascript:document.getElementById(\"post-" + data:post.id + "\").scrollIntoView(true);"' href='javascript:void(0);'>Top of Post</a>

只要把以上代碼塞到文末，或是頁尾，在瀏覽文章的時候頁面的跳轉就可以很方便了。(當然，前提是瀏覽器要打開對 Javascript 的支援)

參考文章：
網站建置百寶箱：上頁下頁
Blogger beta:"Top of Page"、"Top of post"

計算網站開張天數

以下這段 Javascript 程式，用來計算特定時間與今天的差距，先抓出使用者電腦的時間，去和指定的時間做計算，最後在格式化成中文的年月日表現方式。原程式是英文的，改成中文版的人並不用心，沒有把程式最佳化一下，只把文字中文化，因為英文有複數要加 s 的問題，中文沒有，所以我就把程式改短一點，拿掉沒有用的判斷。放到 Blog 裡面，設定的指定日期只要是你寫第一篇 Blog 的日子，就可以拿來顯示 Blog 已經開站幾天了。

這一段是宣告定義的部分，可以放在最前面：

<script language="JavaScript">
//<![CDATA[
function HowLongSince(startyear, startmonth, startdate) {
  var DaysInMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
  var today = new Date()
  var thisyear = today.getFullYear();
  var thismonth = today.getMonth();
  var thisdate = today.getDate();
  mstart = new Date(startyear, startmonth, 1);
  mend = new Date(thisyear, thismonth, 1);
  ydiff = thisyear - mstart.getFullYear();
  mdiff = thismonth - mstart.getMonth();
  days1 = (mstart - new Date(startyear, startmonth - 1,startdate))/(24*60*60*1000) - 1;
  days2 = (new Date(thisyear,thismonth,thisdate) - mend)/(24*60*60*1000) + 1;
  dayst = days1 + days2;
  if (dayst >= DaysInMonth[startmonth - 1])  {
    mdiff += 1;
    dayst -= DaysInMonth[startmonth - 1];
  }
  if (ydiff == 0 && mdiff == 0 && dayst == 0)
    message = "今天";
  else {
    if (mdiff > 11) { mdiff = 0; ydiff++; }
    if (mdiff < 0) { mdiff = mdiff + 12; ydiff--; }
    message = (ydiff != 0 ? ydiff + " 年" : "");
    message += (mdiff != 0 ? " " + mdiff + " 個月" : "");
    if (ydiff != 0 && mdiff != 0) message += "又";
    message += (dayst!=0 ? " " + dayst+" 天" : "");
  }
  return message;
}
//]]>
</script>


當要呼叫使用的時候，以下是使用的範例：（紅色的部分自己改日期）

<p>Established:
  <script language="JavaScript">document.write(HowLongSince(2006,11,3)); </script>
</p>

其他應用，可以用來倒數特定日子的到來、或是提醒紀念日，彈性就根據個人需要來調整囉！

雜記 Blogger Beta 相關服務

玩 Blogger Beta 一陣子以來，越來越覺得它是個很有彈性的東西，不只是本身提供的功能，另外就是擴充性(Hack)以及其他工具的整合性，幾乎不比自己架站差了。不過也因為支援的工具太多，我也一直試圖去找適用我使用習慣的 Blog 流程，到此為止，差不多算是定案了，因此，在這邊整理並分享一下。

首先，因為 Blogger 的編輯介面有夠差，尤其所謂的 WYSIWYG 的工具，總自以為是地要幫我轉換換行<br>，如果我要剪貼程式碼，那根本就是爛給你看。所以，我在 Blogger 的發佈介面只開啟 HTML 的原始碼模式，別的地方寫好後再貼原始碼過來。而我使用的編寫工具，是 Writely，現在改名叫 Google Docs & Spreadsheets。雖然它也有一點點問題，就是為了編寫版面好看原始碼會塞一些空白進去，不過這樣不會影響版面和內容，這個線上文書編輯器用來寫 Blog 超好用，我在其他 Blog 也都是用這個當記事簿來寫。過程很簡單，就打字->排版（包括貼圖、塞連結、改格式）->切換到 HTML->貼入原始碼，後來又發現原來 Google 這個線上工具也支援直接發表到 Blogger Beta，實在太讚了（還是有小問題，就是標籤裡的格式 ID 會被濾掉），除了整合發表外，另一方面也可以拿 Writely 來做 Blog 文章備份，真的是好用！我也評估過用 FireFox 的 Plugin: Performancing、或是 M$ 的 Windows Live Writer，分別也都支援了 Blogger Beta，不過，說穿了他們都是離線編輯器，Performancing 也有自動轉換 <br> 的問題，最後還是棄之不用。

解決了文字編輯的問題，那圖呢？Blogger 提供的文章內圖片插入上傳是很簡單，但是圖片一旦上傳後不能管理也不能拿掉，最糟糕的是還會被動手腳（改檔名、壓縮），這並不是個好的方案。一開始我仿照別人的作法，把一些小圖放到我 Google Pages 的空間去，不過隨著未來圖片變大變多，用 Google Pages 來放也不是長久之道，因此我拆開來，我另外開通了 Google Picasa Web Album 服務，可以開相簿讓我整理大一點的圖片（缺點：只能放 .jpg），另外，在 Google Pages 上另外再開一個新網站（一個帳號多個網站的功能），專門用來放小圖（不限格式）和連結檔。聽起來很複雜喔！明明是一個 Blog 服務，為什麼編輯排版另外用一套、放小圖連結用也一套、放照片大圖又另一套？其實這些個服務都是 Google 的，一方面各有所長，也都有其便利性，當然穩定性也還值得信賴，在沒有更好的整合性 Solution 之前，我還是會這樣用下去的。（分久必合、合久必分？）

以上很多的評估動作消息來源都是來自 Angelo 的 Blog ，參考的連結如下：
Google Docs 可 Publish to Blogger Beta
如何快速加入Blogger Beta 到 Windows Live Writer
[FireFox 附加元件]Blog離線編輯工具 Performancing

Asus WL-500g 改機前言

手邊的這台 Asus WL-500g 無線頻寬分享器是當時辦 Sonet ADSL 送的贈品，當時換算了一下市價與其他贈品或方案比較，發現還蠻划算的，所以誤打誤撞就有了這個玩意。後來不經意發現這台分享器官方網站原來有釋出 GPL 的韌體原始碼，重點是有人開始改它並且釋出，從此就有了非官方版本的韌體出現。這類裝置核心都是 linux kernel 的 embedded system，本來只能用預設提供的介面 (Ex. Web) 來設定，修改過的韌體開放了完整的 linux 操作環境，所以使用者可以把分享器當作一台裝了 linux 的小電腦登入操作，進行各種修改和調整。

網路上找得到蠻詳盡的操作步驟文件，我也照了步驟修改完畢，中間還是有遇到一點問題需要修改，因此就把參考的文件用自己的方式重新翻譯改版，一方面作為自己改機的紀錄筆記，一方面也可以提供有需要的人參考。除了 WL500g，其他機種 (如 WL500b, WL500g Deluxe, WLHDD ..) 應該也大同小異，只是記得更新 firmware 的時候要抓到和裝置相對應的版本就行了。

這個記錄基本上也是根據 Oleg 的 firmware 和 macsat 的 guides 來進行的，如果需要原文和相關資源可以到他們的網站和討論區找。由於是「筆記」，並不是完整操作手冊，所以會用比較精簡的方式紀錄改機流程以及該注意的部分，細節和背後該具備的知識這裡不再覆述。整個流程會包含（其中前 2-4 項有順序性和必要性，其他都是 optional 的）：

1. Asus WL-500g 硬體規格剖析
2. Oleg 韌體更新與磁碟分割
3. 基本環境設定 - ipkg 軟體套件系統安裝
4. 更新 Asus WL-500g 的系統 C Library: uClibc
5. SSH 伺服器設定
6. 新增使用者群組及修改 Shell 啟動文件
7. Samba 伺服器（網路芳鄰檔案分享）設定
8. 支援 PHP 的網頁伺服器 (thttpd) 安裝設定
9. 支援 PHP 的網頁伺服器 (lighttpd + FastCGI) 安裝設定
10. 讓網頁伺服器支援 perl 的 CGI (microperl)
11. 安全的 FTP Server: VSFTP
12. 輕巧的 Mail Agent (esmtp)
13. 安裝自動排程執行服務 (crontab)
14. 設定流量監控網頁 (RRDTool)
15. 其他應用程式補完

以上大部分是 macsat 的 guides 裡的內容，貪得無厭的我常常會亂裝一些有的沒的，也會一併記錄下來，放入最後一篇的其他應用程式補完。

機器本身的能力有限，加上並沒有提供全系列的 linux AP 支援 (要支援 MIPS CPU 版本的軟體才能裝)，所以我並不會考慮去試一些 linux 上常見的 AP (像是 Apache、MySQL、常見的論壇和 Blog 程式、甚至在上面跑 BT 或驢子)，純粹只是根據我個人的需求和興趣來安裝使用。如果我的 WL500g 又被我塞了什麼東西上去，這邊也會一併做更新。

作者和一般回應的標示區別 (Author comment highlighting)

在自己的 Blog 裡會有一些路人針對文章來做回應或留言討論，身為作者，也可以針對這些一般的回應做出回答或解釋，如果不把作者的回應和一般人的做一點區分，當回應很多的時候都混在一起，也會搞不清楚自己是否回答過。因此，可以在樣版裡做一點手腳，如果判斷到發表回應的人是作者，就做一點樣式上的改變，用來區別作者和一般人的回應。我想過很多作法，不過有些複雜，改動的程式也要很多，算了，還是用最簡單、變動最少的方式，只更改作者回應的字型顏色就好。

打開範本 (Template) 直接修改 HTML，記得要展開 Widget，在 CSS 的區段先加入以下定義（指定作者回應的字型顏色）：

/* Author Comment Styles */
#comments-block .author-comment {
  color: #f00;
}

接著，在範本的程式碼裡尋找下面這一行：

<dl id='comments-block'>

這一行下面開始的迴圈跑的就是在顯示文章一篇篇的回應留言。我把整段顯示回應的程式碼貼出來，新增和修改的部分用紅色標註，如果要用也可以直接直接複製下面整段，貼入蓋掉原來的部分。

<dl id='comments-block'>
  <b:loop values='data:post.comments' var='comment'>
    <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
      <a expr:name='data:comment.anchorName'/>
      <b:if cond='data:comment.authorUrl'>
        <!-- Author Comment highlighting -->
        <b:if cond='data:comment.author == data:post.author'>
          <b:if cond='data:comment.authorClass == "blogger-comment-icon"'>
            <b><data:comment.author/></b> :
          <b:else/>
            <a expr:href='data:comment.authorUrl' rel='nofollow'>
              <data:comment.author/></a> <data:commentPostedByMsg/>
          </b:if>
        <b:else/>
          <a expr:href='data:comment.authorUrl' rel='nofollow'>
            <data:comment.author/></a> <data:commentPostedByMsg/>
        </b:if>
      <b:else/>
        <data:comment.author/> <data:commentPostedByMsg/>
      </b:if>
    </dt>
    <dd class='comment-body'>
      <b:if cond='data:comment.isDeleted'>
        <span class='deleted-comment'><p><data:comment.body/></p></span>
      <b:else/>
        <!-- Author Comment highlighting -->
        <b:if cond='data:comment.author == data:post.author'>
          <b:if cond='data:comment.authorClass == "blogger-comment-icon"'>
            <p class='author-comment'><data:comment.body/></p>
          <b:else/>
            <p><data:comment.body/></p>
          </b:if>
        <b:else/>
          <p><data:comment.body/></p>
        </b:if>
      </b:if>
    </dd>
    <dd class='comment-footer'>
      <span class='comment-timestamp'>
        <a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
          <data:comment.timestamp/></a>
        <b:include data='comment' name='commentDeleteIcon'/>
      </span>
    </dd>
  </b:loop>
</dl>

主要的改變有：更改顯示作者的樣式，作者名稱字型粗體沒有連結，並且以冒號結尾。另外指定作者回應的內文套用 CSS 樣式： "author-comment"，也就是一開始另外定義的 Class，這些變動都可以依照個人配色和喜好去更改。

不過，這段程式碼用來判斷作者還是有瑕疵，如果回應的人自訂名稱，而自訂的名字「剛好」和 Blog 作者名字字串一模一樣，而且他也是 Blogger 的使用者，那他的回應也可以「假裝」是作者的，以上的程式碼並沒辦法作更嚴謹的檢查。這也是最後決定不要在上面玩太多手腳，只改一點樣式顏色作些區別就好了。

更新：因為 Blogger 曾新增部份樣板功能，像支援非 Blogger 帳號留言（因此留言者前面多了一個識別用小圖示），所以以上程式碼也做了一點修正，並且參照留言者（白花花）的建議，對作者回應的識別度稍稍加強。

再更新：因為 Blogger 新增的「回應頭像」功能，導致原來判斷作者的第二項檢查：cond='data:comment.authorClass == "blogger-comment-icon"' 會失效，如果要這個 Hack 正常無誤有兩種解決方法：請到「設定」、「意見」裡「在評論上顯示簡介圖片」功能勾選到「否」，這個 Hack 就會正常（而且禁用回應圖像，用 Blogger 小圖示），第二種則是拿掉上面提到「第二項檢查」的 if else 判斷句，這樣也可以搭配新的回應圖像功能使用。

參考文章：
Comment Notification and Author Comment Highlighting
Blogger beta:高亮作者评论
(新增)[分享] 終於研究成功的提高Blogger作者回應的識別度

應用 JSON 實現「最新文章」、「最新回應」和「Blog 聯播」

之前在Blogger Buzz(Blogger.com的 Blog)，看到一篇消息說 Blogger 支援 JSON，說實話我不知道那是啥（JSON = JavaScript Object Notation, 讓跨網站也可以讀取到的資料結構?!），不過有人實作出一些東西來，就知道這玩意的厲害了。

之前自己這篇提到如何利用 Feed 在 Blogger 裡加入最新文章和回應，但使用上有些限制，像是篇數（只允許五篇）還有格式內容，更新好像也不夠快，從小帽的 Blog 看到有堯利用 JSON 做出最新文章和回應的 Javascript，還可以做 Blog 聯播或是特定標籤的 Feed，這實在是太厲害了，因此參考兩位的文章也做出屬於自己的 Javascript，用來顯示最新回應、最新文章和 Blog 聯播。使用方法很簡單，只要在 Sidebar 的網頁元素(Page Elements)裡新增 HTML/JavaScript 程式碼，依自己的需求分別加入下面的元件，貼入程式碼就好了（紅色部分的程式碼要依個人設定和需求去更改，像有一行數字等於 10 代表的意思是要顯示十篇，另一個 temp 那行是表示顯示的內容和格式，可以自行修改）。

最新回應 (Recent Comments)：

<div id="newComments">
  Loading...
  <noscript>failed!<br/>Javascript not supported here!</noscript>
</div>

<script>
function handleComments(json) {

  function compareentry(a,b) {
  order= Date.parse(a.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT')) - Date.parse(b.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT'));
  return 0-order;
  }

  var temp = '<ul>';
  var CommentShow = 10;
  var sortentry = json.feed.entry.sort(compareentry);
  for (var i=0, Comment; Comment = sortentry[i]; i++) {
    if (i >= CommentShow)
      break;
    var title=Comment.content.$t.substr(0,30);
    title=title.replace(new RegExp("BR","gm"), "");
    title=title.replace(new RegExp("</>","gm"), " ");
    var link=Comment.link[0].href.replace("#", "#comment-");
    var authorname=Comment.author[0].name.$t;
    var timestamp=Comment.published.$t.substr(0,10);
    temp += '<li><span class="item-title">'+authorname+': <a href="'+link+'">'+ title +'</a> - '+timestamp+'</span></li>';
  }
  temp+="</ul>";
  document.getElementById("newComments").innerHTML = temp;
}
</script>

<script src="/feeds/comments/default?alt=json-in-script&callback=handleComments" type="text/javascript"/></script>

至於最新文章 (Recent Posts) 的部分，同樣是用上面那段程式碼，有小地方部分要修改，Feed 的網址也要改：

<div id="newPosts">
  Loading...
  <noscript>failed!<br/>Javascript not supported here!</noscript>
</div>

<script>
function handlePosts(json) {

  function compareentry(a,b) {
    order= Date.parse(a.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT')) - Date.parse(b.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT'));
    return 0-order;
  }

  var temp = '<ul>';
  var PostShow = 10;
  var sortentry = json.feed.entry.sort(compareentry);
  for (var i=0, Post; Post = sortentry[i]; i++) {
    if (i >= PostShow)
      break;
    var title=Post.title.$t;
    var j=0;
    while (j < Post.link.length && Post.link[j].rel != "alternate")
      j++;
    var link=Post.link[j].href;
    var authorname=Post.author[0].name.$t;
    var timestamp=Post.published.$t.substr(0,10);
    temp += '<li><span class="item-title">'+authorname+': <a href="'+link+'">'+ title +'</a> - '+timestamp+'</span></li>';
  }
  temp+="</ul>";
  document.getElementById("newPosts").innerHTML = temp;
}
</script>

<script src="/feeds/posts/default?alt=json-in-script&callback=handlePosts" type="text/javascript">

不過如果是用來顯示自己 Blog 的最新文章，作者也只有自己一個人，那麼 authorname 的欄位也可以自己選擇要不要拿掉。

最後是所謂的 Blog 聯播 (Blogrolls)。說穿了，其實聯播就是在自己的 Blog 首頁顯示別人 Blog 的文章，訂閱別人的 Feed URL，只要改「最新文章」的倒數第二行，把 Blog Feed 網址改成對方的就行了。所以有了這招，可以取代掉 Blogger 本來內建的 Feed 模組（因為該模組限制訂閱五篇，又限制顯示的格式）。

另外，上面提到的都是處理整個 Blog 最新文章的 Feed，如果想要訂閱的是某分類標籤的所有文章，那麼該如何處置？一樣，只要在訂閱的 Feed URL 動手腳就行了，改成下面這樣：

<script src="http://聯播或你的Blog網址/feeds/posts/summary/-/標籤名稱/?alt=json-in- script&callback=handlePosts" type="text/javascript"></script>

作者有提到一個標籤加上 Feed 的妙用：將你要推薦、頂置或公告的文章都加上一個特定標籤，然後訂閱這個標籤的 Feed 顯示在 Blog 的元件裡，這樣你在首頁就可以有動態的頂置或是公告區囉！如果嫌上面的程式還要修改很麻煩，可以用原作者自己寫的「程式產生器」來產生自己的程式碼，以上的程式產生器請參閱參考文章裡的連結。

參考文章：
小帽：Blogger 聯播程式產生器 - 增加「最新文章與最新回應」與「標籤訂閱」程式產生器
堯：Blogger(Beta) 最新回應程式產生器
Blogger聯播程式產生器(PartII)
Blogger(Beta)最新文章與最新回應JavaScript Code Part II

[注意]：
在回答網友問題的過程中發現，以上實現「最新文章」和「最新回應」的方法，如果同時使用（就是裝兩個以上），當瀏覽器是 IE 的時候，因為裡面有兩套相同的 Javascript 原始碼，內容會錯亂導致只有一個內容出得來（Firefox 正常）。請記得更改裡面的一些定義（像是把 "newComments" 字串在不同模組裡用不同的名稱），或是把 Javascript 的函式統一搬到範本裡面，每個 Element 負責用不同的 Feed URL 呼叫它就行了，如果直接用我範例的程式碼直接貼多個模組出來，IE 是可能會錯亂的喔！

[8/28 更新]：
由於 Blogger 更改了回應 的 RSS Comment Feed 的格式，本來 Feed 裡 Title 欄位有資料，是部分的 Comment 文字，更改之後 Title 欄位是空白的，會導致拿 Feed 來做「最新回應」模組時回應內容不見。因此，「最新文章」可以抓 title 當標題，而「最新回應」就要抓內容 content 的部分字串來用（還要修正 link、取代不必要的換行符號）。

內嵌搜尋引擎來做 Blog 的全文搜尋 (Blog Search)

之前補充過，因為拿掉 NavBar，又希望使用 Blogger 內建的全文搜尋功能，所以補了一個 Search Engine 在 SideBar 上面，不過實際使用上，對最新的文章好像不夠快、UTF-8 中文好像也有點問題。於是找了一下，匯總了幾個能夠內嵌 HTML 的搜尋引擎語法，能夠針對個人的 Blog 提供全文搜尋功能。

第一個，當然是萬能的 Google 大神，利用 Google 的 Site Search 內嵌語法做修改，直接更改紅色的網址參數，就可以訂製自己的 Google Site Search：(CSS style 請依照自己的樣式去自訂)

<form method="get" action="http://www.google.com/search">
<input type="text" name="q" size="32" maxlength="255" value="">
<input type="hidden" name="sitesearch" value="abintech.blogspot.com">
<input type="submit" name="btnG" value="Google search">
</form>

第二個，是用微軟的新服務：Windows Live Search，用 MSN (Live Passport) 帳號登入後可以試用，建立自己的搜尋巨集，方法請參閱我的另一篇文章。當有了屬於自己的搜尋巨集，找出自己巨集的名稱，利用下面的程式碼，把紅色的部分改成你自己巨集的名稱：

<form id="searchFrm" class="searchform" action="http://beta.search.live.com/results.aspx" method="get">
<input type="hidden" name="q1" value="macro:abinlee.livespace" />
<input TYPE=text id="q" name="q" size="15" name="s" maxlength="255"/>
<input type=submit name="go" value="Live Search">
</form>

原則上以上兩種，都是利用現成的搜尋引擎，將搜尋範圍縮小到特定的網站或網址，以達到特定 Blog 的全文搜尋目的。如果 Blog 的通告不靈或是那些引擎沒有到該網站去"拜訪"，那麼最新的 Blog 文章可能還是找不到。很多人愛用的是專業的 Blog Search Service: Technorati，申請註冊後可以替 Blog 打造一個專用、支援 UTF-8 中文的 Blog 專用搜尋引擎，並且提供一些相關統計資料。註冊登記後它針對 Blog 有提供一段 Javascript 的程式碼供人嵌入使用，問題來了，沒錯，你可以直接貼進 HTML/Javascript 的 Page Element 裡面，不過，如果不喜歡那個樣式，想打造自己嵌入式的引擎，那又要自己偷程式碼了。我直接看在 Technorati 管理介面裡 Blog Search 原始碼抓出來的，一樣只要改紅色的地方就好：

<form method="get" action="http://technorati.com/search.php">
<input type="hidden" name="sub" value="searchlet" />
<input maxlength="255" value="" name="s" type="text"/>
<input value="http://abintech.blogspot.com" name="from" type="hidden"/>
<input type="submit" value="Technorati Search" />
</form>

就搜尋的能力來講，我覺得 Technorati 的最快、功能最完整，可能是因為它並不是去「茫茫網海」裡去找，而是只搜尋那些 Blog 的 Feed，範圍就小了很多。當然，感覺好像有上面那段程式碼就不用註冊、直接偷用 Technorati 的引擎不就好了？不過實際上，還是建議先去註冊，因為註冊完可以登錄自己 Blog 的資訊進去，除了 Technorati 會去找登記過的 Blog 來縮小範圍外，它自己的通告系統也可以增加 Blog 的曝光度，搭配上面另外兩種現成搜尋引擎使用，可以讓 Blog 的靜態網頁和資料更容易被找到，網站全文搜尋也能夠更完整。如果拿上面的程式碼塞入你的網頁（或是測試），搜尋中文關鍵字發現找不大到，請確認網頁語系，我是都用 UTF-8，中文才不會有問題。

參考文章：
搜尋個人 Blog 的文章
Technorati 站內搜尋器教學(UTF-8)
Technorati 部落格裡的「google」─ 申請及使用教學

增強標籤分類功能: 標籤雲 (Label Cloud)

最早看到類似標籤雲這種東西是在美味書籤 (del.icio.us)裡面，它是用一目了然的顯示方式用來列出所有你做分類的書籤群組、並且用字型顏色和大小來 highlight 群組內的數量，應用在 Blog 標籤 (Label) 上面，一方面可以列出所有分類的標籤、以及被標註的文章數量，方便讀者去找同類型的文章，另一方面可以知道這個 Blog 裡面哪類的文章最多最熱門，也可以提供閒逛的讀者參考。所以我就找來取代 Sidebar 上預設的標籤列表，並且作了一些調整和修改。

修改之前，先確定 Sidebar 上面要已經有標籤 (Label) 的網頁元素（如果沒有記得先加入：範本 Template -> 網頁元素 Page Elements -> 選定 Sidebar 加入網頁元素 -> 標籤 -> 加入 Blog）。我把參考來的作法分類處理了一下，切成三段修改：第一段是關於 CSS 樣式的部分，用來顯示 Label Cloud 裡面文字置中和行距之類的，第二段是 Javascript，實際上用來顯示排序和更改標籤的字型顏色和大小，最後一段是在標籤的 element 裡面 (widget)，作為呼叫 Javascript 函示的進入點。

第一個步驟，打開樣版文件 Template，找到 CSS 樣式定義的部分，插入下面的定義：

/* Style for Label Cloud */
#labelCloud {
  text-align: center;
}

#labelCloud .label-cloud li{
  display: inline;
  background-image: none !important;
  padding: 0 5px;
  margin: 0;
  vertical-align: baseline !important;
  border: 0 !important;
}

#labelCloud ul{
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
}

#labelCloud .label-count {
  padding-left: 0.2em;
  font-size: 9px;
  color: #777;
}


接下來，找範本的 </head> 標籤，把下面幾行 javascript 貼到該標籤的前面（如果已經有自訂的 Javascript 函示，可以只貼 <script> 標籤內的那些段 function 進去）。請注意，紅色的部分是需要自行調整的，標籤的字型顏色或大小和網址請根據自己的 Blog 樣式來更改。

<!-- User defined inline javascript -->
<script language='javascript' type='text/javascript'>
<!-- Functions used for Label Cloud: adjustLabel(), generateLabels()-->
var labels = new Object;
function adjustLabel(min, max, weight, total) {
  if (min &gt; max)
    var temp=(min-max)/Math.log(total), result=min-Math.floor(Math.log(weight)*temp);
  else
    var temp=(max-min)/Math.log(total), result=Math.floor(Math.log(weight)*temp+min);
  return result;
}  

function generateLabels(){
  var blogURL = '';
  var maxFontSize = 18;
  var minFontSize = 11;
  var maxColor = [204,204,204];
  var minColor = [119,119,119];
  var showCount = true;
 
  var labelColor= [];
  var labelSize = 0;
  var labelCount = new Array(); 
 
  for (var i in labels)
    if (!labelCount[labels[i]])
      labelCount[labels[i]] = new Array(labels[i])
 
  total = labelCount.length-1;
  section = document.getElementById('labelCloud');
  ul = document.createElement('ul');
  ul.className = 'label-cloud';
 
  for(var tag in labels) {
    for (var i=0; i &lt; 3; i++)
      labelColor[i]=adjustLabel(minColor[i], maxColor[i], labels[tag], total);
   
    labelSize = adjustLabel(minFontSize, maxFontSize, labels[tag], total);
    li = document.createElement('li');
    li.style.fontSize = labelSize+'px';

    a = document.createElement('a');
    a.title = labels[tag]+' articles with Label: '+tag;
    a.style.color = 'rgb('+labelColor[0]+','+labelColor[1]+','+labelColor[2]+')';
    a.href = blogURL+'/search/label/'+encodeURIComponent(tag);
   
    if (showCount) {
      span = document.createElement('span');
      span.innerHTML = '('+labels[tag]+') ';
      span.className = 'label-count';
      a.appendChild(document.createTextNode(tag));
      li.appendChild(a);
      li.appendChild(span);
    }
    else {
      a.appendChild(document.createTextNode(tag));
      li.appendChild(a);
    }
    ul.appendChild(li);
    ul.appendChild(document.createTextNode(' '));
  }
  section.appendChild(ul);   
}
</script>


第三步，修改網頁元素 (Page Element)。如果你開啟 Template 並編輯 HTML 時沒有展開 widget (小裝置?!)，搜尋範本裡的下面這一行（如果你改過 Title，那麼下面紅色的字串就不一定是 Labels）：

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

把它用下面的代碼取代：

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>  <!-- Add Label Cloud -->
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'> 
  <div id='labelCloud'/>
    <script type='text/javascript'>
      <b:loop values='data:labels' var='label'>
        labels[&quot;<data:label.name/>&quot;] = <data:label.count/>;
      </b:loop>
      generateLabels();
    </script>
    <noscript>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <data:label.name/>
          <b:else/>
            <a expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          (<data:label.count/>)
        </li>
      </b:loop>
      </ul>
    </noscript>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>   


如果編輯的範本有展開 widget，那就是取代掉上面那一行一直到標籤 </b:widget> 裡面的內容。建議當你有多個標籤和很多文章以後再使用這個功能，不然效果會不顯著。

參考文章：
[筆記]標籤雲(Tag Cloud)
Blogger V3.0:添加标签云

隱藏或更改預設的 Feed Link

供人訂閱 (Subscribe) 自己 Blog 的網站提供 (Feed) 是 Blogger 預設就有、也不允許使用者去修改的功能，這段連結文字通常是在主頁的最下面。如果使用了像是 FeedBurner 之類的服務，你可能希望對方使用另外燒出來的 Feed 來訂閱你的 Blog，是可以自己在主頁上擺上圖示和 Link，但自己也會希望拿掉或是更改 Blogger 送你的那段連結和文字。

這裡提供一些方法：首先掩耳盜鈴的方式，就是直接把叫那段文字不要顯示（但原始碼裡還有）。搜尋樣版文件裡關於 CSS 的設定，應該有設定 Feed Link 的 style，名稱是 feed-links，改成不要顯示就可以藏起來了。改成下面這樣：

.feed-links {
  display: none;
}

如果你想徹底刪除，或是修改它的內容，一樣，打開 Template 的 HTML 原始碼，展開所有 widget 的範本，找下面這段自己改：

<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
   <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>

我的作法，是改 CSS 把它藏起來，然後在網頁元素 (Page Element) Footer (正下方的區塊) 裡加入一個 HTML 的元素，貼入 HTML 語法（包含各種訂閱工具連結網址和圖片位置），這樣就行了，模組化管理在未來變更時比較有彈性。

參考文章：
Blogger beta:改变/隐藏Feed订阅地址

首頁長篇文章的收合

當內文太長或圖片多的時候，進到首頁不但會變慢，版面也會拉很長，所以很多人的 Blog 首頁都會加上「繼續閱讀」、「閱讀全文」的連結，並且在首頁的新文章都只顯示部分內容，有興趣的再深入閱讀下去。好處就是剛剛講的，首頁如果能夠顯示十篇文章，頁面就不會因此要往下拉拉到死，也不會塞爆圖片慢得要死。

網路上看到兩種處理的辦法，一種是進首頁的時候還是全部都 Load，只是用收合折疊的方式讓首頁不要太長精簡一點，另外一種是只 Load 部分顯示出來，要閱讀全文就請你連到該文章的固定靜態連結。前者的好處是在首頁點開可以一目了然，但是圖多還是一樣很慢，後者的好處是載入很快，但是要跳轉到下一頁去看該篇文章，算是各有利弊。如果該長篇內容都是文字，我比較想用第一種，但如果有很多照片，第二種就比較好。我利用兩個標籤去實作了這兩種方法（算前無古人吧），隨便想用哪一種，只要指定不同的 ID 就好。

首先，登入 Blogger 管理介面，編輯範本 Template 的 HTML（要勾選"展開小裝置範本"="Expand Widget Templates"，用最完整的原始碼），先到最前面定義 CSS Style 的地方去，隨便哪裡都可以，貼入以下基本的定義：

/* Style of detail article toggle */
span.showDetail {
  float: right;
  border: 1px solid #333;
  font-size: 8pt;
  margin: 10px 0 10px 0;
  padding: 0 10px 0 10px;
}

span.hideDetail {
  display: none;
  float: right;
  border: 1px solid #333;
  font-size: 8pt;
  margin: 10px 0 10px 0;
  padding: 0 10px 0 10px; 
}


其中那兩個 <span> 用的 class "showDetail", "hideDetail" 是用來定義那個收合文章用的連結樣式，自己可以新增對該連結的設定。因為有文章收合的效果，需要用到 Javascript，我用 inline 的方式插入 template 裡面，可是要注意，script code 裡面的判斷符號像是 '<' 或是 '&' 要轉換，不然 template 格式檢查會失敗。這裡提供一個技巧，在自己電腦上測試 template 時，可以另存新檔，附檔名取 .xml，然後用瀏覽器打開，瀏覽器會幫你檢驗 template (XML) 的格式有沒有問題，如果有錯在第幾行，這樣可以幫助你 debug。找範本的 </head> 標籤，把下面幾行 javascript 貼到該標籤的前面：

<!-- User defined inline javascript -->
<script language='javascript' type='text/javascript'>
<!-- Script functions for show detail article checking: showDetail(), hideDetail(), checkDetail() -->
function showDetail(id) {
  var spans = document.getElementById(id).getElementsByTagName('span');
  for (var i = 0; i &lt; spans.length; i++) {
    if (spans[i].id == 'detail' || spans[i].id == 'hideDetail')
      spans[i].style.display = 'inline';
    if (spans[i].id == 'showDetail')
      spans[i].style.display = 'none';
  }
}

function hideDetail(id) {
  var post = document.getElementById(id);
  var spans = post.getElementsByTagName('span');
  for (var i = 0; i &lt; spans.length; i++) {
    if (spans[i].id == 'detail' || spans[i].id == 'hideDetail')
      spans[i].style.display = 'none';
    if (spans[i].id == 'showDetail')
      spans[i].style.display = 'inline';
  }
  post.scrollIntoView(true);     
}

function checkDetail(id, link) {
  var spans = document.getElementById(id).getElementsByTagName('span');
  for (var i = 0; i &lt; spans.length; i++) {
    if (spans[i].id == 'detail') {
      spans[i].style.display = 'none';
      document.write('&lt;span id=showDetail class=showDetail&gt;');
      document.write('&lt;a onclick=javascript:showDetail(\&quot;'+id+'\&quot;); href=javascript:void(0);&gt;完整閱讀...&lt;/a&gt;');
      document.write('&lt;/span&gt;');
      document.write('&lt;span id=hideDetail class=hideDetail&gt;');
      document.write('&lt;a onclick=javascript:hideDetail(\&quot;'+id+'\&quot;); href=javascript:void(0);&gt;文章收合...&lt;/a&gt;');
      document.write('&lt;/span&gt;');
    }
    else {
      if (spans[i].id == 'fullpost') {
        spans[i].style.display = 'none';
        document.write('&lt;span id=showDetail class=showDetail&gt;');
        document.write('&lt;a href=\"'+link+'\"&gt;閱讀全文...&lt;/a&gt;');
        document.write('&lt;/span&gt;');
      }
    }
  }
}
</script>


接下來，搜尋下面這一行的程式：

<div class='post-header-line-1'/>

把上面那行後面幾行，本來應該是這樣的程式碼：（位置和版面會因樣版不同而有所差異）

<div class='post-body'>
      <p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->


改成這樣（變動的地方標註成紅色）：

<div class='post-body' expr:id='"post-" + data:post.id'> <!-- Add show detail check -->
<b:if cond='data:blog.pageType == "item"'>
      <p><data:post.body/></p>
<b:else/>
      <style>#detail, #fullpost {display:none;}</style>
      <p><data:post.body/></p>
      <script type='text/javascript'>
        checkDetail(&quot;post-&quot; + &quot;<data:post.id/>&quot;, &quot;<data:post.url/>&quot;);
      </script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->


樣版存檔，搞定！這個是版面樣式的 Template，接著我們到 Settings -> Formatting 最下面編輯文章發表用的 Post Template，加入下面一行：

<span id="detail"></span>

以後每次要發表新文章的時候，只要被 span 標籤像這樣包圍起來：

<span id="detail">
這是要隱藏剩下的完整內文
</span>


標籤內的文字就會在首頁被隱藏起來，而標籤外（不管是前面或後面）的文字就變成該文章的前言或摘要。以上是只有在首頁才會有的效果，如果是單篇獨立文章的連結，不會有展開折疊的連結，至於在 RSS Feed 裡面，因為大部分的 Feed Reader 都會濾掉格式的標籤，所以全部的內文也還是看得到。如果你不想使用文章收合的效果，要用固定連結，只要把上面的 id 名稱從 detail 改成 fullpost，就可以有獨立文章連結的效果了。

參考文章：
讓首頁文章可開啟/摺疊 for Blogger Beta
Expandable posts with Peekaboo view
有關 Blogger in Beta

[更新]：
1. 增加 ID: "fullpost"，整合了網路上兩種「閱讀全文」的作法，如果 span 裡面指定成這個 ID，則連結前往該篇完整文章，不使用展開收合的效果。
2. 修正如果瀏覽器 script 功能關掉，看不到全文的問題（如果不支援 Javascript，則文章不隱藏，直接秀全文出來）。

Template 的基本內容和結構

Blogger Beta 可以改造的彈性真的好大，越碰越覺得無法自拔～哈哈！不過每次看到新增額外功能總要去改樣版文件 (Template)，不管是版面配置、CSS 還是 Javascript，都有點心虛：因為只會 Find -> Replace -> Save -> Apply 這些步驟，對樣版文件的內容和架構完全沒有概念，如果我想動版面風格而換了一套 Template，不是之前做的變動都要重來一次嗎？偏偏，我對這些預設基礎的版型都不是很滿意，遲早也要去動，不如在 Blog 功能補齊之前，先動手研究 Blogger Beta 的樣版文件。

一開始是偷懶，想先去找喜歡的樣版來修改，不過 Google 了半天沒有半個堪用的，好吧！自己改！眼高手低的下場就是不知道從何改起～不過認真一會敗讀文章後，終於對 Blogger 基礎樣版文件有一點點瞭解了，至少，要改也知道從哪動手。

所有版面物件都以區塊來定義，整個頁面最外層定義的名稱 (ID) 叫 outer-wrapper，像是整個 Blog 的 container。在 outer 裡面從上到下分成三大塊，分別是 header-wrapper, content-wrapper 和 footer-wrapper。顧名思義，這三塊就是分別用來放最上方的標題列(頁首)、內文以及頁尾。其中表現內文的那一塊 content-wrapper 裡面又分了兩個區塊，ID 分別是 main-wrapper 和 sidebar-wrapper，就是用來顯示 Blog 文章和旁邊 sidebar 的。到這裡，整個 Blogger Beta 的樣版區塊大致的配置就瞭解了。下面是階層關係：

- outer-wrapper
    - header-wrappe
    - content-wrapper
        - main-wrapper
        - sidebar-wrapper
    - footer-wrapper

以上只是版面區塊的定義名稱，搭配 CSS 的 style 設定和標準的 HTML，再用 <div> 標籤實作以上區塊，大致的版型就出來了，不過 Blogger 真正的重頭戲：Page Element 還沒出現哩！在此之前，要先知道控制 Page Element 的專屬語法：

<b:section class="'sidebar'" id="'sidebar1'" preferred="'yes'">

其中兩個重要的參數：class 是這個 section 的類別，會在 CSS 裡定義，id 則是這個 section 識別用的名字。上面提到 content-wrapper 裡面又分了兩個物件：main-wrapper 和 sidebar-wrapper，實作的結構用巢狀結構表示如下：

<div id='content-wrapper'>
  <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='blog 文章' type='Blog'/>
    </b:section>
  </div>
  <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
      <b:widget id='Profile1' locked='false' title='AUTHOR PROFILE' type='Profile'/>
      <b:widget id='Label1' locked='false' title='ARTICLE LABELS' type='Label'/>
      <b:widget id='BlogArchive1' locked='false' title='ARCHIVED POSTS' type='BlogArchive'/>
    </b:section>
  </div>
</div> <!-- end content-wrapper -->

看得出關連嗎？<div>用來分割出版面的區塊物件，而 Page Element 區塊則是用 <b:section> 標籤讓系統認得，至於每個 Element 的實際內容和功能定義，就是在 <b:widget> 裡面。以上面的例子解釋，在 Sidebar 裡有三個 Elements，分別是個人資料(Profile)、分類標籤(Label)和封存的舊文章(BlogArchive)。這些概念瞭解以後，再去看看自己的 Template，即使要改至少也知道要改那個地方了吧～

由此可知，Template 裡面非標準 CSS、自己定義 & HTML的標籤就都是 Blogger Beta 的專屬標籤，像上面範例出現用來分割區間的 <b:section> 和表示特定 page element 的 <b:widge> 就是，除此之外還有像是判斷條件用的 <b:if>, <b:else>、迴圈 <b:loop> 等等，詳細用法這邊就不提了，我整理一下 Blogger 自己說明文件的分類：

• 版面配置的網頁元素標記 (Page Elements Tags for Layouts): <b:section>, <b:widget>
• 版面配置的小裝置標記 (Widget Tags for Layouts): <b:includable>, <data>, <b:loop>, <b:if>, <b:else>
• 版面配置資料標記 (Layouts Data Tags): Globally Available Data, Page Header, Blog Posts, Blog Archives, Profile, Text/HTML/JavaScript, Feed, Picture, Labels, List, Link List, Logo

最後一項 Layouts Data Tag 也是上面範例中，可以拿來做 class 類別的 layout 物件列表，以上標籤的詳細用法請詳讀官方文件囉～

參考文章：
Beta Template 版面改造

程式碼的標記區塊

這邊有很多技術文件會扯到程式碼，或是在提示符號要下的命令，一直苦無好的區塊表示法來顯示，剛好拜讀國良先生的 Blog 時看到超有質感的表現方式，熱心的國良先生也不吝指導，所以就被我偷學會了～

原理很簡單，不過我總是記不得 CSS 的語法和使用方式。只要在 CSS 定義一個自用的標籤像是 <code></code>，把這個標籤的樣式外觀都記錄在樣版的 CSS 裡，以後寫文章的時候直接套用該標籤就搞定了。我還修改補充了一下，除了「程式碼」外，我還會用到「命令」，所以我就多做了一個屬性叫 .cmd 的（好習慣，都用小寫），調整一下變成下面兩段 CSS，把它加入 Template 的 CSS 定義那邊：

code {
  display: block;
  font-family: 'Courier New';
  font-size: 9pt;
  overflow: auto;
  border: 1px solid #ccc;
  padding: 10px 10px 10px 21px;
  max-height: 1200px;
  line-height: 1.2em;
  letter-spacing: 0px;
  color: #000;
  background: #ccc url(http://abinlee.link.googlepages.com/BG_CODE.gif) left top repeat-y;
}

code.cmd {
  font-size: 10pt;
  color: #ccc;
  background: #000 url(http://abinlee.link.googlepages.com/BG_CMD.gif) left top repeat-y;
}

假設以後有一段程式碼或命令要表示，就把 HTML 的原始碼寫成像是：

<code>這是原始碼</code>
<code class='cmd'>這是命令</code>

就可以顯示成下面這樣啦！

這是原始碼

這是命令

區塊裡用到的兩張背景圖我也是放在 Googlepages 裡面，以便樣版能夠外連。雖然 Blogger 也可以用貼圖的方式來放圖，但是會討厭地縮圖和改檔名，又不能管理，所以只好用外連的囉！另外要提的，一開始本來我是想另外訂一個標籤 <cmd> 給「命令」專用，內容幾乎完全和 <code> 一樣，但不知為何 Firefox 顯示正常，IE 就跑不出來？我可是 follow 標準的 CSS 語法寫的耶！難怪有人說 IE 這個瀏覽器對標準語法的支援反倒有問題，這次倒是第一次見識到了！（害我 debug 了好久，氣！）

參考國良先生的原文指導：
[筆記]在文章裡顯示優質的程式碼區

[注意]：
程式碼或命令行在網頁區塊裡顯示還有一個問題，就是換行。一種解法，如果把改字型(Arial)或是大小可以在一行內多顯示一些字元，可以「儘量」不要換行，不過還是很難避免過長的程式，而且會造成閱讀困難。我的處理方法還是讓它換行，因為這樣還算能閱讀，而且要直接複製貼上也沒有影響，但這樣會遇到 FireFox 裡超長的英文字段(像是網址)不會換行(但 IE 會)，目前無解，只能從內容上儘量避免囉！（中間塞空白，或是帶入中文說明，這樣就會被自動斷行了）

增加站內的全文搜尋

拿 Blog 來當作筆記，關鍵字搜尋就變成很重要的功能之一。在 Blogger 裡面的 Navbar 上面也內建了這個功能，但如果你和我一樣不喜歡 Navbar 拿掉了，怎麼在Slide-bar 裡加上搜尋的能力呢？

參考了幾篇文章，首先是 Navbar 上 "SEARCH THIS BLOG" 的功能搬進來，在 Sidebar 上面增加一個網頁元素 (Page element)，接下來是再調整搜尋的結果，讓符合條件的文章只列標題，這樣比較一目了然。登入管理模式，再到樣版->網頁元素的頁面下，Sidebar 的區域加入一個網頁元素，選擇 HTML/JavaScript 元件，內容如下：

<form id="searchthis" action="http://abintech.blogspot.com/search" method="get">
<input id="query" maxlength="255" name="q" type="text"/>
<input id="searchbtn" value="搜尋" type="submit"/>
</form>

只有第一行要修改指定自己的 Blog 網址，第二、三行裡面可以使用 CSS style 參數來定製自己搜尋用的表單元件的外觀，像是大小顏色和邊框，依據自己 Blog 的樣版配色去調整。不過呢，據我實測的結果，這個所謂的站內全文搜尋，對中文的支援能力似乎不好，英文關鍵字卻可以百發百中，看來，文章裡我要多加點英文關鍵字，要找的話儘量用英文來找，這樣比較找得到～

參考文章：
Blogger / blogspot Beta 側邊加內建的文章搜尋
如何为Blogger Beta增加站内搜索功能

隱藏 Navbar

覺得 Blogger 強制置入的導覽工具列 Navbar 和你的版面格格不入嗎？可是官方除了變換顏色之外並沒有取消拿掉的辦法，這時候就只好修改樣版想辦法隱藏它囉！（要改樣版，好習慣是要備份喔！）

登入後到 Template 樣版編輯的頁面，選擇直接 Edit HTML，看你的樣版裡有沒有 Global 這段註解，如果有，就把下面程式加在後面，如果沒有，那就找像 Header 或 Footer 之類的註解，把下面整段貼到註解前。（依照你使用的版面不同，樣版程式碼的內容也不會一樣）

/* Global ----------------------------------------------- */

#navbar #Navbar1 iframe{
  height:0px;
  display:none;
  visibility:hidden;
}

儲存更新之後就會生效了（如果該招式失效，本文也會一併更新，因為我也是用這一招）。另外，也有其他的辦法，接用畫面模組拖拉的，我也成功過，可以一併參考。

參考文章：
如何隐藏Blogger Beta的Navbar
Blogger in BETA 隱藏 Navbar 大法

另外，如果不想完全隱藏，想變成：平常隱藏、游標移過去就會出現的效果，也可以參考這篇文章：隐藏blogger导航栏

補充：
網友們回應了其他幾種方法，可以用更少的 Code 達到一樣的效果，我測試過也都有效，感謝大家集思廣益，我把方法附註在後：

#navbar-iframe {
  display: none;
}

或是更短的：

#navbar {
  display: none;
}

增加「最新文章」和「最新回應」模組元件

開始擴充 Blogger Sidebar 的模組元件(Page Element)。首先，是不是缺少了像「最新發表的文章」(Recent Posts) 和「最新的文章回應」(Recent Comments) 之類的列表哩？沒錯，預設的樣版模組裡就缺了這兩塊，要能夠出現這兩塊，主要還是用 Feed 這個模組，只要找到你 Blog 文章和回應的 Feed URL，利用自訂的 Feed 就可以有最新文章和回應的效果。

這些 Feed URL 是有命名規則的，像我的 Blog 是這樣：

http://abintech.blogspot.com/feeds/posts/default

所以只要把上面的網址改成自己的就好。另外一個「最新回應」的 Feed URL 為：

http://abintech.blogspot.com/feeds/comments/default

同樣加入這個 Feed 區塊，就有最新回應的模組囉！

參考文章：
Blogger beta技巧：输出评论
Blooger Beta Feed URLs

[更新]：
後來看見幾篇文章，發現用這個辦法有三個問題：第一，Blogger 的 Feed 更新過慢，所以新文章或是最新回應用 Feed 訂閱來顯示，都會有不夠即時的問題，不管你怎麼處理那個 Feed，源頭不改善此問題無法根治。第二，Blogger Feed 的模組有最多顯示五篇文章的限制，如果你是大站很多回應，最新回應的部分很快就被洗版了。第三，早期有發生過 Blogger Feed 內容爛掉導致 Blogger 的樣版和頁面毀掉的前科！雖然我沒碰到，但聽起來有點毛毛的。

解決方法，第一點只能等 Blogger 系統更新，第二點，可以使用會把 Feed 轉換成 Javascript code 的服務，像是 Newsgator、Google Reader，把程式碼貼到 HTML/Javascript 的 Page Element 裡面，就可以顯示超過五篇的連結。第三點，除了祈禱改善了不會再發生之外，也可以用 FeedBurner 之類的服務做出穩定、統一的 Feed，在模組內改訂閱這個，多了一層也可以保護 Feed 故障導致版面爛掉。（不過更新會更慢...）

參考文章：
我們都是谷哥的人
換上燒烤飼料

Hello World!

Blogger 的進步和功能新增已經到了可以接受的程度，私底下又有很多自己在玩的東西技術文章想一併整理公諸於世，所以就從這裡開始，把所有什麼改機、軟體、Hack 的文件在這邊做整理，一方面可以分享給有需要的人，能夠一起討論，另一方面是留下記錄，方便以後有需要用到的時候方便自己做查詢。

這邊是以技術文章為主，初期計畫會有的分類 Label 像是 Asus WL-500g Router 和 Buffalo LinkStation HG 的改機文件和心得、Blogger/Blogspot 的 Hack 和版面語法研究、Firefox 和 flickr 的密技和特殊用法等等，第二階段要開始研究在家裡自己架設 Blog 系統的可能性，目前可能採用的 Simple PHP Blog，它不需要資料庫處理速度又是最快的，不過還有很多可以調整和修改的空間。最後的階段是把 Windows Live Space 裡一狗票的文章慢慢逐一地備份到穩定的地方（可能是家裡，也可能是 Blogger），然後停止使用微軟的服務，利用它來通告我最後使用的 Blog，一切就算順利也是一項大工程。

既然利用這邊來開始，在初期計畫裡的第一步當然是先研究 Blogger。除了主要公布的這個 Blog 之外，我還會有另一個 Blog 做測試使用，一旦樣版和語法都搞定，還想搞一個拿來寫匿名日記，所以光在 Blogger 我就會有三個 Blog，加上架設在家裡的、還在 Windows Live Space 的，全盛時期會有五個 Blog 在運作！當然代表號還是會只有一個啦！

以上列出來的工作聽起來就很可怕，這篇文章只是打算先踏出第一步，希望可以完成。