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,因為他比較符合整體編輯的流程,且提供了許多額外的編輯功能,個人覺得也都相當實用。如果你有其他不錯的外掛,也歡迎在留言區留言推薦給大家。

Notion 101 – Block

  • Notion 的收費標準是以 Worksapce 為基準,免費的方案每一個 Workspace 有 1000 個 Block 的限制。所以如果你達到 1000個 Block 的限制,如果不想升級收費方案,除了刪除不必要的 Block 外,另一個選擇就是新開一個 Workspace。
  • 什麼是一個 Block?:在 Notion 中,每一個可編輯的元件都是一個 Block。例如當你新增了一個空白頁面(Page),這個空白頁面就是一個 Block,但頁面的標題不算是一個 Block。同一個段落的文字都算是一個 Block,如果你用 Shift + Enter 換行,還是算同一個段落,所以不會增加 Block 的數量。如果是用 Enter 則會新開一個段落,這時候就會增加一個 Block。
在頁面空白處輸入斜線 /,可以看到可以使用的 Block
  • 善用 Comment:有時候要針對內容新增註解或說明時,可以使用 Comment。Comment 是不計算在 Block 中的。

使用 VS Code 遠端編輯 WordPress 檔案

通常在製作 WordPress 網站時會建議你在本地端製作並編輯好後,再上傳到正式機上。這樣做的原因,除了速度比較快之外,也可以避免因為編輯錯誤而導致網站出錯無法運行。

如果你要在本機端製作網站,首要工作就是在自己的電腦建立網站運行的環境。關於如何在本機建立網站執行環境,可以參考我之前寫的相關文章:

但有時候就是比較懶惰一點,不想要那麼麻煩,或是這個網站還在開發中,就算出錯無法運行也沒關係,那麼直接改主機上的檔案也是一個選擇。通常我們會將檔案透過 FTP 從主機下載下來,修改好後再透過 FTP 上傳到主機,不過這樣子做還是稍嫌麻煩。

如果你平常習慣的編輯器是 VS Code,那麼就可以透過 VS Code 直接連線到遠端的主機來修改檔案(如果你是高手都直接 SSH 到主機用 vi/vim 修改程式就略過此文吧!),你可以維持平常在電腦上使用 VS Code 的編輯體驗,又可以省去 FTP 下載上傳的動作,修改網站的速度瞬間大幅提升!以下就跟大家說明要怎麼使用 VS Code 來直接修改遠端的網站檔案。

前置作業與需求

1.你的電腦必須要有 VS Code (這不是廢話嗎?)
2.遠端的主機必須支援 SSH 連線:這邊以 Cloudways 主機當範例。

安裝 Remote Development 套件包

這個套件包會包含三個套件:

如果你選擇安裝 Remote Development 套件包,上述這三個套件會同時安裝,你也可以選擇單獨安裝某一個套件。安裝的方式很簡單,在 Code 開啟套件視窗,搜尋 remote development,就可以找到此套件。

安裝好後,在你的編輯器左下方,會有一個新的 icon (下圖紅色框框標示),顯示連線狀態(下圖顯示的狀態為本機環境)。

遠端連線狀態會顯示你目前連線的環境是本機還是遠端,點擊會開啟 Remote SSH 命令視窗。你也可以透過 Command Palette (Command+Shift+P 或是 Function+F1 on Mac)來快速開啟 Remote SSH 命令視窗。

選擇 Remote-SSH: Connect to Host 來進行連線,並輸入主機的連線資料,格式為 user@host。這邊以 Clooudways 為例,你可以在你的 Cloudways 找到主機的 Master Credentials,user 就是下圖中的 Username,而 host 則是下圖中的 Public IP。

在連線資訊中輸入主機的連線資料,輸入完畢後按下 Enter,即會嘗試連線到你的遠端主機。

如果你是透過帳號密碼的方式登入,會出現密碼輸入的提示視窗,要求你輸入密碼。輸入密碼後按下 Enter,來完成連線。

當透過 Remote SSH 來連線到遠端主機,VS Code 會開啟一個新的視窗。連線成功後,在左下方的連線狀態,就會顯示你連線的 hostname。

成功連線到主機後,預設是不會開啟任何資料夾的,你可以在 Explorer 視窗來開啟資料夾。

點擊 Open Folder 會開啟資料夾瀏覽視窗,你可以點擊要開啟的資料夾,選擇完成後,按下 OK,即會嘗試開啟遠端的資料夾內容。如果你是透過帳號密碼的方式連線,這邊可能會再次要求你輸入密碼來完成連線。

連線成功後,即會顯示遠端的資料夾和檔案內容了,你就可以開始編輯網站的檔案囉!

在遠端開發的狀態下,你也可以直接在 Terminal 執行一些指令,例如查看主機的資源使用狀況。

在開啟命令列的狀態下輸入 top 來顯示主機資源使用狀況,是不是很方便呢?

以上說明介紹了如何透過 VS Code 來編輯遠端主機檔案。如果你希望省去每次連線都要輸入帳號密碼的麻煩,你也可以透過 SSH Key 的方式來進行連線。

使用 SSH Key 來進行連線

在 Cloudways 的 Master Credentials 中,你可以設定你的 SSH Publick Keys。如果你還沒有SSH Public Key,你可以參考這篇文章

新增一個 SSH Keys。輸入一個方便辨識的標籤,並在 SSH Key 的內容輸入你的 SSH Public Key,並按下 Submit 來儲存內容。之後連線時就不用重複輸入密碼囉!

如果你連線的主機是經常連線的主機,每次要輸入連線資訊也是很麻煩的一件事。這時候你可以考慮將連線資訊儲存起來,這樣就不用每次都要手動輸入了。

