[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 有使用者提到,也許未來就會加入這個功能。

安裝 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 核心,這絕對是不可忽略的第一步喔!

參考資料

[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 中的。

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 可變商品庫存管理

WooCommerce 的可變商品 (variable product) 可以針對不同的變化類型進行庫存管理。如果你希望變化類型的庫存能夠獨自管理,在設定的時候記得不要啟用父商品的管理庫存。若啟用父商品的庫存管理,而變化類型沒有啟用庫存管理時,該變化類型就會以父商品的庫存量為庫存量。

父商品的管理庫存不要啟用
啟用變化類型的管理庫存並設定存貨數量

獨立管理變化類型的庫存量

如何調整 Jetpack Photon 圖片品質

Jetpack Photon 是很多使用 WordPress 架站的朋友會使用的功能, 使用 Photon 可以大幅降低網站的流量, 但其實 Photon 會壓縮圖片的品質, 如果你是對圖片品質比較要求的話, 可以試著調整 Jetpack 的壓縮比率。
Jetpack 提供了 quality 這個參數來讓你調整圖片品質, 要注意的是這邊的 quality是代表著壓縮的品質, 所以如果設為 100, 不代表他不會壓縮, 只是代表著失真的程度會比較小。

JPG 預設的 quality 為 89%, PNG 為 80%, 而 WebP 則為 80%. 要注意的是,如果瀏覽器支援 WebP, 則 JPG 和 PNG 會被自動轉為 WebP。而當 quality 設為100時, 將會進行無失真壓縮, 在某些情況下可能會產生比原本圖片還要大的圖。

Photon API

Photon

Mastering Image Optimization in WordPress