這是諾豪資訊製作的網站作品範例,品牌與內容皆為虛構。諾豪資訊的網站作品範例,內容皆為虛構。 看更多作品 →

How the backend works

後台怎麼用?
三個步驟就夠了。

產品、消息、門市資訊,店家自己就能改,不必寫程式。

  • 產品(含照片)
  • 最新消息
  • 門市資訊

首頁與關於頁的文案、版面或新功能,再找諾豪資訊(也可依需求做成後台可編輯)。

下面的示意畫面,欄位可以直接試著輸入(示意中的「+」只是標出位置,不能按)。

1

登入後台

受邀的人用 Google、GitHub 或 Email 登入。

打開專屬的後台網址登入。登入方式可用 Google、GitHub 或 Email;建議用 Google 或 GitHub 帳號登入,並在該帳號開啟兩步驟驗證。只有被邀請的人進得去。

  1. 打開後台網址(上線後由諾豪資訊提供)
  2. 選擇登入方式(受邀的 Email 要用同一種方式登入)
  3. 進入內容管理畫面

2

新增一款豆子

填名稱、產地、價格,選袋子顏色,按發佈。

試試看:改豆名或顏色,再切到「袋子預覽」。

先選品牌系列,再按新增,填入名稱、產地、烘焙度與價格,選一個袋子的顏色,按發佈。

  1. 左側打開「咖啡豆・依系列」,點一個品牌系列(真實後台會一欄一欄往右展開),按右上角的「+」(所屬系列會自動帶入;從「全部豆子」新增的話,要自己選所屬系列)
  2. 填寫名稱、產地、烘焙度、風味與價格;有產品照片的話可以一併上傳(選填,沒有照片時網站會顯示依資料畫出的袋子)。網址代稱會自動產生,不用填
  3. 用色票選袋子顏色,切到上方「袋子預覽」分頁確認袋子
  4. 按「發佈」。按下發佈後,重新整理網站就看得到,這款豆子的專屬頁面也會跟著更新(搜尋引擎收錄的但書見下方)

試試看:改豆名、風味、價格或顏色,再切到「袋子預覽」,袋子會跟著變。你不用按儲存,後台會自動存成草稿;按「發佈」才會上網站。網站上每一個產品袋,就是這樣由資料自動畫出來的。

新增、修改、刪除都會在幾秒內反映在網站上(列表與詳細頁都是;刪除的項目會顯示「已下架」)。搜尋引擎收錄與分享預覽要等下次網站重新建置(可設定為發佈後自動建置)。

關於示意畫面:真實後台是「逐欄展開」,依序是「網站內容」→「咖啡豆・依系列」→「選擇品牌系列」→「這個系列的豆子」→ 編輯畫面。這裡的示意把四個系列直接縮排在側欄,方便一次看完;欄位與順序以真實後台為準。

…/structure/bean;新增咖啡豆

新增咖啡豆

真實後台的新增鈕
會顯示在產品卡片與袋子標籤上。
填好名稱就會自動產生,成為這款豆子的網址,不用自己填。
草稿

3

發一則消息

寫好標題與內文,按發佈,網站就看得到。

新品上架、活動預告、咖啡小知識,寫完按「發佈」。按下發佈後,重新整理網站就看得到。

  1. 左側選「最新消息」,按「+」
  2. 寫標題、選分類、輸入內文
  3. 按「發佈」
  4. 重新整理網站,消息就出現在首頁與消息頁

新增、修改、刪除都會在幾秒內反映在網站上(列表與詳細頁都是;刪除的項目會顯示「已下架」)。搜尋引擎收錄與分享預覽要等下次網站重新建置(可設定為發佈後自動建置)。

想先存起來、之後再發?不用按任何鈕,後台會自動存成草稿;草稿不會出現在網站上,準備好再按「發佈」。

…/structure/news;新增消息

新增消息

真實後台的新增鈕

發佈後,網站的消息列表會這樣顯示(示意)

草稿

+

產品變多也管得動

依系列瀏覽、用名稱搜尋,上百項也找得到。

品牌有十幾個、產品有幾十項也沒問題:依系列瀏覽、依名稱搜尋,每一項都能附上產品照片,後台可管理上百項產品。

  1. 左側點一個品牌系列,只看那個系列的豆子;想看全部就點「全部豆子」
  2. 在搜尋框輸入名稱,清單立刻篩選(清單會顯示豆名、系列與價格)
  3. 點進任何一項,修改文字或更換照片
…/structure/bean

產品清單

