2014年8月1日 星期五

Blogger 文章編輯模式只要切換, 就可能產生異常現象? 教你徹底解決的技巧

Blogger 文章編輯模式只要切換, 就可能產生異常現象? 教你徹底解決的技巧

Wayne Fu 0 A+
長久以來使用 Blogger 文章編輯器,常常在「HTML模式」與「撰寫模式」切換之後,發生許多讓人 OOXX 的狀況,例如版面錯亂、語法失效等等,卻又找不出個根治的方法。

也許大部分使用者很少發生類似以上情境,因為只要專注於寫作,文章內容不去使用額外的 HTML、Javascript(簡稱 js) 語法,不使用花俏的版面設計效果,說不定會對這篇的標題無感。

不過若你已經是 WFU BLOG 的忠實讀者,相信遇上本文的異常現象是遲早的事。以下先列舉各種過往經歷的異狀,並提供有效的解決方案。



一、各種異常現象


1. 錨點語法

這是網頁常用的 HTML 語法,可用來快速跳轉到頁面指定位置,例如以下的程式碼,按下後可跳到頁面最上方:

<a href="#">GO TOP</a>
更多錨點的操作可參考這篇「HTML基礎教學(5)--超連結與錨點」 ,而本站有很多文章也使用了錨點,來快速跳轉到文章不同的章節,例如這篇「本站使用的 Blogger hack 及工具整理」。

但是悲劇來了,只要在文章中使用了錨點語法,除非你永遠都不會重新編輯這篇文章,那算運氣好;但只要當你再度編輯這篇文章,且曾在「HTML模式」與「撰寫模式」切換過,那就慘了──Blogger 會檢查 A 標籤有無網址,而當檢查到錨點沒有附網址,便會自動幫你補上一個網址(編輯頁面的網址),如此一來,這個錨點不但失效,還會跳到不相干頁面

至於異常狀況的畫面,可直接參考這篇文章「解決 Blogger 匯入文章時 "繼續閱讀" 出錯的問題」→「一、異常狀況」,就跟這一點的異狀差不多,最後就是 Blogger 會自動幫超連結補上 "http://www.blogger.com/blogger.g?blogID=xxxxx" 這樣的網址字串。因為篇幅的關係,更多錨點異常的原理,請參考這篇「超連結 A 標籤及錨點, 你不知道的操作技巧」。



2. HTML 標籤內包含 OL、UL 等語法

文章內使用 OL、UL 等標籤(也就是撰寫模式下的 "編號清單"、"項目符號清單" 按鈕功能)是沒問題的,切換編輯模式後也不會異常;但 OL、UL 包在其他標籤內時,那就不一定了。

例如過去的教學文章「部落格文章+特殊文字區塊」→「四、Blogger 系統問題」,詳細說明了在這種情況下,切換模式會產生的異狀,OL、UL 這類的標籤會被整個打散重組,讓人十分無言。


3. 使用自定義 HTML 標籤來包含其他標籤

為了方便操作「幫文字加上底線」、以及上一點的「特殊文字區塊」,會使用一些自定義的 HTML 標籤。有時 WFU 會在這些自定義標籤展示程式碼,而使用了 <code> 這樣的標籤,那麼文章重新編輯、並切換過編輯模式後,又再度會出現上一點的慘狀──程式碼被打散重組。


4. 使用 javascript 內含 HTML 標籤

Blogger 很強大的一點是,文章內可執行 js 。但假如你在 js 裡面使用字串、且字串包含 HTML 標籤的話,那麼就慘了──比以上 3 點還慘。

上面提到的 3 點,都是切換編輯模式才會錯亂,而這個第 4 點,不用切換編輯模式,只要你重新編輯這篇文章,就會發現,字串裡面的 HTML 標籤都被自動斷行了──這也代表 js 會直接當掉,完全無法執行

舉個明顯的例子,這篇「文章列表+ "讚" 統計(依日期排列)」,js 程式碼內的字串含許多 HTML 標籤,只要你儲存以後,再度編輯文章,就會看到上面所述的斷行慘狀,因此該篇文章的結尾必須用個紅色區塊來特別公告此事。



二、解決方案的優缺點


1. 解決方案操作步驟

引起各種異狀的原因在於 Blogger 太過聰明(或自作聰明),自動對 HTML 內容進行解析,但又解析錯誤。值得慶幸的是,以上四種狀況都可用同一種方式來解決 → 把 HTML 轉換為 Javascript 編碼,讓 Blogger 沒機會進行解析。

解決方式的實作文章,在過去的文章已經敘述過,請直接參考這篇「部落格文章+特殊文字區塊」→「五、再次轉碼──HTML 轉換為 Javascript」的步驟,進入下面這個網頁進行轉碼即可:

2. 解決方案的小缺點

經過轉碼後的內容,成了一堆亂碼,不但 Blogger 文章編輯器不想理會,我們自己也不知如何是好──如果想要重新編輯內容的話。所以若有辦法重新編輯的話,這就是個完整的解決方案了。



三、恢復亂碼內容的方法


以下利用一個完整的編碼、還原流程,來利於操作說明。

1. 原始內容

假設原始 HTML 碼為以下(這些內容經過切換編輯模式後一定會亂掉):

<code><ol><li>Hi, Welcome!<li>
<li>This is WFU BLOG:</li>
<li>http://www.wfublog.com/</li>
</ol></code>


2. 編碼內容

將原始碼複製,貼到這個網址的內框:

按下「開始編碼」後,產生的編碼內容如下:

<script>
<!--
document.write(unescape("%3Ccode%3E%3Col%3E%3Cli%3EHi%2C%20Welcome%21%3Cli%3E%0A%3Cli%3EThis%20is%20WFU%20BLOG%3A%3C/li%3E%0A%3Cli%3Ehttp%3A//www.wfublog.com/%3C/li%3E%0A%3C/ol%3E%3C/code%3E"));
//-->
</script>


3. 複製亂碼

將來想重新編輯時,將上個步驟 unescape("...亂碼內容...") → 複製雙引號之間的內容:

%3Ccode%3E%3Col%3E%3Cli%3EHi%2C%20Welcome%21%3Cli%3E%0A%3Cli%3EThis%20is%20WFU%20BLOG%3A%3C/li%3E%0A%3Cli%3Ehttp%3A//www.wfublog.com/%3C/li%3E%0A%3C/ol%3E%3C/code%3E

4. 還原編碼

再將亂碼貼回原本的網址:

按下「看原始碼」,就能恢復原本的 HTML 內容了:

<code><ol><li>Hi, Welcome!<li>
<li>This is WFU BLOG:</li>
<li>http://www.wfublog.com/</li>
</ol></code>

編輯完之後,再回到步驟 1 將內容編碼,貼回文章中即可完成。


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

沒有留言:

張貼留言注意事項:

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

TOP