沒穿方服

做這個其實很簡單，用下面的原型，改第 6 行圖示和第 9 行網址即可。細節可參考 MDC 的文件 製作 OpenSearch 搜尋模組。

<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
<ShortName>低調的 0rz.TW</ShortName>
<Description>在關鍵字前附上 http://0rz.tw/ </Description>
<InputEncoding>UTF-8</InputEncoding>
<Image width="16" height="16">
data:image/png;base64,iVBORw0KGgo(……後面太長省略)
</Image>
<Url type="text/html" method="get" template="http://0rz.tw/{searchTerms}"></Url>
</SearchPlugin>

※這裡公佈的圖示是 PNG 格式，若要用在 Open PCMan 2007，請參考 Open Search 內嵌圖示轉換器 for PCMan 2007。

未支援 CSS 的 hover 偽類，所以一些滑鼠移上去才有的功能／效果便自然消失。

PRE 標籤裡的泰語文字不見了，我需要安裝東南亞語系的支援嗎？

唯一能看的只剩這個。

ณ ที่แห่งนี้เคยมีแร้งคอย
禿鷹在這裡等待著

เฝ้าจับจ้องมองผู้คนล้มหาย
盯著逝去的人們

คือผู้เดินทางรอนแรมสัญจร
那些夜晚在山林裡徘徊

จะข้ามป่าเขาดงพญาไฟ
想要越過 Dong Phaya Fai 的人們 ※註一



อันมีสายน้ำทอดยาวสุดตา
望不盡的長河向那裡流去

มีทิวเทือกผาท้าทายแดดลม
山崖對峙著風 和日光

นุ่งห่มผืนฟ้าทุ่งนาแก่งคอย
等待著天空 原野 急流 ※註二

หัวใจพี่คอยน้องอยู่ที่แก่ง
我的心 在急流 等待著



หัวใจพี่คอยน้องอยู่ที่แก่ง
我的心 在急流 等待著

ตรงที่มีแร้งเฝ้าคอย เฝ้าคอย
禿鷹在這裡 一直 一直地等

หัวใจพี่คอยน้องอยู่ที่แก่ง
我的心 在急流 等待著

ตรงที่อีแร้งเฝ้าคอย เฝ้าคอย
禿鷹在這裡 一直 一直地等 ※註三



ณ ที่สายฝนกระทบหน้าผา
在暴雨拍打的岩壁上

แว่วสกุณาบินมาร้องเพลง
隱約聽到鳥兒飛來 微弱的歌聲

ขับกล่อมกันเองชีวิตพงไพร
鳴囀著 森林的生命之歌

ใครเล่าเข้าใจชีวิตบรรเลง
誰能明白這生命之歌



ช่างเหมือนสายน้ำทอดยาวสุดตา
如此酷似 那無盡的長河

เหมือนทิวเทือกผาท้าทายแดดลม
像山崖對著風 和日光

นุ่งห่มผืนฟ้าทุ่งนาแก่งคอย
等待著天空 原野 急流

หัวใจพี่คอยน้องอยู่ที่แก่ง
我的心 在急流 等待著



หัวใจพี่คอยน้องอยู่ที่แก่ง
我的心 在急流 等待著

ตรงที่มีแร้งเฝ้าคอย เฝ้าคอย
禿鷹在這裡 一直 一直地等

หัวใจพี่คอยน้องอยู่ที่แก่ง
我的心 在急流 等待著

ตรงที่อีแร้งเฝ้าคอย เฝ้าคอย
禿鷹在這裡 一直 一直地等



หัวใจพี่คอยน้องอยู่ที่แก่ง
我的心 在急流 等待著
（หัวใจพี่คอยน้องอยู่ที่แก่ง）
（我的心 在急流 等待著）

ตรงที่มีแร้งเฝ้าคอย เฝ้าคอย
禿鷹在這裡 一直 一直地等
（ตรงที่มีแร้งเฝ้าคอย เฝ้าคอย）
（禿鷹在這裡 一直 一直地等）

หัวใจพี่คอยน้องอยู่ที่แก่ง
我的心 在急流 等待著
（หัวใจพี่คอยน้องอยู่ที่แก่ง）
（我的心 在急流 等待著）

ตรงที่มีแร้งเฝ้าคอย เฝ้าคอย
禿鷹在這裡 一直 一直地等
（ตรงที่อีแร้ง เฝ้าคอย）
（禿鷹在這裡 一直地等）



