(Pic from: techbyte4u.com)+Pan Kuan 在這個「Blogger中文社群討論串」詢問:"我範本裡放了GA的語法,存檔後會被轉碼成這樣,想請教是我範本壞掉了嗎?還是我動了哪邊的設定而造成的呢?",其實這也是許多使用者的疑問與困擾。
之所以會造成這個現象,是因為 Blogger 在範本存檔後,會自動轉換某些字元,等下次開啟範本時,就會發現原本看起來正常的字元,這下變成一堆亂碼了。
為何 Blogger 要這麼做?確實是有他的理由,請見本文詳細的分析、以及讓字元不被轉換的正確操作方法。
一、哪些字元會被轉換
1. 強制轉換
有時複製程式碼出錯(或是自己寫錯),範本中出現以下這些藍色 "落單的字元" 時,會出現錯誤訊息:
- &→ &
- < → <
- > → >
除非我們一一更改為對應的紅色字串,否則範本是無法儲存的,類似以下的畫面,就是在提醒 "&" 這個字元沒有轉換囉:
2. 下次轉換
範本中出現以下這些藍色的字元時,儲存後、下次開啟時,幾乎都會被轉換:
- "→ "
- '→ ' 或是 '
- 全形符號→ 進行 unicode 編碼 (例如 "∥" → "∥")
以上單引號 '是比較特殊的,在 Javascript(以下簡稱 js)、CSS 之中會被轉換,而在 HTML 標籤中比較不會被轉換,例如以下的 HTML 語法範例,不會轉換:
<div style='font-size: large;' title='wfublog.com'>WFU BLOG</div>
二、避免字元被轉換的方法
字元會被 Blogger 轉換,多半發生在 js (或 CSS)碼,因為有大量的單、雙引號。只要利用以下紅色字串的 "不解析語法",就能讓 js、CSS 碼都不會被轉換(範例出自「如何讓網站不被 7headlines 用 IFRAME 內嵌框架」):
<script>
//<![CDATA[
if (top.location != location && document.referrer.search("blogger.com") < 0 && document.referrer.search("blogspot.com") < 0) {
top.location.href = location.href;
}
//]]>
</script>
以上可看到,在 js 程式碼的前後,加上紅色字串
而如果使用了非出自 WFU BLOG 的程式碼,就會有類似本文的疑惑,那麼務必請詳讀本文、以及「四、正確使用 "不解析語法" 的時機」,瞭解紅色字串應何時使用,來自行增加這些字串。
三、為何 Blogger 要如此整使用者呢?
一堆亂碼看了就頭疼,Blogger 是否不希望使用者亂動範本,造成非預期的異常狀況(及 Blogger 的負擔),所以讓你的眼睛不舒服,而出此下策呢?
不能說 Blogger 完全沒這意思,不過經過深究後,其實是有他的用意在,因此這也算是 Blogger 的一種解決方案。
1. Blogger 語法
為了與後台伺服器溝通,Blogger 自創了 HTML/CSS/JS 以外的「Blogger 語法」。比較簡單的判斷方法,在範本中看到
2. Blogger 後台資料
為了能直接讀取後台資料庫,Blogger 自創了
3. 為何 Blogger 需要轉換字元
根據「Blogger 頁面判斷式(PageType)的各種應用」→「三、特殊用法──混合其他語法」,Blogger 語法可以跟 HTML/CSS/JS 等語法混用,這會造成一個需要解決的問題:系統在處理 JS/CSS 時,如何判斷出哪些是字串、哪些 Blogger 語法、哪些是後台資料字串?
- A. 因為 JS 會使用到 <、>符號,為了能判斷出 Blogger 語法
<b: 的標記 → JS 中的 <、>這兩個符號必須被轉碼。
- B. 為了能讀取後台資料,例如在 JS 中要讀取後台 <data:post.url/>文章網址資料的話 → 單、雙引號都必須轉碼,變成 "<data:post.url/>"→ 如果不轉碼的話, "<data:post.url/>"雙引號之間就真的被當成字串來處理,而不會讀取後台資料了。
- C. 所有經轉碼的字串,開頭都包含 "&" 這個字元,因此 "&" 這個字元本身也得強制轉碼成 "&",這樣才能跟其他的轉碼字串(例如 """ 的第一個字元)做出區分。
四、正確使用 "不解析語法" 的時機
上一段的內容如果看得懂得話,那麼 "不解析語法" 何時使用,就很清楚了。只要在 JS/CSS 的程式碼中,需要用到以下時,不可使用 "不解析語法":
- Blogger 語法
- Blogger 後台資料
拿個範例來說明會比較清楚,以下程式碼摘自「Blogger 相關文章+任意尺寸縮圖+更多相關文章」:
這是比較極端的例子,JS 穿插了大量的 Blogger 語法及後台資料,很少人這麼運用,不過剛好是本文的最佳範例。
B、Q,T、W,AB、AJ,AR、AZ這四組 "不解析語法" 的紅色字串,是這段 JS 程式碼中,最適當的擺放位置,請對照行號,解析如下:
R:這行需讀取藍色字串的後台資料,所以這行的前後不可有 "不解析語法"。
X~Z:有 Blogger 語法迴圈、及判斷式,所以前後不可有 "不解析語法"。
AA:這行需讀取藍色字串的後台資料。
AK~AP:有 Blogger 語法迴圈、及判斷式。
所以,以上這些行號之外的範圍,就能加入 "不解析語法",避免特定字元被解析後,所產生不利閱讀的字元。
相信以上所舉的這個範例,能夠讓讀者完全瞭解 Blogger 何時需要解析特定字元、何時不需要解析,從而在正確的位置,加入 "不解析語法",來幫助日後範本程式碼的閱讀。