2014年4月1日 星期二

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

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

Wayne Fu 0 A+

(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、QT、WAB、AJAR、AZ 這四組 "不解析語法" 的紅色字串,是這段 JS 程式碼中,最適當的擺放位置,請對照行號,解析如下:

R:這行需讀取藍色字串的後台資料,所以這行的前後不可有 "不解析語法"。

X~Z:有 Blogger 語法迴圈、及判斷式,所以前後不可有 "不解析語法"。

AA:這行需讀取藍色字串的後台資料。

AK~AP:有 Blogger 語法迴圈、及判斷式。

所以,以上這些行號之外的範圍,就能加入 "不解析語法",避免特定字元被解析後,所產生不利閱讀的字元。

相信以上所舉的這個範例,能夠讓讀者完全瞭解 Blogger 何時需要解析特定字元、何時不需要解析,從而在正確的位置,加入 "不解析語法",來幫助日後範本程式碼的閱讀。


Blogger 範本相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP