2008-10-22

自訂樣板的變數 (Blogger Template Variable)

自從上次發生 Google Pages 放出即將停止的消息,相信很多人和我一樣,原本將 Google Pages 當圖床的,紛紛轉換地方用來 Hosting 部落格專用的圖檔。不知道大家是不是覺得很麻煩,要去找出樣板裡所有 Hard-code 的圖檔網址和檔名,然後一一取代到新圖床的位置。尤其像我用了不少 Hack,還要一個個模組檢查,真是辛苦。本來想說就做一次而已,認了~但,最近重灌電腦,預設的 IE 回復成 6.0,有天瀏覽自己 Blog 時發現,怎麼所有透明底圖和動態的 GIF 都不透明了 (GIF transparency)?雖然在 IE7 和 Firefox 是正常的,但還在用 IE6 的人應該還不少吧!Google 完發現好像是我新圖床:Google Sites 的問題!這可不是開玩笑的,Bug 修正前我只好暫時再回去用 Google Pages 頂一下,不過,之前做過一次更改圖片路徑的事情又要全部重作一次,實在好累啊!

後來思考,程式寫多了,能不能搞一個類似全域變數,用一個變數來指定圖床的網址,以後有任何更改,只要改這一個變數內容就行啦!試了很多辦法,包含用 Javascript 做,都沒辦法做到我希望看到的程度,回頭看看 Blogger 的原始樣板,沒錯,在 CSS 區段內是有 Blogger 樣式變數的定義,官方也有文件解釋使用方法和語法,不過文件中標明了「這是用來自訂文字和顏色」使用的(也就是用在「版面配置」、「字型和顏色」的版面設定),type 也只有 font 和 color 兩種,沒搞頭啊!不過反骨的我當然不放棄,管他的,先試了再說。開始前先講一下這種樣板變數的預設用法。在樣板裡面,定義樣式變數的區段是在 <b:skin> 標籤的後面,拿我的樣板擷取部份來舉個例子:

/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#000" value="#000000">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#ccc" value="#cccccc">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#9ad" value="#99aadd">
......

這一段是用來宣告和定義 CSS 使用的自訂變數型態和內容,像是 bgcolor 變數,就是設定 Blog 的背景顏色,textcolor 想當然是文字顏色。當在調整 CSS 顏色或字型時,像是某個區塊要指定 Blog 背景色為該模組的背景、文字也套用整個 Blog 的字型顏色,在 CSS 定義裡就可以寫成像:

code.cmd {
  color: $textcolor;
  background: $bgcolor;
}

是的,呼叫的方式就是直接用 $變數名稱。進入重點,我們來自己定義一個變數,當作外連圖片的網址:

<Variable name="imgURL" description="Image hosting URL"
             type="automatic" value="http://abinlee.link.googlepages.com">

其中變數名稱叫 imgURL,變數的內容(網址)為 value 裡的定義(請自行修改),那麼只要在 Blogger 專用的 CSS 區段裡(<b:skin> </b:skin>),都可以用 $imgURL 來取用圖片網址這個變數囉!還記得我在這篇「在版面格式中放入小圖示」的文章中提到,把常用圖片從 <img> 標籤改成了 <span> 定義、以 CSS 取代傳統圖片連結,這時候又派上用場,「所有」 Blog 裡用到的小圖片我都用 CSS 定義取代,也因此這些圖片的網址就都能用這個自訂變數啦!舉個例,我 Blog 常見的一個小動態 GIF 的定義變成:

.sign-icon {
  background: url($imgURL/sign.gif) no-repeat left;
  padding-left: 11px;
}

把 <img> 變成了 background 圖檔(聽說改成這樣還好處多多,圖片可以背景讀入提昇網頁效率),記得加個 padding-left(值就是該圖檔的寬),而實際的使用上從:

<img src="http://abinlee.link.googlepages.com/sign.gif" title="Sign">

變成了:

<span class=sign-icon title="Sign">&#160;</span>

程式碼變的比較短(少了固定圖片網址)、更有彈性(用 CSS 就能調整圖片樣式),還可以得到加速載入(背景讀取)以及套用樣板變數的好處,真是有百利而無一害啊!哪天 Google Sites 又修好、想換圖床的時候,我只要改 imgURL 的變數值,整個樣板模組不大需要變動,很快就可以搞定了!

不過別高興的太早,還有最後一個步驟。剛剛提到我們的各種圖檔都搞成背景讀入,這樣很棒,但在 IE6 又有一個狀況(IE 真是個爛瀏覽器),背景讀入的圖片被預設取消 Cache,也就是說每當你游標移到這些「背景讀入」的 GIF 檔,它又會重新載入、看起來像是閃爍一樣,這個問題要透過 Javascript 去調整 BackgroundImageCache 的預設值。請在 Javascript 的區段加入:

<!-- Used for Fixing IE6 background image cache problem  -->
<script type='text/JavaScript'>
try {
  document.execCommand(&#39;BackgroundImageCache&#39;, false, true);
} catch(e) {}
</script>

這個設定在其他瀏覽器都是正常無害的,專門針對 IE6 開啟。

最後總結一下。本文是利用 Blogger 內建專屬的樣式變數,拿來實現樣板全域變數的需求,接著把所有用到 <img> 標籤的圖檔,統統轉換成 CSS 的樣式控制,以便能使用剛定義的全域變數,達到用一個變數控制所有圖檔網址路徑的目的。最後再修正 IE6 對 CSS 樣式背景圖不 Cache 的問題,這樣就大功告成了!這裡也可以倡導一下好的程式寫作概念,所有宣告都應該模組化以保持彈性,避免 Hard-code 任何可能需要修改的資訊在程式主體裡,才能避免未來找不到或沒改到,未來還可以預留樣式調整的彈性。

回應: 6

匿名 提到...

頭推,Abin大的教學每次都有驚喜,將圖片轉為背景讀入可以讓本文先顯示出來,閱讀的效果又更好啦。
而且還試驗了多種瀏覽器承現的效果並單一修正。
這種功力實在望塵莫即啊^^
另外想請問這種可不可以也運用在picasa呢? 或是google code?
picasa的圖片都不能單一抓出來..
而用googleCode好像也不能拿來當圖床XD
再推...利用css變數效果可以更精簡body裡面的程式碼。

Abin 提到...

To yenyu:
這個自訂變數不限一個,如果你有其他像是程式碼、照片的空間,可以自己定義多個來使用。
基本上只要是能長久保留、提供外連的空間都可以用來當圖床,我自己首選都還是用 Google 的相關服務來做。

riceone 提到...

從這篇教學中意外學得如何自定義模版中的字型與顏色。我套用的模版原本無法直接更改文章標題顏色,看完這篇再參照Abin兄的原始碼,自行新增變數以達成後台直接更換文章標題顏色的效果,意外收穫,多謝囉

Sonic 提到...

想問, 變數能否在 BODY tag 之後使用??
比如title = red 就出多個字/圖。

Abin 提到...

To Sonic:
這是 Blogger 才有的樣板變數,只能用在固定的地方,就是 BODY 前面、<b:skin> 區段中間,你自己試一下就知道了。

mensajes claro 提到...

谢谢

張貼留言

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