將 Notion 文章內容匯入到 WordPress

Notion 的編輯器對於寫文章來說是一個很好的工具,相對於 WordPress 的古騰堡編輯器順手很多,所以我在思考能不能用 Notion 來寫作,然後同步到 WordPress?

Notion vs. WordPress 古騰堡編輯器 * 小程故事

由於 Notion 目前沒有官方的 API,所以要自動同步文章到 WordPress 目前還無法做到,必須要手動來做。雖然有人透過 reverse-engineering 的方式開發了一套 Go lang API,不過這畢竟不是正規的做法,參考參考就好囉。本篇文章除了介紹如何在 Notion 中寫文章並匯入到 WordPress 網站,你也可以比較一下兩者在內容顯示上的差異。

註:本篇文章由 Notion 攥寫後,匯出為 Markdown 格式再匯入到 WordPress 中。除了設定標題、複製貼上內容圖片以及設定特色圖片、編輯 Loom 影片嵌入方式和本段文字外,沒有做其他的編輯,您可以比較其中的差異。Notion 文章頁面:https://www.notion.so/yuchengblog/Notion-WordPress-1f24f42187d0427a8ddb0a7c59a52748

匯出

Notion 支援 Markdown 語法,且可以匯出 Markdown 格式的內容,所以在匯出的部分算是解決了。匯出文章的 Markdown 檔案後,使用編輯器打開,並全選複製內容。

在 Notion 中匯出 Markdown 格式

匯出的資料夾包含了 markdown 格式的文件內容和圖片

匯入

由於目前內建的 Gutenberg 編輯器不支援 Markdown 語法,所以必須靠第三方外掛來支援。這邊使用的是之前提到的 EditorsKitEditorsKit 支援 Markdown 語法,請先安裝並啟用 EditorsKit。在第一個步驟完成匯出並複製內容後,打開古騰堡編輯器,直接貼上內容即可。

複製 Markdown 內容並貼上到古騰堡編輯器

格式

以下列出一些常用的內容格式,您可以跟 WordPress 的文章內容做比較

一般文字

文字色彩

粗體

斜體

  • 清單

標題1

標題2

標題3

這是一段引言


感想

使用 Notion 當作編輯器在整個書寫的過程真的流暢很多,當然這樣的方式目前還是存在著一些問題。整理如下:

優點

  • 使用 Notion 寫作,提升撰寫體驗。
  • 由於 Notion 本身有頁面的歷史紀錄(Page History),所以可以用來取代 WordPress 的版本紀錄(Revision),節省資料庫空間。
  • 你可以使用 Notion 作為文章的靈感收集、排程規劃和寫作工具,將整個內容發佈流程集中在 Notion 中。參考:How to Use Notion for Blogging

缺點

  • 許多樣式並不支援,例如在 Notion 分兩欄顯示,匯出後 Markdown 並不支援這樣的顯示。如果想要維持同樣的顯示,就必須要再自行編輯。另外文字的顏色也是不支援的。
  • 在 Notion 中如果要插入站內文章,必須切換回 WordPress 來找到該篇文章的連結,相對不方便(或是文章連結留到匯入WP後再處理)。
  • 圖片需要另外上傳。在古騰堡中你可以直接複製下載的圖片並在編輯器中直接貼上。或是你可以在 Notion 寫文章時,插入外部圖床圖片(Flickr等),這樣在匯入 WordPress 時就不用再上傳圖片。若原本 Notion 中的圖片有設定說明文字(Caption),則在匯入 WordPress 後說明文字會變成另一個段落內容。

以上就是我針對 Notion 作為部落格文章編輯器的嘗試,希望日後 Notion 開放 API 之後,能夠讓整個書寫和發佈文章的流程更加順暢。

Notion vs. WordPress 古騰堡編輯器

最近在學習使用 Notion 作為 Evernote 的替代工具 ,突然覺得 Notion 的編輯模式跟 WordPress 的古騰堡 (Gutenberg) 編輯器有幾分類似,雖然這兩者的設計和使用定位不一樣,但就編輯的這個概念應該是可以互相學習的。不相信嗎?來看看吧!


核心概念

  • Notion:將內容分成不同的 Block,Block 是不同的內容元件,例如文字、圖片、To Do List。免費的帳號可以使用 1000 個 Block。
  • 古騰堡: 官方都直接稱呼為區塊編輯器(Block Editor)了,應該就不用多做解釋了吧。

開始編輯&加入區塊

在 Notion 和 古騰堡的編輯器中,都可以直接輸入文字來開始編輯,預設的就是文字段落區塊。如果你要加入不同的區塊,都可以透過輸入斜線(/),來快速選擇要加入的區塊。不同的是,在 Notion 中除了可以選擇區塊外,還可以執行一些命令,例如輸入/delete 可以刪除當前的區塊。輸入/color 可以改變當前區塊文字的顏色。

Notion:輸入斜線來選擇要加入的 Block。
Gutenberg:輸入斜線來選擇要加入的區塊

移動區塊

在 Notion 和古騰堡中,都可以透過拖曳的方式來改變區塊順序。

Notion:滑鼠按住區塊左邊的六個灰點,透過拖曳的方式來改變順序。若是點擊的話可以叫出 Action 選單。

Gutenberg:一樣是透過滑鼠按著區塊左側的六個灰點來拖曳改變順序,另外也可以透過上下的箭頭來改變順序。


變更和轉換區塊

在 Notion 和古騰堡中,都可以將目前的區塊轉換成不同的區塊,但 Notion 可以選擇的操作方式相對多了一點也比較彈性。

Notion:點擊區塊左側的六個灰點來開啟選單,點擊 Turn Into 選單來選擇要轉換的區塊