หัวใจพี่คอยน้องอยู่ที่แก่ง
我的心 在急流 等待著

ตรงที่มีแร้งเฝ้าคอย เฝ้าคอย
禿鷹在這裡 一直 一直地等

หัวใจพี่คอยน้องอยู่ที่แก่ง
我的心 在急流 等待著

ตรงที่อีแร้งเฝ้าคอย เฝ้าคอย
禿鷹在這裡 一直 一直地等

คอย คอย คอย คอย คอย คอย คอย
等待 等待 等待 等待 等待 等待

คอยอย่างอีแร้งเฝ้าคอย เฝ้าคอย
禿鷹還是 一直 一直地等

備註：

1. Dong Phaya Fai

   位於現今大山（拷艾）國家公園群山的大森林，意思是 Jungle of the Fire Lord，因為過去曾有無數人在旅途中死於瘧疾…… 森林遭破壞後改稱 Dong Phaya Yen (意為 Jungle of the Ice Lord) 以示其已受馴服。
   現在 Dong Phaya Yen 群山以 Dong Phaya Yen – Khao Yai Forest Complex 之名列入世界遺產，可參考 Wikipedia 資料 Dong Phaya Yen Mountains。

2. แก่ง 這個字，也可譯作瀑布。
3. 不斷重複的兩句詞，附上卡啦ＯＫ式字幕：
   hua jai phii khooi noong yuu thii kaeng
   我摘批開一儂　猶提哽嗯 （我的心 在急流 等待著）
   
   trong thii mii raeng fao khooi fao khooi
   哢替迷瀾　否口喔　否口喔 （禿鷹在這裡 一直 一直地等）

1. 改名 Soundbb.js 和 SoundBridgeBridge.swf
2. 用 Prototype.js (1.6.0) 的 Class.create 寫成一個 Soundbb Class
3. 增加 Soundbb._isReady 和 Soundbb.onReady() 免得哪壺不開提哪壺 → 錯誤
4. 增加 Soundbb._enabled 可全面開關 Sound 方法有效／無效
5. 建立物件時可傳入 { autoLoadSound: somepath.mp3 } 便會在 ready 時先行讀取
6. SoundBridge.as 裡拿掉了 this.sound.checkPolicyFile = true; 因為我編譯不過，對不起……
7. Flash 裡加了 System.security.allowDomain("*"); 避開跨網域存取的安全性限制

基本使用例：

var se = null;

document.observe("dom:loaded", function() {
  Soundbb.swfLocation = 'SoundBridgeBridge.swf';   // 預設值為 '/SoundBridgeBridge.swf'
  se = new Soundbb({ autoLoadSound: 'sound.mp3' });  // 預先讀取（其實是用 se.loadSound('sound.mp3', false); ）
});

someAction = function(){  // 需要音效的時候
  se.start();
};

詳細用法請參閱 ActionScript 2.0 的 Sound API，JavaScript Sound Kit 原設計就是直接叫 Flash 的方法；也可參看原版 Javascript Sound Kit 和它在 SourceForge 上的專案頁。

原始碼檔案在這裡，著作權聲明：原作者 Gustavo Ribeiro Amigo 保留所有權利 Copyright © 2006, Gustavo Ribeiro Amigo All rights reserved.

Lokesh Dhakar 製作的 Lightbox 2 看圖特效，官方用法是以一個 rel 值為 lightbox 的 a 標籤把圖片包起來，像這樣：

<a href="foo.png" rel="lightbox"><img src="foo.png" alt="foo" /></a>

但是我懶得在每張圖上加連結，想改成 <img src="foo.png" alt="foo" />（跟平時貼圖一樣），而 Lightbox 會把我網頁上全部文章內文的全部圖片當成一組，並且用每張圖的 alt 當標題來展示。

程式碼如下：（用的是 Lightbox 2.03.3、Prototype 1.6.0）

$$('.postcontent img').each( function(i) {
  var imageLink = new Element("a", { rel: 'lightbox[post]', href: i.src, title: i.alt });
  i.insert('before':imageLink});   // 'before' 若改為 'top' 在 ie 會出錯
  Event.observe( i, 'click', function() {
    myLightbox.start(imageLink);
  });
});

說明一下 postcontent 是我範本的「文章內文」部份，對其中所有圖片製作相應的連結（anchor）元素，然後在圖片被點的時候呼叫 myLightbox.start。

