製作佈景主題套件

佈景主題套件是 Zittme 將版面與多個模組面板打包成一套來發佈與套用的方式。使用者只要安裝並套用一個佈景主題，版面以及討論區、會員等各模組的面板就會換成彼此搭配的一整套。

佈景主題並不是新種類的資源，而是打包既有版面與面板的包裝。每個組成元件都照平常的方式製作即可。

1. 資料夾結構：全部放在自己的資料夾內

佈景主題將所有組成元件放在 themes/{theme-name}/ 內。內部結構原樣模仿原本的路徑。

themes/heritage/
├── theme.xml                              ← 테마 정보와 구성 목록
├── assets/                                ← (선택) 구성요소가 공유하는 CSS 등
├── layouts/
│   └── heritage_default/                  ← 일반 레이아웃과 완전히 같은 구조
│       ├── layout.html
│       ├── conf/info.xml
│       ├── css/  js/
└── modules/
    ├── board/skins/heritage_default/      ← 일반 게시판 스킨과 같은 구조
    └── member/skins/heritage_default/

這樣做的原因是不會發生衝突。即使佈景主題的討論區面板與其他資源的討論區面板名稱相同，因為位於不同資料夾，也不會互相覆蓋。刪除佈景主題時只會刪除一個資料夾。

2. theme.xml

<?xml version="1.0" encoding="UTF-8"?>
<theme schema="1.0">
	<title xml:lang="ko">헤리티지</title>
	<description xml:lang="ko">레이아웃·게시판·회원 스킨이 한 벌로 맞춰진 테마입니다.</description>
	<version>1.0.0</version>
	<date>2026-08-04</date>
	<author email_address="you@example.com" link="https://example.com">제작자</author>
	<license>GPLv2</license>

	<components>
		<component type="layout" name="heritage_default" />
		<component type="module-skin" target="board" name="heritage_default" />
		<component type="module-skin" target="member" name="heritage_default" />
	</components>

	<apply>
		<layout name="heritage_default" />
		<skin module="board" name="heritage_default" />
		<skin module="member" name="heritage_default" />
	</apply>
</theme>

components：宣告此佈景主題資料夾內包含哪些內容。type 為 layout 或 module-skin（此時以 target 指定模組）。
apply：決定按下「套用佈景主題」時要把什麼套用到哪裡。套用前會先向使用者顯示將變更的清單並取得確認。

不存在的模組會略過

即使佈景主題包含電商面板，在未安裝電商模組的網站上，也只會安靜地略過該項目。將附加模組用的面板放進套組中也很安全。

響應式佈景主題

若要將佈景主題宣告為響應式，組成的面板與版面全部都必須帶有 <responsive>true</responsive> 標記。只要缺少一個，驗證時就會被拒絕。（請參考響應式檢視與響應式顯示）

3. 組成元件照平常的方式製作

佈景主題內的版面與面板，語法與規範都和一般資源完全相同，只是位置在佈景主題資料夾內而已。

版面：layout.html + conf/info.xml（包含 extra_vars、選單宣告、重複欄位）
面板：與該模組預設面板相同的範本檔案組成

共用資源：若要讓整個佈景主題使用相同的色彩與字型體系，請將共用 CSS 放在 themes/{name}/assets/，再由各組成元件以相對路徑載入。將色彩集中為 CSS 變數，就能在一個地方變更整個佈景主題的色彩。

/* themes/heritage/assets/heritage.css */
:root {
	--hr-brand: #6c5ce0;
	--hr-ink: #10151f;
	...
}

/* 게시판 스킨 css 에서 */
@import url("../../../../../assets/heritage.css");

4. 安裝與套用的運作方式

安裝採用全部驗證後才全部解開的方式。只要有任何一個組成元件有問題，就什麼都不會安裝。
套用範圍僅限於所選的網站內。
套用前會顯示將變更的項目清單並取得確認。

5. 製作檢查清單

theme.xml 的 components 與實際資料夾內容是否一致
各組成元件單獨使用時是否也能正常運作（因為佈景主題只是包裝）
宣告為響應式時，所有組成元件是否都有 <responsive>true</responsive>
若使用範本 v2，是否沒有使用多行 {{-- --}} 註解：只有單行註解會被移除，多行註解會造成伺服器錯誤。多行說明請改用 HTML 註解。
版面 CSS 是否宣告了 html, body 背景：若只在最上層 div 塗上背景，深色模式下畫面邊緣會留下白色條紋。