消失的圖示：快速編輯 (quick-edit) & 電子郵件發佈連結 (email-post)

之前就有發現，莫名其妙在 Post 尾巴 Blogger 內建的「快速編輯」和「電子郵件發佈連結」的圖示消失了，一直沒去追究為什麼、也沒去修正，直到這兩天心血來潮才去看看，到底發生了什麼事。這兩個圖示主要的功能，「快速編輯」是在文章後面多一個「鉛筆」的圖示，在管理帳號「登入」的狀態下，可以點圖示直接編輯該篇文章；「電子郵件發佈連結」則是允許讀者將正在閱讀文章的連結、透過點擊按鈕方便寄送到自己或朋友的電子郵件信箱。這兩個基本上都是 Blogger 原來就有的功能，不用 Hack，只要透過管理介面開啟就行了（版面配置 -> 網頁元素 -> 選擇「網頁文章」模組右下的「編輯」）：

原則上一旦有設定，每篇文章的文末 (Post-footer) 區段裡，就應該要有這兩個功能圖示的樣式程式碼，類似這樣：（要「展開小裝置範本」才看得到，以下第一段是「快速編輯」、第二段是「電子郵件發佈連結」）

<!-- quickedit pencil -->
<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <span class='quick-edit-icon'>&#160;</span>
      </a>
    </span>
  </b:if>
</b:includable>


<!-- 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>


功能正常的話，文末應該會有像這樣的圖示：

不管做過什麼 Hack，我都儘量避免去碰這類原生 Blogger 的樣式原始碼，但，不知道什麼時候開始，這兩個功能的圖示和連結就不見了！仔細去看網頁的原始程式碼，又簡單地 Debug 一下，發現連結還在，消失的只有「圖示」！怪了，那個圖示是 Blogger 系統內建的，沒有「不見了」的道理啊！而且神奇的是，有些人的 Blog 功能正常圖示也在、原始碼也一樣，為什麼就我或部份人的沒有圖示？用 Google 找了一下、找到 Blogger 的官方討論區，發現有這個狀況的人還真不在少數，而且「災情」持續至今也半年多了耶！大家七嘴八舌得到的結論，比較可信的該問題癥結還是在「Blogger/Google」上面。應該是 Blogger 採用 Cloud 分散式運算和儲存架構，但不知怎麼的，「部份」Blogger 的伺服器裡「剛好」就沒有那兩個圖示檔，導致這兩個在官方預設 CSS 樣板文件裡沒定義到、直接使用相對路徑連結的圖檔，就這麼地無法顯示，功能不是消失，只是負責連結這項功能的圖檔連結不到所致。

了解原因之後，解決方法也很簡單：補個圖給它不就好了！我拜讀了 iPlay99 的這篇文章、知道了原來那兩個消失的圖示的官方連結位置，不過該作者與網路上很多解決該問題的辦法一樣，將上面樣板裡定義圖示的 span 標籤「覆寫」成該圖檔的固定連結 (<img src=""/>)，非常直覺的方法，但還要搜尋和改動版面原始碼、而且還 Hard-code 了圖檔連結在樣板裡！我想了自己的解決辦法，既然「預設的 CSS」連結不到圖檔，這還有現成的 span class 類別 ('quick-edit-icon', 'email-post-icon')，直接覆蓋繼承該 CSS 定義不就搞定了？所以我的辦法是：不用搜尋樣板原始碼裡、顯示這兩個圖示的程式在哪裡，只要在最前面、給定自己對這兩個 class 的 CSS 定義，並把圖檔連結改到官方圖檔連結位置就好了！（用 CSS 修正這類問題才是王道啊～）

以上是原理，看不懂也沒關係，如果一樣那兩個功能有開啟但圖示卻消失的問題，只要打開樣板原始碼、在定義 CSS 樣式的區段裡面 (<b:skin> </b:skin> )，直接插入以下幾行，就能覆蓋官方的 CSS 圖檔連結、解決這個問題了：

.email-post-icon {
background: url("http://www.blogger.com/img/icon18_email.gif") no-repeat left;
padding: 9px;
}
.quick-edit-icon {
background: url("http://www.blogger.com/img/icon18_edit_allbkg.gif") no-repeat left;
padding: 9px;
}


當然，如果有自己喜歡的圖示，可以把以上的圖檔連結換成自己的，更能一勞永逸解決問題。