Demo 展示
展示產品、方案或軟體示範。2026-09-24 起不再開放新網站啟用，已經開著的網站照常使用。
共 6 項操作・20 個步驟・最後複驗 2026-10-03
從哪裡進入
網站後台 → Demo 展示（只有已啟用的網站看得到）
照著下方圖文逐步完成
重點摘要（TL;DR）
公開站會產生 Demo 列表、分級與詳情頁，可放功能、截圖與行動按鈕。
什麼時候會用到
- 你的網站原本就開著 Demo 展示，要繼續維護既有的展示項目
- 產品需要用實際畫面解說
- 要比較不同方案層級
開始前先準備
- • 2026-09-24 起，Demo 展示不再開放新網站啟用：已經開著的網站，公開頁、後台入口與關閉開關都照常；從沒開過的網站在「探索更多功能」與「功能開關」裡都看不到它，也無法自行開啟。
- • 做過的案子要展示成果，請用「作品案例」；要介紹價格方案，請用一般頁面。
- • 準備可公開的截圖網址與正確功能資訊
第一次設定，照這個順序做
共 6 站。每一站都連到詳細步驟，做完一站再往下。
- 1先確認網站還開著 Demo 展示這個功能已不開放新網站啟用；側欄看得到「Demo 展示」才往下做，看不到就改用作品案例。本頁第 6 項操作
- 2先排好方案分級每筆 Demo 的「類型」要從這份清單挑，先定好分級，新增時才選得到對的組別。本頁第 3 項操作
- 3建立第一筆 Demo先取好英文網址代稱，網址建立後就固定。本頁第 1 項操作
- 4補功能、截圖與按鈕建立時只有基本資料，訪客點進來要看到的內容都在編輯頁補。本頁第 2 項操作
- 5設定列表頁與預設按鈕預設按鈕連到 /quote；你的網站沒有這一頁就要改。本頁第 5 項操作
- 6發佈並檢查詳情頁只有已發佈的 Demo 會出現在 /demo。本頁第 4 項操作
操作步驟與完成後的結果
每一項操作都列出從哪裡開始、要做什麼，以及完成後應該看到的結果。
新增 Demo
替可展示的成品、系統或方案建立一個公開示範頁。
- 1
這一步要做
到後台「Demo 展示」按「+ 新增 Demo」。
為什麼：一筆 Demo 就是一頁獨立網址的展示頁，先在這裡建立草稿，之後再補完整內容。
完成後會看到
開啟「新增 Demo」表單。
- 2
這一步要做
填「Demo 標題」、「網址代稱」與「一句話描述」。
為什麼：標題與網址是這頁在列表、搜尋結果與分享連結裡的門面。
欄位怎麼填
- Demo 標題
- 例如「咖啡店標準版官網」。必填。
- 網址代稱
- 只能用英文、數字與連字號，例如 cafe-standard。標題是英文時可留空自動產生；標題含中文時必填。
- 一句話描述
- 列表卡片與 Demo 頁標題下方的一句話。
完成後會看到
表單下方即時顯示訪客網址：/demo/<代稱>。
做錯或略過會怎樣
網址代稱建立後，編輯頁沒有地方可以再改；之後想換網址只能重建一筆。
- 3
這一步要做
選「類型」，視需要填「價格標籤」與「品牌 / 樣本名稱」，按「建立草稿」。
為什麼：類型決定這筆 Demo 在 /demo 列表被分到哪一組；價格標籤讓訪客一眼看出這一級的定位。
欄位怎麼填
- 類型
- 選這筆 Demo 屬於哪個方案分級；選項來自「Demo 設定」的「Demo 方案」。
- 價格標籤
- 例如「NT$8,800」或「依需求報價」，會顯示在列表與 Demo 頁。
- 品牌 / 樣本名稱
- 這個示範是做給哪個品牌或樣本，例如「山系民宿」。Demo 頁會顯示成「樣本：…」。
完成後會看到
回到「Demo 列表」，新 Demo 以「草稿」狀態出現。
- 4
這一步要做
在「Demo 列表」點剛建立的 Demo，進入編輯頁。
為什麼：封面、解說、功能、截圖與按鈕都要在編輯頁補。
完成後會看到
看到這筆 Demo 的完整編輯表單，上方有「立即發佈」與「刪除」。
注意事項
- • 展示別人的品牌或畫面前，先取得公開與截圖使用權。
- • 列表還沒有任何 Demo 時，可以按「或一鍵填入 2 筆範例 demo（可直接改成你的）」看寫法；範例要改成你自己的內容或按「清除範例」。
設定功能、截圖與行動按鈕
讓訪客看懂 Demo 有什麼、長什麼樣，以及下一步能做什麼。
- 5
這一步要做
在 Demo 編輯頁填「封面圖 URL」與「Demo 解說」。
為什麼：封面圖會用在列表卡片與社群分享；解說是訪客判斷「這是不是我要的」的主要文字。
欄位怎麼填
- 封面圖 URL
- 貼完整的圖片網址（https:// 開頭）。也會當成分享到社群時的圖片。
- Demo 解說
- 這個示範做出來長什麼樣、適合誰、有哪些細節。工具列可以插入圖片與影片。
完成後會看到
列表卡片有封面圖，Demo 頁有完整說明。
- 6
這一步要做
在「這方案包括的功能」按「+ 新增一個功能」逐項填寫。
為什麼：功能清單讓訪客不用讀完長文，就能比較不同分級多了什麼。
欄位怎麼填
- 功能名稱（必填）
- 例如「客製 Banner 5 張」。
- 細部說明（可留空）
- 一句補充，例如「依季節 / 活動更換」。
- 表情符號圖示（可留空）
- 放一個表情符號當圖示，例如 🎨。
完成後會看到
Demo 頁以格狀列出每一項功能。
- 7
這一步要做
在「畫面截圖」按「+ 新增一張圖片」，貼上截圖網址。
為什麼：截圖是最直接的證據，訪客看得到成品長什麼樣子。
欄位怎麼填
- 圖片 URL
- 一格貼一張圖片的完整網址；這裡不能直接上傳檔案。
完成後會看到
Demo 頁以圖片牆顯示這些截圖。
- 8
這一步要做
填「線上展示網址」、「自訂行動按鈕文字」與「自訂行動按鈕連結」，按「儲存變更」。
為什麼：Demo 頁的最後一步是讓訪客行動：去體驗實際畫面，或直接詢問。
欄位怎麼填
- 線上展示網址
- 可以實際點開體驗的網址，要用 https:// 開頭的完整網址。留空就不顯示「查看 Live Demo →」。
- 自訂行動按鈕文字
- 例如「我要這個方案」。留空會用「Demo 設定」的預設文字。
- 自訂行動按鈕連結
- 可填網站內的頁面（例如 /contact）或完整網址。留空會用「Demo 設定」的預設連結 /quote。
完成後會看到
Demo 頁出現「查看 Live Demo →」與行動按鈕。
做錯或略過會怎樣
已發佈的 Demo 按「儲存變更」後，公開頁會直接換成新內容，沒有另一份草稿。
注意事項
- • 外部連結不可連到未授權或已下線的頁面。
設定方案分級
用分級把 Demo 分組，並用價格標籤與功能清單區分不同等級。
- 9
這一步要做
在「Demo 展示」上方切到「Demo 設定」，找到「Demo 方案」。
為什麼：/demo 列表依這份清單的順序分組，每筆 Demo 的「類型」也只能從這裡選。
完成後會看到
看到目前的分級清單，預設是 STANDARD、REFINED、BESPOKE 三組。
- 10
這一步要做
按「+ 新增方案」加一組，或直接改名稱與副標；用上移、下移調整順序，按「儲存設定」。
為什麼：分級名稱就是訪客在 /demo 看到的分組標題，順序也會照這份清單排。
欄位怎麼填
- Demo 方案
- 每一列填方案名稱（例如「住宅」）與副標（可留空）。名稱空白的那一列儲存時會被拿掉。
完成後會看到
/demo 列表的分組名稱、副標與順序跟著更新。
做錯或略過會怎樣
刪掉一組方案後，原本歸在那組的 Demo 仍會顯示，但分組標題會變成英文代碼。
- 11
這一步要做
打開各筆 Demo，在「類型」選對分級，「價格標籤」與「這方案包括的功能」寫清楚這一級的內容，按「儲存變更」。
完成後會看到
訪客能分辨這一級方案提供什麼，不會只看到價格名稱。
做錯或略過會怎樣
如果這筆 Demo 原本的分級已被刪掉，「類型」會顯示清單的第一項；直接儲存就會把它移到那一組。
注意事項
- • 改方案名稱不會影響已歸在那一組的 Demo。
- • 價格與方案內容要保持同步；若價格未確定，寫「依需求報價」而非捏造數字。
發布並檢查詳情頁
公開 Demo，並驗證列表、詳情與外部展示入口。
- 12
這一步要做
在 Demo 編輯頁按「立即發佈」，確認狀態變成「已發佈」。
為什麼：只有已發佈的 Demo 會被公開列表與首頁的 Demo 區塊讀到。
完成後會看到
Demo 出現在公開 `/demo` 列表。
- 13
這一步要做
不想馬上上線時，展開「排程發佈 —— 指定一個時間自動上線」，選日期與時間後按「排程發佈」。
為什麼：想配合活動或發文時間上線時用排程，不必守在電腦前按發佈。
欄位怎麼填
- 日期（台灣時間）
- 選要上線的日期，也可以按「明天 09:00」這類快速選項。
- 時間
- 只能選整點；時間到之後一小時內自動上線。
完成後會看到
上方顯示預定上線時間，Demo 維持草稿。
- 14
這一步要做
從列表點進 `/demo/<網址代稱>`，測試截圖、功能清單與行動按鈕。
完成後會看到
詳情頁完整顯示，外部連結可開啟正確目的地。
做錯或略過會怎樣
行動按鈕一定會出現；沒有自訂連結時它連到 /quote，網站沒有這一頁就會是死連結。
注意事項
- • 儲存只更新內容；草稿未按「立即發佈」不會出現在公開列表。
- • 「刪除」按下去會立刻刪掉這筆 Demo，沒有確認視窗，原本的網址也會失效。
設定列表頁與預設行動按鈕
調整 /demo 列表頁的標題說明，以及所有 Demo 頁共用的預設按鈕。
- 15
這一步要做
在「Demo 展示」上方切到「Demo 設定」。
完成後會看到
看到列表頁、方案分級與內頁按鈕的設定欄位。
- 16
這一步要做
填「列表頁標題」與「列表頁副標」。
為什麼：這是訪客進 /demo 第一眼看到的字，預設文字是「三方案 Live Demo」，不一定適合你。
欄位怎麼填
- 列表頁標題
- 例如「方案實例」。留空儲存會變成「三方案 Live Demo」。
- 列表頁副標
- 主標題下方的一段說明。
完成後會看到
/demo 最上方顯示你填的標題與說明。
- 17
這一步要做
填「內頁行動按鈕文字」與「內頁行動按鈕連結」，按「儲存設定」。
為什麼：每個 Demo 頁都會出現行動按鈕；單筆 Demo 沒填自訂按鈕時就用這裡的設定。
欄位怎麼填
- 內頁行動按鈕文字
- 例如「我想做這樣的網站」。留空會用「選這個方案」。
- 內頁行動按鈕連結
- 填網站內存在的頁面（例如 /contact）。留空會用 /quote。
完成後會看到
沒有自訂按鈕的 Demo 頁，按鈕都換成新的文字與連結。
做錯或略過會怎樣
預設連結是 /quote；你的網站沒有這一頁時，訪客按了會看到找不到頁面。
注意事項
- • 這裡的設定會套用到所有沒有自訂按鈕的 Demo。
確認功能狀態或關閉 Demo 展示
確認你的網站還能使用 Demo 展示；不再需要時把它關掉。
- 18
這一步要做
看網站後台左側選單「內容管理」底下有沒有「Demo 展示」。
為什麼：2026-09-24 起 Demo 展示不再開放新網站啟用，只有原本就開著的網站保有它。
完成後會看到
有：這個網站已啟用，可以照本頁操作。沒有：這個網站沒有開過，也無法再開啟。
做錯或略過會怎樣
沒開過的網站在「探索更多功能」裡也找不到它；展示做過的案子請改用作品案例。
- 19
這一步要做
要關閉時，到「網站設定」的「功能開關」，取消勾選「Demo 展示」。
完成後會看到
Demo 展示的勾選框變成未勾選。
做錯或略過會怎樣
關閉後 /demo 與每個 Demo 頁都會變成找不到頁面，首頁的 Demo 區塊也會消失。
- 20
這一步要做
按「儲存功能設定」。
完成後會看到
出現「已儲存功能設定」，左側選單不再有「Demo 展示」。
做錯或略過會怎樣
關掉之後，這個網站的功能開關裡不會再列出 Demo 展示，無法自己重新打開；已寫好的 Demo 資料不會被刪除。
注意事項
- • 關閉前，先把導覽列或其他頁面裡指向 /demo 的連結拿掉，避免訪客點到找不到的頁面。
遇到問題先看這裡
- 「探索更多功能」或「功能開關」裡找不到 Demo 展示？
- 這是預期的。Demo 展示自 2026-09-24 起不再開放新網站啟用，只有原本就開著的網站看得到。要展示做過的案子，請改用「作品案例」。
- Demo 列表有項目，但點進去內容不完整？
- 回到 Demo 展示打開那一筆，依序補「Demo 解說」「這方案包括的功能」「畫面截圖」，按「儲存變更」。已發佈的項目存檔後公開頁就會更新，再從 /demo 點進去逐項確認。
- Demo 頁上的按鈕連到找不到的頁面？
- 沒有填「自訂行動按鈕連結」的 Demo，會用「Demo 設定」的「內頁行動按鈕連結」，預設是 /quote。你的網站沒有這一頁時，到「Demo 設定」改成存在的頁面（例如 /contact），或在單筆 Demo 填自己的連結。
- /demo 列表出現一組英文代碼當標題？
- 那一組的 Demo 原本歸在某個方案底下，而那個方案已從「Demo 設定」的「Demo 方案」刪掉。打開那些 Demo，在「類型」重新選一個現有方案並儲存；或在「Demo 設定」把方案加回來。
- 建立時出現「中文標題請另外填一個英文網址代稱。」？
- 標題含中文時，請在「網址代稱」填英文、數字或連字號，例如 cafe-standard。網址建立後就固定，編輯頁沒有地方改，請一次取好。
- 出現「網址代稱「…」已被使用，請換一個。」？
- 同一個網站裡每個 Demo 的網址代稱不能重複，草稿也算。到「Demo 列表」找同名的那一筆，換一個代稱或改編輯既有那一筆。
- 關掉 Demo 展示之後，想再打開？
- 關閉後，這個網站的「功能開關」裡就不會再列出 Demo 展示，無法自行重新開啟；已經寫好的 Demo 資料不會被刪除。關閉前請先確認真的不再需要 /demo 這些頁面。