Notion Website 製作小技巧

為什麼我要單獨做一篇 Notion Site 的分享呢？

如果你已經閱讀了〈Notion 2024新功能 § 我覺得好用的五個功能〉，你會注意到我並沒有將 Notion Site 列入其中。那麼，為什麼要專門寫一篇分享呢？

首先，我認為這個「個人網站」與以往的分享頁面功能差異不大，具體細節後面會說明。

其次，從使用體驗來看，其他更新的功能對我的幫助更大。

最後，我更新了自己的小站頁面😁✨~~~現在只要點擊圖片按鈕，就能輕鬆跳轉到指定頁面啦 ✨~

Notion Site 簡介

Notion 2.42 更新的核心內容之一是網站功能，透過「notion.site」，用戶可以：

• 發布無限數量的網頁頁面。
• 使用「notion.site」作為預設網域（當然也可自定義域名）。
• 開啟「Search engine indexing」的設置，以便在搜尋引擎中被查詢到。
• 若擁有 Plus 或更高級別帳號，還可享受個人化功能，如 GA 數據分析、圖標調整、頁面導航調整等進階選項。

我的觀察與反思

Notion Site 與 Share Page 差異

如前所述，Notion Site 確實新增了一些功能，但如果這些功能對你來說並不必要，那它基本上可以視為「分享頁面」。對於使用免費帳號的體驗來說，兩者並沒有太大的區別。因此，在學習製作個人頁面時，不需要給自己過多壓力。

響應式網頁 Responsive Web Design(RWD)

如果你不熟悉 RWD，可以參考 Google 的詳細教學：Learn Responsive Design。簡單來說，RWD 讓網站在不同設備上都有良好的瀏覽體驗。 那麼，Notion Site 是否具備這樣的設計？我的答案是：「有，而且相比過去已有顯著進步。」 在我們瀏覽他人的小站時，可能會發現有些提供了「電腦版」與「手機版」的模式，甚至會提醒使用者最好用電腦來操作，大螢幕的瀏覽效果通常會優於小螢幕。

許多人在設計模板時容易忽視螢幕尺寸差異的影響。例如，我日常使用 27 吋螢幕，因此設計時會將一個 Block 分成多個欄位，這樣在大螢幕上顯得緊湊且美觀，但在小螢幕上，可能會導致過多行文字或過小的圖片，從而影響體驗。這也是為什麼許多人覺得 Notion 的 RWD 做得不夠完善。特別是在 Column 設置方面，是否會有進一步更新目前尚不確定，但我認為解決這個問題的難度不小 😆。

那有什麼解決方案呢？以下是我個人的建議，如果有其他想法，歡迎與我分享！

1. 雖然 Notion 支持多欄設置，但請謹慎使用，一般狀況建議不要超過三個欄位。
2. 製作網站頁面時，盡量避免使用「Full width」。預設寬度的頁面在大部份的電腦上，通常閱讀體驗效果更好。
3. 若一定要使用 Full width，建議將瀏覽器視窗縮小，這樣可以模擬不同設備閱覽的效果🤣。
4. 如果你希望像 Pinterest 那樣呈現多欄圖牆，建議使用 Database 管理。資料庫會根據設備寬度調整顯示效果，雖然仍可能有些裁切問題，但整體效果會更好🥹。

終究是要研究 SEO

為了讓自己更容易被搜尋引擎找到，設計首頁時要特別注意「標題」。記得剛啟用這功能時，我的小站是能出現在 Google 搜尋結果中，但現在似乎又消失了🥹。這說明 SEO 是個需要持續研究和優化的領域，只有不斷跟進才能獲得良好效果。

如果你打算將 Notion 頁面作為個人網站，建議購買個人網域，這樣在測試更名時，就不會頻繁更改網址。

頁面路徑 Breadcrumbs

不知道大家有沒有注意到，在頁面的左上方會有「頁面路徑」。對於喜歡用資料庫管理的朋友來說，若在每個頁面有不同的權限開放時，記得特別要檢視上層頁面的開放狀態。

但這裡不是特別要講權限，而是想要強調，有些人會透過頁面路徑返回上一頁。因此如果你的資料庫頁面不在個人網頁內（例如個人網頁用的是 View 模式），建議在資料庫頁面的「描述」中添加返回首頁或上層頁面的連結，這會提升使用者體驗❤️~

長期使用心得

很早之前，我就建立了屬於自己的 Notion 小站。那時候我大量練習這個工具，覺得這個工具真的超級棒❤️，也特別想和大家分享我的成果 — 各式各樣的模板✨。既然這些模板都是透過 Notion 製作的，那就架設一個分享頁面來展示吧！

隨著時間推移，許多延伸的建站工具也陸續出現，例如 Super、Potion、Popsy…(其他架站工具請參考Notion 工具與資源)，甚至透過 GitHub 串接 API 來建立部落格。我嘗試過幾個，但只有認真使用一段時間，後來就轉到了方格子，因為我實在懶得研究 SEO 規則……而且不得不承認，想要在各大搜尋引擎中獲得好的曝光度，「鈔能力」確實會有更顯著的效果。

目前，我的小站主要用來與 Notion 社群中的同好互動。如果你對我的小站有任何寶貴建議，歡迎通過各種方式與我聯繫，我看到後會盡快回覆。

個人網站頁面模板資源

說了這麼多，還是要來點乾貨的~如果你想要建立自己的 Notion 小站，但沒有靈感或不知道怎麼建立，該怎麼辦呢？當然是從模仿別人的模板開始呀！這裡提供一些資源的渠道，讓大家品香~當然，如果你想要參考我的小站也可以的😳~

• Notion 的模板庫
• Super templates
• Potion templates
• Popsy templates
• Prototion

參考資料

• https://www.notion.so/releases/2024-06-25
• https://www.notion.so/help/public-pages-and-web-publishing
• https://web.dev/learn/design/