myLightbox 是 lightbox.js 在頁面載入完成的時候建立的（不是我建立的），啟動整個特效的是 start 方法，你可以自己丟 anchor 給他，不過仍需要 href 和 rel 屬性與值；另外 lightbox 展示圖片組的時候會比對頁面上所有的 anchor，所以你建立的 anchor 也要記得加到 DOM 上才行…… 還真是難用啊。

附上測試用小圖：

1. JavaScript Library

   有個 jQuery 或 Prototype 為基礎，寫 JavaScript 的工作會變得很快樂。
   理想作法是跟隨阿土伯發展的 blogger-ext2，裡面就包含了短小精幹的 jQuery，也不必重寫一些基本的功能，更別說 blogger-ext2 的設計本身就值得我們學習。

   不過很可惜我沒用過 jQuery！所以還是選比較熟悉但很龐大的 Prototype (122 kb) 和 script.aculo.us。（上面的精美圖片約 30 kb，可見 Prototype 有多大。）

2. 繼續閱讀

   官方作法是用 <span class="fullpost">全文</span> 或 <div class="fullpost">全文</div> 配合範本和 CSS 讓裡面的內容在首頁不顯示。

   而一般作法是用 JavaScript 找出要隱藏的部份，建立一個開關來收合／展開，可參考 CJH 的繼續閱讀懶人加強版。我也是依循此想法，因為無論怎麼做，文章都是完整下載到瀏覽器了，沒特殊需求的話應該不必把它藏起來。

   另外看過最有趣的是 blogger-ext2 用的 ##CONTINUE## 標記，真是有夠懶。

3. 最新回應

   簡單作法是在範本中加入一個資訊提供 ( feed ) 元素，網址為
   http://你的blog.blogspot.com/feeds/comments/summary，但是這樣最多只能顯示 5 則留言，而且內容不會即時更新，實用性低迷。（我用的就是此方式。）

   另一方法是用 JavaScript 取得前述網址傳回的 JSON 物件，可取得 99 則最新的留言，但是有個共同難題—— Feed 裡頭沒有「文章標題」的資料，所以無法知道該留言是回應哪一篇文章，這對訪客來說是不方便的。如果還記得前言中的自助餐譬喻，這個 feed 就可比為沒清乾淨的大腸。

   有個確實解法在 LVCHEN 製作的 Recent Comment Widget for Blogger，做法看來是另外取得文章的 feed（內有標題）再跟回應的 feed 比對，解出文章標題。原以為這樣很沒效率，不過實際上看起來都很快。

   至於選擇陽春做法的原因，因為 blogger 提供的 feed 不但缺少文章標題，同時沒有留言者網址，也無法取得「已被刪除」的留言。離我想做的有段距離，乾脆不去解它了。

4. 留言的重新導向

   沒辦法在文章下面直接留言（而必須進入另一個頁面），可參考 blogger 關於連結透過 google.com 和 blogger.com 重新導向的說明。看來只能忍受那個無法改樣式的留言表單了…… 這裡可自訂比較有影響的是「設定 -意見 - 在彈出式視窗中顯示意見」，我把它改成彈出視窗，至少防止訪客被導向到風格不同的表單而受驚。

5. 較舊／較新的文章 的 XHR 讀取

   按下「較舊的文章」後 blogger 預設會使用 XHR 的方式讀取文章，不必重讀整個頁面，很棒的功能，不過沒有照顧到瀏覽器的上一頁／下一頁。當一個 blog 只有「較舊的文章」採用 XHR，其他部份卻是傳統連結的時候，可能會造成困惑。

   對這般上一頁／下一頁問題已有許多解法，我試著引進 Brad Neuberg 的 Really Simple History 但很快就放棄了…… 所以還是選擇沒有 XHR 的方式，關掉它的方法是將範本中

   <b:if cond="data:newerPageUrl">
     <a expr:id="data:widget.instanceId + '_blog-pager-newer-link'" expr:href="data:newerPageUrl">
       <data:newerpagetitle></data:newerpagetitle>
     </a>
   </b:if>
   <b:if cond="data:olderPageUrl">
     <a expr:id="data:widget.instanceId + '_blog-pager-older-link'" expr:href="data:olderPageUrl">
       <data:olderpagetitle></data:olderpagetitle>
     </a>
   </b:if>

   兩個 <a> 標籤的 id 改掉，例如 expr:id='"no_" + data:widget.instanceId + "_blog-pager-newer-link"' 讓 blogger 找不到它們即可。