LAN’AN ROASTERY COFFEE 耶加雪菲水洗 衣索比亞 耶加雪菲 · 水洗 200G 淺中焙 耶加雪菲 水洗
山嵐單品・NT$ 520
LAN’AN ROASTERY COFFEE 薇拉日曬 哥倫比亞 薇拉省 · 日曬 200G 中焙 薇拉 日曬
山嵐單品・NT$ 480
LAN’AN ROASTERY COFFEE 肯亞AA 水洗 肯亞 涅里 · 水洗 200G 淺中焙 肯亞 AA 水洗
山嵐單品・NT$ 540
LAN’AN ROASTERY COFFEE 安提瓜水洗 瓜地馬拉 安提瓜 · 水洗 200G 中深焙 安提瓜 水洗
山嵐單品・NT$ 460
LAN’AN ROASTERY COFFEE 阿里山蜜處理 台灣 嘉義阿里山 · 蜜處理 100G 中焙 阿里山 蜜處理
山嵐單品・NT$ 680
LAN’AN ROASTERY COFFEE 晨霧配方 衣索比亞、哥倫比亞 水洗、日曬 250G 淺中焙 晨霧 配方
潮汐配方・NT$ 420
LAN’AN ROASTERY COFFEE 岸邊配方 巴西、瓜地馬拉 日曬、水洗 250G 中焙 岸邊 配方
潮汐配方・NT$ 400
LAN’AN ROASTERY COFFEE 夜航義式 巴西、印度 日曬、季風處理 250G 深焙 夜航 義式
潮汐配方・NT$ 380

8 / 共 64 項(示意)。可管理上百項產品,每項都能附照片。

費用與維運

之後要花什麼、找誰?

後台費用

免費方案每月 0 美元;需要進階功能才升級(每位使用者每月 15 美元起)。

後台使用 Sanity。依其官方方案頁(2026 年 10 月 22 日查證),免費方案(Free,每月 0 美元)和本站相關的額度是:

  • 使用者(Seats):Free 20 人、Growth 50 人
  • 權限角色(# roles available):Free 只有「管理員」與「檢視者」2 種,能編輯內容的人都是管理員,權限很大(包含專案設定);若要「只能改內容、不能改設定」的細分權限,需升級 Growth(5 種角色,每位使用者每月 15 美元)
  • 文件數上限:Free 1 萬份、Growth 2.5 萬份
  • 資產(圖片等檔案)空間 100 GB(Free 與 Growth 相同)
  • 每月 API 請求 25 萬次、CDN 請求 100 萬次
  • 每月頻寬 100 GB
  • 草稿的變更紀錄(Review Changes: Drafts)保留 3 天;Growth 方案 90 天。「完整歷史」(Complete history)免費與 Growth 方案都不含

免費方案的資料集是公開的,任何人都能讀取;本站的內容(豆子、消息、門市資訊)本來就公開在網站上,所以沒有影響。需要私有資料集、更多文件或更長的紀錄時,才需要升級付費方案(依官方公告,Growth 方案每位使用者每月 15 美元起,實際以官方方案頁為準)。網域等其他費用,洽談時一併列清楚。

維運與改版

內容自己改;版面與新功能找諾豪資訊。

門市的地址、電話、營業時間在後台改完按發佈,重新整理後,首頁、聯絡頁與頁尾都會更新。

產品、消息、門市資訊(含圖片)自己改;首頁與關於頁的文案、版面或新功能,再找諾豪資訊(也可依需求做成後台可編輯)。

日常維運、網站改版與後台教學,也都可以委託諾豪資訊處理。

放心使用

放心自己管,草稿不會上網站。

  • 只有受邀的人能登入

    登入方式可用 Google、GitHub 或 Email;建議用 Google 或 GitHub 帳號登入,並在該帳號開啟兩步驟驗證。帳號由店家邀請與管理,可以隨時移除離職同仁的存取權。

  • 草稿先存,按發佈才上線

    草稿紀錄在免費方案只保留 3 天(Growth 方案 90 天),已發佈內容的完整修改歷史免費與 Growth 都沒有,所以重要內容仍建議自己留底。後台會自動存草稿,按下「發佈」才會出現在網站上;咖啡豆的編輯頁另有袋子預覽,可以先看豆袋長什麼樣子。

  • 前台只讀取公開內容

    網站本身是靜態頁面;內容存在 Sanity 雲端,前台只讀取公開內容。全站使用 HTTPS。

  • 網站與帳號在店家名下

    本範例放在諾豪資訊的帳號下;正式案件的網域、主機、後台帳號都建在店家名下,不綁在諾豪資訊的帳號裡。