Blogger 範本裡為何這麼多亂碼？告訴你解決的方法

(Pic from: techbyte4u.com)+Pan Kuan 在這個「Blogger中文社群討論串」詢問："我範本裡放了GA的語法，存檔後會被轉碼成這樣，想請教是我範本壞掉了嗎？還是我動了哪邊的設定而造成的呢？"，其實這也是許多使用者的疑問與困擾。

之所以會造成這個現象，是因為 Blogger 在範本存檔後，會自動轉換某些字元，等下次開啟範本時，就會發現原本看起來正常的字元，這下變成一堆亂碼了。

為何 Blogger 要這麼做？確實是有他的理由，請見本文詳細的分析、以及讓字元不被轉換的正確操作方法。

一、哪些字元會被轉換

1. 強制轉換

有時複製程式碼出錯(或是自己寫錯)，範本中出現以下這些藍色 "落單的字元" 時，會出現錯誤訊息：

• & → &
• < → &lt;
• > → &gt;

除非我們一一更改為對應的紅色字串，否則範本是無法儲存的，類似以下的畫面，就是在提醒 "&" 這個字元沒有轉換囉：




2. 下次轉換

範本中出現以下這些藍色的字元時，儲存後、下次開啟時，幾乎都會被轉換：

• " → &quot;
• ' → &#39; 或是 &apos;
• 全形符號 → 進行 unicode 編碼 (例如 "∥" → "&#8741;")

以上單引號 ' 是比較特殊的，在 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 程式碼的前後，加上紅色字串 //<![CDATA[ 與 //]]>，就能讓藍色的字元 &、<、" 等等都不會被解析(轉碼)。 只要是 WFU BLOG 比較近期的程式碼(例如一年內)，都會刻意加上紅色字串，用意就是讓讀者將來改範本時，在閱讀或是判斷上不會造成障礙。 

而如果使用了非出自 WFU BLOG 的程式碼，就會有類似本文的疑惑，那麼務必請詳讀本文、以及「四、正確使用 "不解析語法" 的時機」，瞭解紅色字串應何時使用，來自行增加這些字串。

三、為何 Blogger 要如此整使用者呢？

一堆亂碼看了就頭疼，Blogger 是否不希望使用者亂動範本，造成非預期的異常狀況(及 Blogger 的負擔)，所以讓你的眼睛不舒服，而出此下策呢？

不能說 Blogger 完全沒這意思，不過經過深究後，其實是有他的用意在，因此這也算是 Blogger 的一種解決方案。


1. Blogger 語法

為了與後台伺服器溝通，Blogger 自創了 HTML/CSS/JS 以外的「Blogger 語法」。比較簡單的判斷方法，在範本中看到 <b: 開頭的標記，那一行就是 Blogger 語法。例如「Blogger 範本__(一)各種註解方式及區塊的修改」→「二、Blogger 各區塊的語法格式」，或是「Blogger 七種頁面形態判斷語法詳解」的判斷式，可看到很多範例。


2. Blogger 後台資料

為了能直接讀取後台資料庫，Blogger 自創了 <data: 開頭的標記，例如 <data:post.url/> 就是代表 "文章網址" 的字串資料。


3. 為何 Blogger 需要轉換字元

根據「Blogger 頁面判斷式(PageType)的各種應用」→「三、特殊用法──混合其他語法」，Blogger 語法可以跟 HTML/CSS/JS 等語法混用，這會造成一個需要解決的問題：系統在處理 JS/CSS 時，如何判斷出哪些是字串、哪些 Blogger 語法、哪些是後台資料字串？

• A. 因為 JS 會使用到 <、> 符號，為了能判斷出 Blogger 語法 <b: 的標記 → JS 中的 <、> 這兩個符號必須被轉碼。

• B. 為了能讀取後台資料，例如在 JS 中要讀取後台 <data:post.url/> 文章網址資料的話 → 單、雙引號都必須轉碼，變成 &quot;<data:post.url/>&quot; → 如果不轉碼的話， "<data:post.url/>" 雙引號之間就真的被當成字串來處理，而不會讀取後台資料了。

• C. 所有經轉碼的字串，開頭都包含 "&" 這個字元，因此 "&" 這個字元本身也得強制轉碼成 "&amp;"，這樣才能跟其他的轉碼字串(例如 "&quot;" 的第一個字元)做出區分。

四、正確使用 "不解析語法" 的時機

上一段的內容如果看得懂得話，那麼 "不解析語法" 何時使用，就很清楚了。只要在 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 何時需要解析特定字元、何時不需要解析，從而在正確的位置，加入 "不解析語法"，來幫助日後範本程式碼的閱讀。

Blogger 範本相關文章：