February 8, 2015

blogger 預設會用 br 標取代掉 p 標籤,導致文章排版走樣

使用 StackEdit 將 markdown 輸出成 HTML 上傳到 blogger 時,blogger 會自動用 <br> 將 HTML 當中的 <p> 取代掉,導致文章排版走樣。

我們可以利用 blogger 後台的管理頁面修正此問題。


目錄


(一) 問題背景

使用 StackEdit 將 markdown 輸出成 HTML 上傳到 blogger 時,blogger 會自動用 <br> 將 HTML 當中的 <p> 取代掉,導致文章排版走樣。

早在 2010 年就已經有人抱怨過 blogger 內建編輯器的這個問題,詳情請見這篇討論:
How can I make blogger insert p tags instead of br when using rich text editor?


(二) 實際範例

下面用附圖片的範例解釋這個問題,我們使用這篇文章當範例。

用 StackEdit 開啟這篇文章後,在 StackEdit 右方可預覽畫面,如下圖,簡稱為 圖A。

在選單欄選擇 publish,發佈到 blogger。開啟 blogger 發現文章排版走樣了,如下圖,簡稱為 圖B。

很明顯圖A跟圖B的差別在於:每一段文章之間少了一行空白

為了研究到底是哪裡出問題,在選單欄選擇 export to desk, 選擇 as HTML,開啟該 HTML,如下圖,簡稱為 圖C。

圖C跟圖A一樣,排版都正常,這表示 StackEdit 輸出的 HTML 沒有問題。

接下來我們看看 圖C的原始碼,如下圖,簡稱圖C2。

圖C2中,每一段文章都被 <p> 包住。

接下來我們用 blogger 的內建編輯器看看圖B的原始碼,如下圖,簡稱圖B2。

圖B2中,每一段文章的 <p> 被拿掉了,取而代之的是結尾的<br/>

這下很明顯問題就是出在 blogger 了。


(三) 解決方法

從剛剛這篇討論:How can I make blogger insert p tags instead of br when using rich text editor? 的結論得知,用 <br> 將 HTML 當中的 <p> 取代掉是 blogger 編輯器內建的行為,我們無法更改,故理論上無法解決。

但我們可以利用一些方法 workaround 修正問題,方法如下:

# 到 blogger 管理後台,隨便編輯一篇文章
# 在右方選單的 option 中,找到 line breaks 那欄位
# 選擇 Press "Enter" for line breaks`

(此步驟只須執行一次即可,Blogger 會記住這些設定。)

接著我們再回到 StackEdit,重新 publish 一次剛剛那篇文章,此時文章排版回復正常了!


(四) 補充說明

如果用 blogger 內建編輯器編輯已發布的文章,則很有可能該文章排版又會跑掉

不過在我們的 blog workflow 中,為了能跟 dropbox 同步,我們使用 StackEdit 編輯與上傳文章, 不會用到 blogger 內建編輯器,所以這個問題對我們來說不會造成太大影響。