沒穿方服

封存

顯示╱隱藏內文

兩個 FirefoxSearch Plugin,用來把 0rz.tw 產生的字串(例如 ed0cT )變回原本的網址。

使用後
※圖示是自己做的,可以帶走任意使用。


  1. 低調的 0rz.tw 低調的 0rz.tw 圖示

    還原 0rz.tw 的短網址,檔案下載:re0rzTW.xml

  2. 台泥看盤工具 台泥看盤工具 圖示

    還原 TinyURL.com 的短網址,檔案下載:reTinyURL.xml


做這個其實很簡單,用下面的原型,改第 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

2008-07-10: 這方法還是有問題,實在是…… 請參考更新版 升級 Lightbox 至 v2.04

之前寫的方法會造成大圖讀取緩慢(因為都是讀原圖),想想還是縮圖比較有禮貌,所以現在貼圖的 HTML 是 blogger 自動插入的:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://原圖.png">
  <img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://縮圖.png" border="0" alt="" id="BLOGGER_PHOTO_ID_some_id" />
</a>

通常會再刪一點:

<a href="http://原圖.png">
  <img src="http://縮圖.png" alt="替代文字" />
</a>

JavaScript 則改為:(使用 Lightbox 2.03.3Prototype 1.6.0

$$('.postcontent img').each( function(i) {
  var fullSrc = i.src;  // fullSrc : 原圖的位址
  if( i.up('a') && i.up('a').href )
  {
    var srcExt = i.up('a').href.split('.').pop().toLowerCase();
    if( srcExt == 'png' || srcExt == 'jpg' || srcExt == 'gif' || srcExt == 'bmp' )
    { fullSrc = i.up('a').href; }
  }
  var imageLink = new Element("a", { rel: 'lightbox[post]', href: fullSrc, title: i.alt });
  i.insert({'before': imageLink});   // 'top' insert 在 ie 會出問題
  Event.observe( i, 'click', function(event) { myLightbox.start(imageLink); Event.stop(event); });
});

內容都側移到右邊去了,而且螢幕越大,效果越好。

背景的手指展現不凡的親和力

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

e化後的頁面更為簡潔、清爽
該亮的都不亮

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

泰語被和諧了

唯一能看的只剩這個。

還是下載不含 Google Toolbar 的 Firefox 吧!

一首我在 Carabao Greatest Hits 中最早迷上的歌,旋律優美容易聽,可惜不懂泰語,所以也不曉得在唱什麼。後來在タイポップスの部屋等到這首歌的日語翻譯,雖然自己拼湊後仍有不解之處,但湊合著還是好過一無所知。
※需要試聽可以在泰國的 Google 搜尋 แร้งคอย 試試。

แร้งคอย (reeng khooi, 禿鷹等待著)

收錄於 1993(佛曆 2536 年)發行的 Carabao 第 13 張專輯 ช้างไห้(chaang hai - The Lamenting Elephant, 大象挽歌),詞/曲:Yuanyong Opakul (Ad Carabao)

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

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

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

จะข้ามป่าเขาดงพญาไฟ
想要越過 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. 不斷重複的兩句詞,附上卡啦OK式字幕:
    hua jai phii khooi noong yuu thii kaeng
    我摘批開一儂 猶提哽嗯 (我的心 在急流 等待著)

    trong thii mii raeng fao khooi fao khooi
    哢替迷瀾 否口喔 否口喔 (禿鷹在這裡 一直 一直地等)

改寫動機:原版我跑不出來……

Gustavo Ribeiro Amigo 的 Javascript Sound Kit 讓你用 JavaScript 操作網頁上的 mp3 音效,用的是 Flash 所以在跨瀏覽器方面表現不錯。

應自己需要,把原本的 Sound.js 改寫為 Soundbb.js,內容大致一樣只是寫作風格不同;原本的 SoundBridge.as 則是加上另一個 fla 編譯為 SoundBridgeBridge.swf(多包一層所以名稱也多個 Bridge……)。主要修改點如下:

  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.

2008-07-10: 下面那篇也不大妙,請直接看升級 Lightbox 至 v2.04 即可。
2007-12-27: 這個作法有些問題,請參考新作法

簡單講就是新增一個 anchor 元素 a,然後呼叫 myLightbox.start( a ) 即可。

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

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

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


程式碼如下:(用的是 Lightbox 2.03.3Prototype 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 上才行…… 還真是難用啊。

附上測試用小圖:

Lightbox 測試原本 width=0 的測試圖

初嘗 blogger

生食 blogger

blogger 吃起來像陽春的自助餐,申請帳號就能得到一個托盤,接著開始找不著地方揀菜;或者找到餐台,卻發現食材都是生的 ——很有彈性。

以上就是我初試 blogger 的感覺,為了弄出想要的功能,總要面對一連串問題;以下記錄幾個做過的調整,以及修改時的考量。


  1. JavaScript Library

    有個 jQueryPrototype 為基礎,寫 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 NeubergReally 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 找不到它們即可。