[Notion 教學] – 如何在 Notion 中插入表情符號 emoji

在 Notion 中你可以在幾個地方插入表情符號 emoji 來提升文字或頁面內容的辨識度。

  • 文章標題
  • 文章內容

如果要在文章標題或是文章內容插入 emoji ，你可以使用快捷鍵 Ctrl + Command + Space (MAC) 或是 Windows Key + . 或 ; (Windows) 來叫出 emoji 選擇器。這個 emoji 選擇器是作業系統內建的，你可以把常用的 emoji 加入喜好項目，方便日後使用。

另外在一些地方你也可以加入選擇器，例如當你在頁面編輯時，要連結到某個頁面時，這個頁面連結前面會帶有一個 icon。

另外在 sidebar 側欄中的頁面，也可以修改 icon。

點擊這個 icon 會跳出一個選擇器，這個選擇器裡面的 emoji 內容看起來好像也是去抓系統的，但是選擇器的外觀不太一樣。你除了可以選擇 emoji 以外，還可以上傳自己的圖片或是插入外部連結來當作 icon。

不過實際使用上還是有點差異，例如如果要快速找到你要的 emoji，可以透過輸入關鍵字來找到相關的 emoji，但使用系統內建的選擇器跟 Notion 的選擇器所呈現的結果會有點不太一樣。在系統內建的 emoji 選擇器有時候可能需要用中文的關鍵字才能找到相關的圖示。

在系統內建的 emoji 選擇器中用關鍵字搜尋

使用 Notion 的 emoji 選擇器搜尋

實際在 Notion 中插入 emoji 還是有點不是很方便，比較理想的方式應該是可以類似 Slack 那樣輸入冒號(:) 加入關鍵字就可以插入 emoji，這個需求在 Notion 官方的 twitter 有使用者提到，也許未來就會加入這個功能。

將 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 語法，所以必須靠第三方外掛來支援。這邊使用的是之前提到的 EditorsKit，EditorsKit 支援 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 之後，能夠讓整個書寫和發佈文章的流程更加順暢。

安裝 WordPress 本機端環境

如果你想要貢獻 WordPress，例如修正一個 bug，或是針對其他開發者所提交的 patch 進行測試，那麼首先你必須要有一個本機端的開發環境，這個開發環境跟我們之前介紹的架設網站的開發環境不太一樣。因為在修正bug或是測試時，所針對的版本一定是目前開發中最新的程式(尚未發佈)，所以透過建置這個環境，你可以確認每個開發者的開發環境都是一致的，也比較不會產生其他問題。

如果你要建置 WordPress 本機端環境 (WordPress Local Environment)，首先你必須要確認你的電腦中有安裝 Docker 以及 node.js。

1.下載最新開發中版本 WordPress

WordPress 目前開發中的版本可以在 Github 上找到，請透過 git 指令將程式碼下載到你電腦中的資料夾。

下載完成後，切換到安裝的目錄中，可以看到整個檔案目錄結構，可以看到這跟我們一般架設網站時所安裝的 WordPress 資料夾並不一樣，這個資料夾包除了包含了 WordPress 本身的核心檔案外(src資料夾中)，還包含了一些讓本機環境執行起來的設定檔，以及開發和測試的相關工具。

2.執行 npm install

在你剛剛下載核心程式的資料夾中，執行 npm install。這個指令會根據 package.json 中的定義安裝相關的套件到 node_modules 資料夾中。

3.執行 npm run build:dev

這個指令會執行一些工作，例如確認程式碼的格式是否符合標準，同時根據設定將程式準備適合開發者使用。

4.執行 npm run env:start

這個指令會啟動 docker。

啟動之後，在瀏覽器輸入 http://localhost:8889，即可連線到剛啟動的 WordPress 網站。

5.執行 npm run env:install

6.執行 npm run env:stop

如果你要停止開發環境，請執行 npm run env:stop

結論

以上就是使用官方的工具來架設本機的開發環境，如果你要貢獻 WordPress 核心，這絕對是不可忽略的第一步喔！

參考資料

修正 npm 錯誤

最近在嘗試架設 WordPress Local Environment，因為需要 node，所以就試著看看電腦上的 node 能不能跑(因為之前有安裝過了)。結果一跑就出現錯誤，錯誤訊息類似這個。網路上找了一些參考資料，大概的原因可以歸納為 node 沒有安裝乾淨，所以必須重新安裝和進行一些設定。

主要參考的文章如下：

把 node 移除

brew uninstall --ignore-dependencies node 
rm -rf /usr/local/bin/node 
rm -rf /usr/local/bin/npm 
rm -rf /usr/local/bin/node_modules

重新安裝 node

brew install node
npm -v

出現以下錯誤

執行 brew link node

執行 brew link node，會出現無法 symlink 的錯誤，建議使用 brew link --overwrite node。
執行後發現有權限的問題，改執行 sudo chown -R $(whoami) $(brew --prefix)/*

執行 brew doctor

發現有一些 unbrew header files 和 broken symlink，建議使用 brew cleanup 來移除

執行 brew cleanup

執行完後，再次執行 brew link node ，會出現下圖中的錯誤訊息。

執行 brew update-reset

再次執行 brew link node

執行 brew link node ，如果出錯則嘗試執行 brew link --overwrite node
終於可以 link 了！執行 node -v ，顯示安裝的 node 版本。

以上，終於修正 node 的問題啦！可以繼續下一步了！

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 所撰寫的，相信有一定的品質，另外這個外掛也已經由阿力獅提供了繁體中文的翻譯。

Advanced Rich Text Tools for Gutenberg

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

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

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 收購。

Gutenberg Page Building Toolkit – EditorsKit

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

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

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

心得

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