儲存 SSH Host 資料

在原本輸入連線資料的視窗,點擊 Add New SSH Host,來輸入連線資訊。

輸入 SSH 連線指令。

選擇你要儲存到哪一個 SSH Config

之後開啟 SSH 連線視窗時,就會出現先前儲存的 hostname,點擊後就可以直接連線了。

使用心得

使用 VS Code Remote Development 讓你可以直接在遠端的機器上開發,省去建置本機端的開發環境,這在開發環境建置不易的狀況下會很有幫助。個人覺得有一些情境還蠻適合使用的:

  1. 自己的網站或部落格:反正掛了也沒關係,再趕快改好就好了。
  2. 公司新同事onboarding,避免因為光建置環境就花去新同事一堆時間,讓他心生挫折。直接做一個現有的開發環境給他,讓他透過 VS Code 連線到遠端的開發環境,快速開始進行開發或是學習的工作。
  3. 實體架站或是程式設計課程:若對象是新手,或是開發環境比較難建置,可以考慮直接將開發環境建置好,然後複製好幾份,學生只要安裝好 VS Code,就可以連線到遠端的環境進行程式的修改或是開發,大大省去前期環境架設的時間。而且通常上課的學生電腦環境不一,有些人是 Mac 或 Linux,有些人用 Windows,有時光要把環境架設起來就花掉一堆時間了。這時候如果有一個統一的遠端環境相信會方便許多。
  4. 程式的執行環境比較特殊一點,例如國外有人透過 VS Code 遠端連線到 Raspberry Pi 來編寫程式。

相關參考資料

初探 Twenty Twenty 主題

WordPress 5.3 即將於 11 月推出,其中將會包含一個新的預設主題 Twenty Twenty,這個主題將會完全地支援古騰堡編輯器。讓使用者在編輯的時候可以確保編輯的結果跟最後呈現的樣式一致。

為了加速主題的開發,Twenty Twenty 將會以 Chapin 這個主題為基礎,這個主題已經發布在 wordpress.org 上。

如果你要看目前 Twenty Twenty 的頁面設計,可以參考以下連結:

發布時程

根據官方的發布時程,WordPress 5.3 將於 11/12 推出,第一個發布版本預計於 10/15 推出。

參與貢獻

如果你有興趣貢獻 Twenty Twenty,你可以追蹤 WordPress core 的部落格文章,在整個設計和開發的流程中,在 Slack 的 #core-themes 頻道,每週都會有線上的會議。

主題的開發將會在 Github 上進行,目前開發中的版本已經上傳到 https://github.com/WordPress/twentytwenty。當主題開發完成,將會被合併到核心中,同時 Github 的 repo 將會被關閉。

相關連結

Shopify Meetup Taipei #2

Shopify 在台灣雖然有人使用,但是能見度一直不如其他平台電商來得高,很大的部分在於金物流的整合不如其他品牌來得在地化,使得店家在評估時就打了退堂鼓。而這一現象似乎在慢慢改善中。

日前 Shopify 在台北舉辦了第一次官方的聚會,由此可見 Shopify 似乎對台灣市場開始投入資源了,不過上次知道這個訊息時,已經錯過了,於是當第二次聚會的消息發佈後,自然馬上手刀報名了。

這次的聚會主題其實跟第一次的聚會差不多主要含跨了金流和物流,從會中發現,這也是大多數店家關心的項目,畢竟金流和物流決定了電商的生死,如果方案選擇不多,多少會大大影響店家使用 Shopify 的意願。

首先開始是 DHL 介紹他們的物流服務,這部分比較針對是對於跨境電商有需求的店家。這部分可以直接到 dhltaiwanconnect 查詢相關的最新資訊。

接下來是 TapPay 介紹他們的金流服務,這部分其實網站上也有相關的資訊,預計年底會上架 Shopify App。

Akohub Ray & UMade Tinki:介紹 Akocommerce 以及 UMade 的相關經驗



Umade Tinki 分享金流的經驗

Bisou Bisou:介紹他們使用 Shopify 以及社群經營的心得,我覺得是整場最有趣的一個分享之一。

Bisou Bisou

最後還有漸強實驗室的分享,不過因為要趕搭高鐵回台中,所以就沒聽到了。

這次除了特地上台北除了來了解 Shopify 目前在台灣的發展外,也趁機跟許久沒見面的 YOSGO 團隊成員見面,他們也是少數進軍 Shopify App 市場的團隊,期待看到他們的發展。另外還遇到了許久不見的大學同學名導演阿得,原來他們已經用 Shopify 蠻久了,真是奇妙的緣分!

會後心得

這次的 Shopify 聚會總體來說體驗還不錯,了解到了 Shopify 目前的生態和台灣的發展現況,也深深體會到 Shopify 的潛力。相信未來在台灣金物流整合更完整的狀況下,絕對會對本地的電商市場有廣大的影響。當然對使用者來說,多一個選擇也絕對不是壞事。

而就開發商而言,Shopify 也絕對是一個可以投入的市場,因為 Shopify 有完善的 API,以及成熟的全球市場,如果你有什麼好的點子或服務,絕對有機會在 Shopify 中佔有一席之地。

由於目前 Shopify 在台灣的能見度還不是很高,也因此還看不到太多開發者或是開發商的投入,因此目前的聚會還是比較偏向使用者的聚會,以及廠商的宣傳,相信在未來會有更多的開發商投入這個市場,屆時相信會有更多開發者和開發商的交流。

相關連結&文章

Shopify Meetup #2 跨境品牌出海!

【成功店家分享】Bisou Bisou Store 的成功出海秘訣

第二場 Shopify Taiwan Meetup | 跨境電商怎麼做?

https://www.shopifytaiwan.com/