如何讓新版 Blogger 按 Enter 能建立換行符號

Blogger 推出新版後台介面後，原本我一直是手動切回舊版來操作，以規避新版介面產生的各種問題。但是前幾天官方已消滅了舊版後台，也就是強制一律只能使用新版介面，這下真的沒輒只能硬著頭皮使用。 其實這段期間以來，新版很多問題都已反應給官方，有些是有改進，但官方沒有動作的部分想必是沒有意願調整，沒辦法只好自己來了。 對我而言最無法接受的一項是，官方拔掉了文章編輯器的選項「按 Enter 建立換行符號」，沒有這個功能我還真不知道要如何寫文章，大致原因可參考「2020 Blogger 新版文章編輯器使用心得」→「二、HTML 模式的變革」→「5. 取消按 Enter 建立換行符號功能」。 因為我只用 HTML 模式寫文章，若按 Enter 不能換行的話，那文章內容豈不全部黏在一起無法斷行，這樣版面能看嗎？ 本篇會說明這個功能的重要性，並提供我想出的各種解決方案。 (圖片出處: hippopx.com)

一、為何需要使用 HTML 模式

因為官方刻意拿掉 HTML 模式的換行功能，從 Blogger 新版文章編輯器的介面、功能限制，很明顯有以下意涵：

• 希望使用者主要利用「撰寫模式」來產生文章，才能順利按 Enter 換行
• 避免使用者習慣「HTML 模式」，瞭解太多 HTML 語法，或更進一步使用 script 程式碼
• 因為使用 script 會產生更多變數，造成維護難度，所以官方傾向面對更多 "技能單純"的使用者，這一點是可以理解的。

然而打壓 HTML 模式、提倡「撰寫模式」所產生的問題，對於使用者而言是不容易解決的，過去我已寫過一篇文章詳述「我如何寫一篇 Blogger 文章的流程」，這會造成：

• 不易修改 CSS
• 會產生雜亂、無用多餘的 HTML 碼
• 不易控制文章版本，會有遺失文章內容的風險(本站接獲太多案例，也寫了多篇相關文章)

建議讀者詳讀該篇文章，只有使用純文字編輯軟體來撰寫文章，才能避免以上問題，還能使用建立好的文章範本節省寫作時間，並可搭配 dropbox 來隨時自動備份不同時間點的文章版本，完全不必擔心各種人為操作失誤、或是網路伺服器錯誤，而導致的文章內容消失。 而使用純文字編輯軟體所寫的文章，因為使用了文章範本，包含了一些 HTML 碼，所以只適合使用「HTML 模式」。

二、按 Enter 換行的原理

為了解決「HTML 模式」下，從純文字編輯軟體撰寫的文章，貼上後將無法換行的問題，研究了一下按 Enter 換行的原理。 基本上我們在任何文書軟體、甚至是「HTML 模式」下，按了 Enter 後都會產生一個 "看不見的符號"，稱為「換行符號」。雖然稱為符號卻看不到，但這個符號跟所有其他字元一樣，都有個 ASCII 碼，數值為 10，可參考「回車、換行、空格的ASCII碼值」。 意思就是 "ASCII 10"這個字元資訊仍然會被文書軟體以及「HTML 模式」儲存起來，所以在文書軟體上我們看到的效果就是「換行」。那麼問題來了，為何「HTML 模式」下不會換行呢？ 請參考這篇「html 文本换行 \n 不换行 空格无效」，原來 HTML 不會解析換行符號，如果要換行只能使用 HTML 標籤 br。 同時根據該篇提供的解決方式，我們就能自行實現換行效果了。

三、JS 自動轉換技巧

1. 注意事項瞭解原理後，我們可以寫 JS 自行將看不到的換行符號，轉換成 br標籤。 然而以下提供的程式碼只適合新建的部落格使用，因為舊文章看不見的換行符號也會轉換成 br標籤，再加上原本就有的 br標籤，會導致有兩倍的換行間隔。 這也就是說，如果網站的文章都是使用新版後台產生的，才適合使用本篇的 JS 程式碼。 2. 安裝程式碼以下操作需要修改範本，在進行之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。 請到後台「主題」→ "自訂"按鈕右方的下拉圖示 →「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋以下字串： <b:include data='post' name='post'/>找到後在此字串的下一行，插入以下程式碼： <!--自動轉換換行符號為 br--> <script> //<![CDATA[ (function() { var $postBody = document.querySelector(".post-body"), html = $postBody.innerHTML, newContent = html.replace(/\n/g, "<br/>"); $postBody.innerHTML = newContent; })(); //]]> </script> <!--Designed By WFU BLOG-->儲存後即可看到效果。

四、HTML 手動轉換技巧

要新舊文章都不會版面異常的話，還是手動處理比較保險，也就是前面參考文章的連結提到的，幫文章加入 pre標籤，可以讓看不見的換行符號，產生 br標籤的換行效果。 然而直接使用 pre標籤會讓「撰寫模式」版面異常，以下介紹更好的處理方式。 1. 每篇文章處理方式 Blogger 後台切換到「HTML 模式」，每篇文章寫完之後，前後要加入以下字串：

• 在文章開頭前面插入字元 <div class="pre">
• 在文章結尾後面插入字元 </div>

2. CSS 設定接著要在範本中新增 CSS，請按以下步驟：

• 後台 → 主題 → 自訂 → 進階 → 新增 CSS

然後加入以下 CSS 碼： .pre{white-space: pre-line;}輸入完按右下角的「儲存」圖示按鈕，可回到文章頁面看效果。 需要看範例的話，本篇文章就是使用這樣的技巧所撰寫。 3. 後台使用文章範本前面的步驟「1. 每篇文章處理方式」，每篇手動處理比較麻煩，也可在後台「設定」→「文章」→「文章範本」這裡，直接輸入頭尾字串，新文章就會自動出現不必再另外輸入，記得文章內容要放在頭尾字串之間即可。 4. 補充：使用熱鍵產生換行符號另外補充 Blogger 社團成員提供的密技，請參考「新版文章編輯器產生 br 標籤的操作技巧」，官方秘密提供了一組熱鍵：

• Shift + Enter

在「撰寫模式」及「HTML 模式」都有效，按下後會自動產生 br標籤，達到換行效果。