沒穿方服

---

原始碼

var
  $textarea = document.getElementById('postingHtmlBox'),
  pattern = [
    '(<div class="separator" style="clear: both; text-align: center;">\n)?',
    '<a href="(.+)"',
    ' imageanchor="1" style=".*"><img border="0" height=".+" width=".+" ',
    'src="(.+)" /></a>(</div>)?'
  ].join(''),
  re = new RegExp(pattern, 'g');

if ($textarea) {
  $textarea.value = $textarea.value.replace(re, function (str, p1, p2, p3, p4, p5) {
    return [
      '<a href="', p2, '">',
      '<img src="', p3, '" alt="" /></a>'
    ].join('');
  });
} else {
  alert('錯誤，找不到 textarea#postingHtmlBox。');
}

重現方法之一，是在 blogger 後台「意見設定」將「意見欄位置」改為「已內嵌下列文章」，然後在「版面配置」新增 MyBlogLog 的小工具，再用 ie 6 開啟單篇文章網址，就爆了。

關鍵是 blogger 內嵌意見表單的原始碼，裡面的 BLOG_CMT_createIframe 跟 ie 不合，如果把這句延到頁面讀完再執行，可以避開「操作已中止」錯誤：

// 以下是在模板內
if ( document.addEventListener ) {
  document.addEventListener( "DOMContentLoaded", function(){
    BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
  }, false );
}
else if ( document.attachEvent ) {    // ie 跑這邊
  window.attachEvent(&quot;onload&quot;, function(){
    BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
  });
}

不過即使如此，測試留言功能依然失敗，送出時會發生「存取被拒」。

---

我的建議是：除了內嵌表單，最好也弄個鏈結到留言頁面，例如這個 blog 在單篇文章可以點「張貼意見」旁的小傘標 ☂（ie 可能會顯示方框）看到效果。原理可參考舊文 內嵌留言表單 + 彈出留言視窗 中的 手動插入「彈出留言視窗」鏈結。

不然使用者關掉 JavaScript 會找不到地方留言。

.comments {counter-reset: count;}
.comment-timestamp:before {
  content: counter(count) '.';
  counter-increment: count;
}

其中 count 變數可以隨意改名，content 屬性也可作變化，稍微搜尋一下應該就有參考了。

※很舊的瀏覽器不支援（我真好心，每次都提這個）

1. 小裝置即將刪除：

   

2. 很抱歉：

   

搜尋一下會找到解答，把 <b:widget id='XX1' 裡的數字改正即可。

具體作法是參考舊的範本（就是管理介面「修改 HTML」那個），裡面有類似 <b:widget id='Feed1' 這樣的東西，但要上傳的範本裡可能是 <b:widget id='Feed4'，兩邊 1 跟 4 沒對上就會出問題。

所以請修改要上傳的範本，把 widget id 改成跟舊的一樣即可。像前面例子就是要改成 Feed1。

※ 把 widget 砍光再新增，id 好像就會重排的樣子，這樣改舊的 widget 來適應新範本應該也可行。

<a href="http://lh5.ggpht.com/_z34accOoRZI/SRlJtD6_xrI/AAAAAAAAAiY/0NLA6VkW2Go/image.jpg"><img src="http://lh5.ggpht.com/_z34accOoRZI/SRlJtD6_xrI/AAAAAAAAAiY/0NLA6VkW2Go/s320/image.jpg" alt="" /></a>

將 bookmarklet 加進書籤 → 清理 blogger 插入的圖片標籤
在文章編輯器的「修改 Html」模式點了就立刻執行，不會多問，所以請自己保重（文章弄壞、Ctrl + Z 又沒用的話，我也沒辦法負責啊。）

原始碼拆解如下：

javascript:
document.getElementById('textarea').value = document.getElementById('textarea').value.replace(
  /<a onblur=\".+\" href=\"(.+)\"><img style=\".+\" src=\"http:\/\/(\d)+\.bp\.blogspot\.com\/(.+)" border=\"0\" alt=\"\"id=\".+\" \/><\/a>/g,
  function(str, p1, p2, p3) {
    return &apos;<a href="http://lh&apos; + (parseInt(p2)+2) + &apos;.ggpht.com\/&apos; + p3.replace(/s(\d)+(-h)?\//,&apos;&apos;) + &apos;"><img src="http://lh&apos; + (parseInt(p2)+2) + &apos;.ggpht.com\/&apos; + p3 + &apos;" alt="" /></a>\n&apos;;
  }
);void 1

手動插入「彈出留言視窗」鏈結

在模版中找到 <b:includable id='comment-form' var='post'> ……（中略） </b:includable> 一段，裡面會有 <h3><data:postCommentMsg/></h3>，該 h3 就是內嵌表單上方的「張貼意見」幾個字。接著插一行鏈結的原始碼進去，變成：

<h3>
  <data:postCommentMsg/>
  <a class="comment-link" title="彈出留言視窗" expr:href='&quot;http://www.blogger.com/comment.g?blogID=把我改掉&amp;amp;postID=&amp;quot; + data:post.id + &quot;&amp;amp;isPopup=true&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,resizable=yes,width=400,height=740&quot;); return false;'>彈出視窗</a>
</h3>

其中 blogID（把我改掉）要改成自己的 blog 號碼，有疑問請參考官方說明 我的 Blog ID 號碼是多少？
其餘文字和 width 什麼的參數比較不重要，可以視需要修改。

至此就完成了…… 其實「內嵌」與「彈出視窗」應該可以共存才對，沿用彈出視窗的模板 <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>彈出視窗</a> 也比較單純，不過目前這樣寫 data 都沒東西，似乎跟「表單已內嵌」相衝的樣子。

---

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