2019年3月28日

Blogger 或部落格使用 Markdown 加快寫作速度的各種方案優劣分析

Blogger 或部落格使用 Markdown 加快寫作速度的各種方案優劣分析

Wayne Fu 0 A+
blogger-markdown-solutions.jpg-Blogger 或部落格使用 Markdown 寫作的各種方案優劣分析前陣子有讀者在「Blogger 文章相關工具」留言,詢問 Blogger 使用 Markdown 撰寫所發生的問題。雖然以前大致瞭解過 Markdown 的用法,但沒發表過相關文章,那麼現在就藉機會整理一下相關資料。

許多 Markdown 愛用者會希望 Blogger 官方文章編輯器能支援,然而我的看法是,Markdown 功能不算大眾,官方若真的做了可能吃力又不討好,因為:

  • Blogger 文章編輯模式只要切換, 就可能產生異常現象」,這麼多年過去了還是一樣。
  • 若加入 Markdown 功能,那麼「HTML / 撰寫」模式切換後的效果更是難以預料,說不定衍生的異常引來更多民怨。
  • 模式切換後,究竟要保留原本 Markdown code,還是要轉換成新的 HTML code,各自都有對應的問題:
    • 保留 Markdown code:可繼續從原本的 Markdown 語法編輯,但無法先知道儲存後會變成什麼 HTML 碼
    • 轉換成 HTML code:無法繼續編輯原本的 Markdown 語法
  • Markdown 版面效果其實沒有統一的規範,那麼 CSS 要如何決定?是否官方要另外做教學及修改操作文件?萬一非官方範本的 CSS 覆蓋了官方的 Markdown 語法 CSS 怎麼辦?

這些問題若我是官方也很頭大,不去碰說不定還比較好,而且部落格用 Markdown 寫作還有其他多種作法,那麼就來看看本篇的整理。




一、Markdown 介紹及工具


1. Markdown 語法

會對本篇有興趣的讀者,相信已經瞭解什麼是 Markdown,那麼這裡直接提供相關連結就好:


簡單說這是一種標記語言,可以想成是 HTML 碼的壓縮檔,使用的任何 Markdown 語法都可以解壓縮為 HTML 碼,所以使用 Markdown 語法可以縮短打 HTML 碼的時間,寫文章的速度比較快一點


2. Markdown 工具

這篇「幾款好用的Markdown編輯器」介紹了非常多 Markdown 工具,各種平台都有,以下會針對不同方案重點介紹。



二、用外掛在網頁上顯示 Markdown 效果


blogger-markdown-solutions-1.jpg-Blogger 或部落格使用 Markdown 寫作的各種方案優劣分析



為什麼這個作法最不好呢?因為文章中都是 Markdown 語法,而不是 HTML 碼,代表 Google 無法索引真正該有的 HTML 內容,對 SEO 是非常糟糕的。例如機器人無法找到這些 HTML 碼:

  • 所有的連結
  • 所有的圖片連結
  • 一些權重標籤例如 H2、H3 等

簡單說,這篇文章將只有純文字、無意義的符號(Markdown 語法)被索引,而重要的連結、圖片等 HTML 碼都不存在,這是非常可怕的事。



三、用瀏覽器外掛寫 Markdown


blogger-markdown-solutions-2.jpg-Blogger 或部落格使用 Markdown 寫作的各種方案優劣分析



這個作法比前一個已經好非常多了,至少文章中儲存的是 HTML 碼,不會發生 SEO 索引不到連結、圖片這樣的憾事,但還是需要深入分析這個作法優缺點:

  • 缺點:
    • 轉換後的 HTML 碼十分可怕,有大量累贅的無用處 HTML 碼,也有大量的行內 CSS,也增加 Google 機器人索引的負擔
    • 一般使用者對 HTML 碼無感,但對前端工程師而言,會知道這對日後的閱讀、維護相當不利
    • 這些行內 CSS 會覆蓋網站原有的 CSS 設定
    • 日後也無法透過修改範本中的 CSS,來套用全部文章的相關 CSS 效果,所以只能一篇篇手動調整
  • 優點:
    • 這個作法算是 Markdown 操作上,最便利的一個方案,不必再從別處複製 HTML 碼過來
    • 行內 CSS 很頭痛,而唯一可以安慰的優點算是,預覽的效果大致上就是網頁上呈現的效果(因為蓋掉了範本 CSS)
    • 所以對於不熟悉 HTML / CSS 的使用者,這個方案有可能是最適解



四、用網頁服務寫 Markdown


blogger-markdown-solutions-3.jpg-Blogger 或部落格使用 Markdown 寫作的各種方案優劣分析



為何推薦 Dillinger 這個線上服務呢?實際操作後,發現他轉換後的 HTML 碼,沒有多餘內容,也沒有行內 CSS。那麼雖然要多一道複製 HTML 碼的手續,但顯然優點遠多於複製 HTML 碼的操作時間。

不過事情沒有這麼單純,歸納一下優缺點:

  • 優點:
    • HTML 碼乾淨,沒有行內 CSS,日後好閱讀、維護
  • 缺點:
    • 因為沒有行內 CSS,代表預覽效果不等於網頁上看到的效果
    • 站長必須熟悉 CSS,自行在範本中新增相關的 CSS 樣式,才能重現這些 Markdown 語法的效果
    • 甚至如果範本中已有相關的 CSS,站長得知道如何修改 CSS 參數,才能覆蓋原範本的效果


看完以上說明,雖然這是最推薦的方案,但如果不具備 HTML / CSS 基本知識,也許不一定適合本方案。文章開頭提到的讀者提問表示:

轉成html再貼到blogger後引用區塊格式會跑掉

會有這情形代表,他的網站預設的 blockquote 元素 CSS 樣式,跟他看到的 Markdown 預覽效果不一樣,那麼得知道如何修改範本中 blockquote 的 CSS 才能解決這個問題。



五、用軟體寫 Markdown


blogger-markdown-solutions-4.jpg-Blogger 或部落格使用 Markdown 寫作的各種方案優劣分析



為什麼說是不上不下的選擇呢?因為不會是最好、也不會是最差。他有兩種途徑產生 HTML 碼:

  • 因為無法即時產生 HTML 碼,需要從選單中選擇輸出成 HTML 檔,然後開啟檔案、選擇要複製的內容,十分麻煩:
    • 至少這部分產生的 HTML 碼乾淨,那麼優缺點就跟「四、用網頁服務寫 Markdown」一模一樣了
    • 但是操作步驟較不方便,所以不會是最佳選擇
  • 根據教學文章,選單中有個選項,可以直接「複製即時預覽內容」到 Blogger 編輯器,很方便:
    • 但這部分產生的 HTML 碼非常可怕,跟「三、用瀏覽器外掛寫 Markdown」一模一樣,所以優缺點也一模一樣
    • 那麼這個途徑的作法,算是糟糕的選擇,但也許對不懂 HTML / CSS 的人而言是方便的。



六、總結


整理完所有方案後,發現不存在最佳解,只有最適解。也許站長們需要根據自己熟悉 HTML / CSS 的程度,來選擇最適合自己的作法

或許也可以這麼說,熟悉 HTML / CSS 的站長才適合使用 Markdown。

因為我沒有使用 Markdown 編輯文章的習慣,順便分享自己比較順手的編輯文章技巧,如果你不想花時間研究 CSS 的話,那麼 Markdown 也不算寫文章加速的唯一管道:


如果一時沒有找到 Markdown 最順手的處理方式,那麼也可參考這些不一樣的作法,說不定效率比 Markdown 更好喔。


更多網頁開發工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

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

TOP