自訂樣板的變數 (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 任何可能需要修改的資訊在程式主體裡，才能避免未來找不到或沒改到，未來還可以預留樣式調整的彈性。