2014年8月22日

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

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 相關主題:

3 則留言:


  1. 風雲海的狀態是「上與下的文字間隔」常會跑掉,

    必須重覆編輯許多次,才會成功。

    之前都還是在測試中,

    所以也透過不斷「再來一次」,去感覺與熟悉Blogger。

    不過已經找到屬於自己方便的方式,可以處理這個部分。

    目前不再為這事困擾。

    WFu WFu的分享很棒,

    不過對目前的我來說,難度是為常在。


    回覆刪除
  2. <7443511681835230452>(以上內容請勿刪除,從括號之後開始留言)[quote]「上與下的文字間隔」常會跑掉,必須重覆編輯許多次,才會成功。[/quote]
    根據描述,我猜測應該是在"撰寫"模式下,按過 Enter 所產生的情形。其實久了如你所提,也是能摸出規律來,不過這個解決過程要量化或是文字化算是比較困難。

    我的建議大概是,要按 "Enter" 的操作,盡量在「HTML」模式下進行,因為在「撰寫」模式下不可測的狀況太多了。

    而我寫文章一般都是在記事軟體,寫完才貼到 Blogger 文章編輯器,這樣可以避免受些氣,哈哈~

    回覆刪除
  3. <2845118507401489130>(以上內容請勿刪除,以下引言請自行刪減) [quote]我的建議大概是,要按 "Enter" 的操作,盡量在「HTML」模式下進行,因為在「撰寫」模式下不可測的狀況太多了。
    而我寫文章一般都是在記事軟體,寫完才貼到 Blogger 文章編輯器,這樣可以避免受些氣,哈哈~[/quote]
    Blogger的Rich text編輯器真的蠻糟的,連<p>都沒有,只能用<br>,從結構上來看完全沒有分段。
    若在HTML模式下自行寫好,一切換模式還會被強制打回原形。所以後面我就完全沒在用它的編輯器在寫了,乖乖貼上純HTML穩定多了。

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。