這是專為住宿預訂平台打造的 Zittme 官方佈景主題 Jamgyeol（jamgyeol） 的詳細手冊。它與住宿（lodging）模組搭配設計，以地區 · 日期 · 人數搜尋住宿為首頁的核心。從房價 · 空房月曆、住宿 · 休息切換、優惠券、評價，到訪客預約查詢，將完整的預約流程做得像 App 一樣；若搭配電商模組，販售住宿券 · 周邊商品的商店也會以相同設計開啟。預設支援深色模式與響應式設計，預設字型為 Pretendard。

本文件中的畫面皆直接擷取自實際的示範網站。您可以在 jamgyeol-demo.zitt.me 親自瀏覽示範。

組成

所有組成元件共用相同的設計 Token（紫色重點色 · 字型 · 圓角 · 間距）。只要在版面設定一處變更重點色，就會一併套用到所有畫面；在深色模式下，會自動計算專用 Token 以維持文字對比。

安裝與套用

1. 將佈景主題檔案放在 themes/jamgyeol。（從商店安裝或解壓縮）
2. 在管理員 > 設計設定中選擇 Jamgyeol 佈景主題並套用。版面與模組面板會一次套用。
3. 以住宿模組建立住宿 mid（例：stay）並指定為網站首頁後，首頁會在同一畫面顯示搜尋 · 熱門住宿 · 地區 · 最低價 · 休息 · 活動 · 公告。
4. 建立活動討論區（event）與公告（notice）後，會自動連結到首頁下方。
5. 若已安裝電商模組，商店選單與購物車按鈕會一起出現在頁首。

建議環境：Zittme 1.0.2 以上、住宿 1.0.0 以上、電商 1.1.1 以上。若要使用預先付款需要 zittme Pay；沒有 zittme Pay 時只會顯示現場付款。

建議一併調整的網站設定

• 切換為響應式：本佈景主題為響應式，建議關閉行動裝置專用檢視。若保持開啟，行動裝置上會改為顯示另外的行動版面。
• 關閉 XE 相容按鈕樣式：核心共用 CSS 中 XE 時期的 .btn 樣式可能覆蓋面板按鈕。在 config/config.user.inc.php 加入下面一行，並清空 files/cache/assets 內的檔案即可移除。

define('DISABLE_XE_BTN_STYLES', true);

頁首

頁首由上而下分為 工具列（登入 · 註冊 · 語言 · 深色模式）→ 標誌 · 整合搜尋 · 訪客預約查詢 · 收藏 · 最近瀏覽的住宿 → 選單列 三層。

• 整合搜尋：以地區或住宿名稱直接開啟住宿列表。
• 收藏 · 最近瀏覽的住宿：儲存在訪客的瀏覽器中，不需登入也能運作，並以數字徽章顯示數量。
• 選單列：顯示網站地圖的上方選單，右側附上活動 · 公告等輔助選單。

搜尋住宿



• 在搜尋框中切換 住宿 / 休息，並選擇地區 · 入住 · 退房 · 人數。休息只需選擇使用當天一天。
• 以類型標籤（飯店 · 汽車旅館 · 民宿 · 青年旅館 · 度假村）與熱門地區標籤縮小範圍，並依推薦 · 價格由低到高 · 價格由高到低 · 評分 · 評價數排序。
• 選擇日期後，只會以每晚最低價為準，顯示該日期仍有空房的住宿。

住宿詳情



• 照片會依張數改變排列方式（1 張 · 2～3 張 · 4 張以上）。點擊即可放大翻閱。
• 每個房型會顯示標準 · 最多人數、剩餘房數、每晚價格，並可透過立即預約直接進入預約。
• 在右側月曆選擇房型後，會顯示各日期的價格與空房 · 額滿。點一次設定入住，再點一次設定退房。月曆的月份標示與星期會依網站語言顯示。
• 接著會顯示此住宿可使用的優惠券代碼、取消規定、評價與業者回覆、位置。



預約與結果



預約畫面依序為預約人資料 → 優惠券 · 積分 → 付款方式 → 同意取消規定，右側摘要會即時重新計算付款金額。訪客若先設定查詢用密碼，之後即可在 訪客預約查詢 中搭配預約編號再次找到預約。