Notion:在區塊內容在區塊內容的任何一個地方輸入 /turn 來開啟快速選單,選擇要轉換的區塊

Notion:可以一次選擇多個區塊,透過滑鼠右鍵來開啟選單,點擊 Turn Into 來批次轉換成其他區塊

Notion:雙擊文字內容或選擇文字可以叫出工具列,在工具列上的最左側會顯示目前的區塊類型,也可以選擇轉換成其他區塊

Gutenberg:在區塊的工具列上可以改變區塊的類型


工具列

Notion 和古騰堡編輯器針對行內文字都提供了工具列,讓你可以快速編輯文字的樣字、加入連結或是進行其他動作。

Notion:如果要針對行內文字進行樣式設定,需要雙擊文字,或用滑鼠選擇文字,來叫出工具列,在工具列中你可以變更文字樣式,例如常見的粗體、斜體或是加入連結等動作。

Gutenberg:當你滑鼠點擊了某個區塊,就會直接開啟工具列,個人覺得會有點干擾,因為我可能只是要輸入文字,不一定是要改變文字樣式或是做其他動作。在只是要單純輸入文字的狀況下,這個工具列因為會遮住上方的內容反而造成視覺上的干擾,折衷的方式是在設定的地方,將工具列置於編輯器的頂部,但相對的又會影響編輯的順暢度,變成要修改文字樣式滑鼠就必須再移到畫面的上方。


心得

Notion 和 古騰堡編輯器在編輯上同樣都是以區塊 (Block) 為核心概念,但在操作的一些小細節上仍有些微的不一樣。

Notion 作為筆記和協作軟體在一些編輯的體驗上還是做得比較好一點,古騰堡則還有一些進步的空間,例如要修改行內文字 (inline text),古騰堡就必須另外安裝外掛來達到。另外古騰堡的工具列在單純編輯內容的時候,多少會有點干擾,希望能有改善的方式。但總體而言,兩者都是很好的工具,古騰堡編輯器作為開放原始碼的工具,相信會有更大的改善和擴充空間。

延伸閱讀:

[Gutenberg] – 如何替行內文字加上顏色和背景色

最近在使用 Notion,覺得 Notion 在編輯上真的蠻順手的,在整個撰寫文章的過程中,動作不太會被打斷。回到 WordPress 的古騰堡編輯器中就會發現有一些小地方還是做得不是那麼理想。

不過既然 WordPress 是開放原始碼的軟體,自然有辦法改善。這次我們要改善的就是幫文字區塊中的行內文字(inline text)加上顏色和背景顏色。

在預設的古騰堡編輯器中,段落區塊的內容是可以改變文字或背景顏色的,但是顏色的調整會套用在整個區塊內容中。調整的地方是在右側區塊資訊欄中的 [色彩設定],可以調整整個段落區塊的背景顏色和文字顏色。

段落區塊色彩設定

但有時候在寫文章時,會希望透過修改文字顏色或是背景顏色來強調部分行內文字內容,使用預設的古騰堡段落區塊就無法做到了,這時候就要安裝第三方的外掛來達到這樣的目的。

如果要修改部分行內文字顏色和背景色,有幾個外掛可以做到。

Advanced Rich Text Tools for Gutenberg

第一個外掛是 Advanced Rich Text Tools for Gutenberg,這個外掛是由 Automattic 的員工 Ella Van Durpe 所撰寫的,相信有一定的品質,另外這個外掛也已經由阿力獅提供了繁體中文的翻譯。

這個外掛除了可以針對行內文字設定顏色和背景顏色外,還提供了其他的功能,例如標示為程式碼片段、標示為上標和標示為下標等功能。不過標示行內文字顏色的功能跟預設的文字區塊顏色設定都是在右側的區塊資訊欄中進行設定,就撰寫來說感覺比較不是那麼直覺,而且因為這個功能是針對行內文字,放在整個區塊資訊欄中似乎比較不是那麼合理,但這個外掛的其他功能,像是上標和下標卻又是放在工具列中,這就有點摸不著開發者當初的設計邏輯了。

修改行內文字顏色和背景顏色

Gutenberg Page Building Toolkit – EditorsKit

另外一個外掛是 Gutenberg Page Building Toolkit – EditorsKit,或簡稱 EditorsKit。EditorsKit 是由 Jeffrey Carandang 所撰寫,Jeffrey 本身是 Phpbits Creative Studio 的創辦人,開發多個 WordPress 外掛,包含知名的 Widget Options 。另外他也是 CoBlocks 的共同創辦人,CoBlocks 已經於 2019年4月被 GoDaddy 收購

EditorsKit 在功能的設定設計上我覺得就比較符合我對文字編輯工具的想像,針對行內文字的相關設定都是在 Toolbar 中來進行設定,在編輯的過程中可以專注在整個編輯區域,不用再跳到右側的區塊資訊欄。

EditorsKit 除了文字格式外還提供了一些額外的功能:

  • 可修改標題的文字顏色和背景色
  • 針對桌機、平板、手機來顯示或隱藏區塊
  • 針對使用者登入或登出的狀態來顯示或隱藏區塊
  • 針對 Advanced Custom Fields(ACF) 欄位的值來顯示或隱藏區塊
  • 顯示區塊的導引線(Guide Line)
  • Markdown 語法支援

心得

以上,就是我針對行內文字顏色的外掛介紹,你可以選擇一個符合自己使用習慣的外掛,我個人的話會選擇 EditorsKit,因為他比較符合整體編輯的流程,且提供了許多額外的編輯功能,個人覺得也都相當實用。如果你有其他不錯的外掛,也歡迎在留言區留言推薦給大家。