生食 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 找不到它們即可。