結果畫面會依預約狀態改變樣式。

狀態	顯示
預約確認	打勾標示、出示給櫃檯的預約編號、取消按鈕與現在取消時的退款金額
等待付款	時鐘標示、付款期限說明，若 zittme Pay 訂單仍有效則顯示繼續付款按鈕
付款期限已過 · 取消 · 未到	X 標示與說明文字
已使用完畢	撰寫評價表單

優惠券 · 積分 · 我的預約

• 優惠券 · 優惠：以票券樣式顯示進行中的優惠券，會員可領取並放入我的優惠券匣。
• 我的預約：會員可分開查看即將到來的預約與過去的預約，訪客則以預約編號 + 查詢用密碼查詢。
• 我的頁面：會員面板的我的頁面會一併顯示三筆即將到來的預約與優惠券 · 積分摘要。

討論區面板

在討論區面板設定的列表形式中，為每個討論區選擇樣式。

形式	用途
列表型	公告等一般討論區
雜誌型	附縮圖 + 摘要的社群
卡片型	以縮圖為主的圖庫
FAQ 型	點擊問題即展開答案的手風琴
活動型	附有期間 · 進行中 · 即將開始 · 已結束徽章與 D-day 的活動卡片



活動型會以討論區擴充變數中輸入名稱為 event_start · event_end 的日期欄位（開始日 · 結束日）計算狀態。雜誌型 · 卡片型 · FAQ 型需要討論區列表設定中有摘要欄位，才會顯示摘要與答案。

行動裝置



• 下方固定顯示 首頁 · 搜尋 · 我的預約 · 我的頁面 分頁列。
• 頁首縮減為標誌 · 訪客預約查詢 · 收藏 · 最近瀏覽的住宿 · 選單按鈕一行與搜尋框。
• 選單抽屜中包含帳號按鈕 · 選單列表 · 深色模式 · 語言工具。

多語系

• 佈景主題文字擁有包含韓文 · 英文 · 日文在內的 12 種語言檔。
• 住宿名稱 · 房型名稱 · 選單名稱 · 版面設定的標誌文字 · 頁尾文字中，可以填入在管理員 > 多語系中建立的 $user_lang->code，會依訪客語言切換顯示。
• 日期 · 金額標示依住宿模組的語言檔（lodging_date_fmt、lodging_money）。

頁尾

在版面設定 > 頁尾 分頁中設定。項目留空時，該區塊不會顯示。

項目	說明
網站介紹文字	標誌下方的簡短介紹
客服中心電話 / 服務時間	客服中心區塊。服務時間每行顯示為一行
洽詢電子郵件	電子郵件洽詢連結
營業 · 聯絡資訊	每一行換行內容顯示為一個項目
Instagram · Facebook · YouTube · 部落格網址	僅將已填寫的項目顯示為圖示
底部說明文字	如通訊交易仲介者告知等免責 · 說明文字
著作權標示	最下方的標示

版面設定全部項目

基本

項目	預設值	說明
標誌圖片 / 深色模式標誌	無	留空則使用標誌文字
標誌文字	無	留空則使用網站標題
重點色	紫色	同時決定按鈕 · 連結 · 啟用標示 · 面板強調色
內文最大寬度	1180px	1060 / 1180 / 1320
選單列寬度 · 顏色	內文寬度 · 深色	可選擇填滿全寬、重點色 · 淺色
行動版深色模式 · 語言按鈕位置	選單抽屜內	可移至頁首 · 頁尾
色彩模式	依裝置設定	自動 / 永遠淺色 / 永遠深色

首屏

視覺輪播顯示條件 · 自動切換間隔 · 輪播列表（重複欄位）。當住宿模組為首頁時，由住宿面板以住宿照片直接繪製首屏。

主頁構成

商店模組位址（mid）· 分類圖示 · 主頁面區塊（重複欄位）。在首頁使用商店而非住宿時使用。

內文 · 側欄

是否使用整合搜尋 ·（舊版相容）側欄登入框。

頁尾

請參考上方「頁尾」表格。