2008-06-30

消失的圖示:快速編輯 (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;
}

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

回應: 11

毛毛牙 提到...

這個問題困擾我好久,終於解決了,非常感謝。

匿名 提到...

我不是很懂語法,但遇到的問題也是類似…無意中發現。

1、用FireFox上BLOG,檢查語法內有img該有的連結,但Quick-edit圖示就是不出來,神奇是的是用IE後竟然會跑出來@@!難道有什麼衝突或不支援?(只是Icon都跑到文章上方OTZ懶得修改了。)

2、同樣是用FireFox上BLOG,平常登入時照理說會有小工具編輯的圖示(登入後,每個區域右下會有),由於很少注意那個部份,因為第一個問題,IE6上網竟然出現OTZ首度第一次覺得那個很礙眼。

這樣統合,是不是也要懷疑Firefox多少也有影響嗎?

我的語法只能說略懂,還不吝指教。

Abin 提到...

To 匿名者:
這篇文章說的情況,在我的環境,在 IE6/IE7 圖示也都出不來,不得已我才去修正,也因此我沒懷疑過和瀏覽器有關係。當然,修正過後,不管哪個瀏覽器都會正常顯示,我才認為是系統那邊的問題。
您提到的那個編輯圖示,我倒是沒有消失過,只要登入,不管使用那個瀏覽器圖示都在那邊。不過這類問題的根源我到現在還沒找到正確合理的答案,能解決問題的辦法就是好辦法。

阿提拉 提到...

这个问题对鄙人也是困扰许久啦……谢谢

Leimi 提到...

不好意思,想請問一下
我依照您的方式更改CSS
但相關圖示仍無法顯示出來

能否請Abin幫小妹看看是怎麼回事!?
在這兒先謝謝您了!

Abin 提到...

To Leimi:
首先,先確定你有沒有打開該選項。在版面配置 -> 網頁元素 -> 選擇「網誌文章」-> 編輯,裡面有沒有勾選「顯示電子郵件發佈連結」,這樣你修改 CSS 也才顯示得出來。

Leimi 提到...

謝謝你~開了之後的確顯示了~感謝 :)

mILazI 提到...

Abin,这样做了以后,会不会遇到不在login状态的时候,也仍然显示那个铅笔图示,我的现在就是这样,能指点迷津吗?多谢

Abin 提到...

To mILazI:
請仔細看我上面的程式碼和描述,我可不是硬在版面裡塞進一個圖示,圖示會不會顯示,端看當時瀏覽的狀態(b:if cond='data:post.emailPostUrl'),這是 Blogger 官方的判斷語法,因此,只要條件符合(有登入、或是有開啟顯示圖示的功能),該圖示才會顯示出來。我加的部份,不過是更改樣式,讓該出來的圖示不會找不到圖片。
我的程式碼,當然是有套用在我的 Blog 上,相信你應該看不到我文章後面有鉛筆圖示吧?

mILazI 提到...

谢谢Abin,我的quickedit那段,我发现少了这种if语句,只有短短一句:《b:include data='post' name='postQuickEdit'/》(不能贴code,所以直接用双括号代替)

我试试看能否把这个条件插进去。谢谢你的提醒。

Joanna Lin 提到...

您好,請問,鉛筆的圖示有出現了.....但卻沒法點入,就是按鉛筆並沒有進入編輯模式....
是哪邊出現問題嗎??

張貼留言

歡迎留言或發表意見,不過要理性不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔~
發問相關的禮貌和規矩請先參考這篇文章,不當留言、和本文無關的回應可能會被直接刪除無視喔!