Blogger 推出新版後台介面後，原本我一直是手動切回舊版來操作，以規避新版介面產生的各種問題。但是前幾天官方已消滅了舊版後台，也就是強制一律只能使用新版介面，這下真的沒輒只能硬著頭皮使用。
其實這段期間以來，新版很多問題都已反應給官方，有些是有改進，但官方沒有動作的部分想必是沒有意願調整，沒辦法只好自己來了。
對我而言最無法接受的一項是，官方拔掉了文章編輯器的選項「按 Enter 建立換行符號」，沒有這個功能我還真不知道要如何寫文章，大致原因可參考「2020 Blogger 新版文章編輯器使用心得」→「二、HTML 模式的變革」→「5. 取消按 Enter 建立換行符號功能」。
因為我只用 HTML 模式寫文章，若按 Enter 不能換行的話，那文章內容豈不全部黏在一起無法斷行，這樣版面能看嗎？
本篇會說明這個功能的重要性，並提供我想出的各種解決方案。
(圖片出處: hippopx.com)
一、為何需要使用 HTML 模式
因為官方刻意拿掉 HTML 模式的換行功能，從 Blogger 新版文章編輯器的介面、功能限制，很明顯有以下意涵：- 希望使用者主要利用「撰寫模式」來產生文章，才能順利按 Enter 換行
- 避免使用者習慣「HTML 模式」，瞭解太多 HTML 語法，或更進一步使用 script 程式碼
- 因為使用 script 會產生更多變數，造成維護難度，所以官方傾向面對更多 "技能單純" 的使用者，這一點是可以理解的。
- 不易修改 CSS
- 會產生雜亂、無用多餘的 HTML 碼
- 不易控制文章版本，會有遺失文章內容的風險(本站接獲太多案例，也寫了多篇相關文章)
二、按 Enter 換行的原理
為了解決「HTML 模式」下，從純文字編輯軟體撰寫的文章，貼上後將無法換行的問題，研究了一下按 Enter 換行的原理。 基本上我們在任何文書軟體、甚至是「HTML 模式」下，按了 Enter 後都會產生一個 "看不見的符號"，稱為「換行符號」。雖然稱為符號卻看不到，但這個符號跟所有其他字元一樣，都有個 ASCII 碼，數值為 10，可參考「回車、換行、空格的ASCII碼值」。 意思就是 "ASCII 10" 這個字元資訊仍然會被文書軟體以及「HTML 模式」儲存起來，所以在文書軟體上我們看到的效果就是「換行」。那麼問題來了，為何「HTML 模式」下不會換行呢？ 請參考這篇「html 文本换行 \n 不换行 空格无效」，原來 HTML 不會解析換行符號，如果要換行只能使用 HTML 標籤三、JS 自動轉換技巧
1. 注意事項 瞭解原理後，我們可以寫 JS 自行將看不到的換行符號，轉換成<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 手動轉換技巧
要新舊文章都不會版面異常的話，還是手動處理比較保險，也就是前面參考文章的連結提到的，幫文章加入- 在文章開頭前面插入字元
<div class="pre"> - 在文章結尾後面插入字元
</div>
- 後台 → 主題 → 自訂 → 進階 → 新增 CSS
.pre{white-space: pre-line;}
輸入完按右下角的「儲存」圖示按鈕，可回到文章頁面看效果。
需要看範例的話，本篇文章就是使用這樣的技巧所撰寫。
3. 後台使用文章範本
前面的步驟「1. 每篇文章處理方式」，每篇手動處理比較麻煩，也可在後台「設定」→「文章」→「文章範本」這裡，直接輸入頭尾字串，新文章就會自動出現不必再另外輸入，記得文章內容要放在頭尾字串之間即可。
4. 補充：使用熱鍵產生換行符號
另外補充 Blogger 社團成員提供的密技，請參考「新版文章編輯器產生 br 標籤的操作技巧」，官方秘密提供了一組熱鍵：
Shift +Enter
更多 Blogger 相關技巧：
一個簡單的基本需求....
回覆刪除被Google搞得如此複雜！
真的成功了，一定要浮上來說感謝
回覆刪除因為不能換行，都快想要搬家了，可是還真沒地方去了 QQ