[Notion 教學] – 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/

WordPress 備份插件 – 使用 duplicator 備份網站

網站的備份是每個網站管理者必備的技能之一,今天我們要介紹一個簡單易用的備份插件:duplicator。duplicator 目前已經有超過100萬個網站安裝

duplicator 並不只是一個備份的插件,她還可以協助你搬移網站。安裝並啟用插件後,進入後台->Duplicator->Packages,Package 清單會列出你過去的備份記錄,點擊 Create New 來新增備份。

新增備份的過程會透過1、2、3步驟來引導你,相當的清楚。第一個階段是 setup,在這個階段你可以設定你的備份的名稱,可以設定一個方便辨識的名稱,通常是日期為開頭,讓你知道這是哪一天的備份。

Storage 可以設定備份好的檔案要儲存在哪裡,預設是網站下的 wp-snapshots 資料夾。進階版可以將備份檔上傳到第三方儲存服務,例如 Dropbox、Google Drive、AWS S3 等服務。

Storage

Archive 可以設定什麼資料要打包進你的備份檔,包括檔案和資料庫。在 Files 分頁你可以設定要排除的資料夾或檔案,如果要排除請先將 Enable File Filters 啟用。你可以排除資料夾(Directories),或是使用檔案副檔名(File extensions)以及特定檔案(Files)來過濾不要的資料

常見的一個資料夾是快取外掛的資料夾 cache,這個資料夾存放著快取的檔案,這類檔案都可以透過快取外掛重新產生,所以沒有必要打包進備份檔,避免增加檔案的大小。

資料庫(Database)的分頁可以設定你要打包的資料表(Table),一般不會特別去設定,畢竟我們希望的是完整的備份資料庫。如果你真的清楚你在做什麼,再進行這邊的設定。

若你的備份檔是希望安裝在另一台主機的話,Installer 這個設定可以幫你產生一個安裝檔,方便你安裝,這個設定不是必要的。即使不填的話,你在安裝的時候也可以手動輸入。

確定都設定好後,按下 Next 進入下一步。第二階段會根據你的設定掃描的的網站,掃描完成後會顯示掃描的結果。若是正常的會顯示 Good,代表你可以繼續完成打包的工作。若不正常會顯示紅色的 Fail。點開每個設定會顯示詳細的資訊或是錯誤訊息。

若掃描的結果都正常,請按下 Build 來進行打包。打包的時間會決定於網站的檔案和資料庫大小,若你使用虛擬主機,很有可能在這一個階段timeout,導致打包失敗,若失敗建議回到第一步驟,將不必要的檔案排除掉,再重新進行打包。

打包完成!你可以下載打包好的檔案(Archive),若你要將此備份檔安裝在其他主機,請一併下載 Installer 安裝檔。

下載下來備份檔,解壓縮後可以看到網站的整個目錄和檔案,其中還包含了備份的資料庫檔案 database.sql

以上,就完成了基本的備份。下一篇文章會跟大家說明,如何將此備份檔安裝的其他主機上。

參考資料:

How To Move Or Backup Your Website With The WordPress Duplicator Plugin

How To Use Duplicator WordPress Plugin to Migrate WordPress Hosting: DIY Guide

Duplicator: An Easy Way to Back Up, Copy, or Clone Your WordPress Content

WooCommerce 商品搜尋 – 以貨號(sku)搜尋簡單商品

目前 WooCommerce 只支援在後台商品清單以貨號(sku)來搜尋商品, WooCommerce 2.5 以後的版本,可以在後台同時搜尋父商品和可變商品的貨號。但是如果顧客希望在前台以貨號來搜尋商品,目前是不支援的。如果你希望讓顧客或是商店管理人員可以在前台用貨號來搜尋,那就必須要做一些修改。


如果你的商品是簡單商品 (simple product),最容易的方式就是安裝 Relevanssi 搜尋外掛。使用  Relevanssi 會將 WordPress 和 WooCommerce 本身的搜尋,取代為  Relevanssi 的搜尋。

安裝啟用後,請進入 Settings-> Relevanssi 來進行設定,將商品(Product) 加入 索引(index)。

將商品加入索引

如果只是將商品加入索引,是無法搜尋貨號的。Relevanssi 讓你可以將一些商品的 metadata 加入索引,貨號(sku)在資料庫中本身是以 metadata 的方式來儲存,貨號在資料庫中儲存的 meta_name 是 _sku,所以這邊我們可以將 _sku 加入 custom field  中。

將貨號加入索引

完成後儲存設定,回到設定頁上方,按下 build the index,來將資料加入資料庫的索引中。

建立索引

此時回到前台搜尋,就可以用關鍵字來搜尋貨號了。

如果你的商品是可變商品,而每個可變商品的貨號都不一樣的話,這一個方式就不適用了。