Tạo gói giao diện

Gói giao diện là cách Zittme gom layout và nhiều skin mô-đun thành một bộ để phân phối và áp dụng. Chỉ cần cài và áp dụng một giao diện, layout cùng skin của từng mô-đun như bảng tin, thành viên sẽ đổi thành một bộ hài hòa với nhau.

Giao diện không phải là một loại tài nguyên mới. Nó chỉ là lớp đóng gói gom các layout và skin đã có. Bạn cứ tạo từng thành phần như bình thường.

1. Cấu trúc thư mục: mọi thứ nằm trong thư mục riêng

Giao diện chứa mọi thành phần bên trong themes/{theme-name}/. Cấu trúc bên trong mô phỏng nguyên vẹn đường dẫn gốc.

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/

Lý do làm như vậy là để không xảy ra xung đột. Dù skin bảng tin của giao diện trùng tên với skin bảng tin của tài nguyên khác, chúng nằm ở các thư mục khác nhau nên không ghi đè lên nhau. Khi xóa giao diện, chỉ một thư mục bị xóa.

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: Khai báo những gì có trong thư mục giao diện này. type là layout hoặc module-skin (khi đó chỉ định mô-đun bằng target).
apply: Xác định sẽ áp dụng gì vào đâu khi bấm "Áp dụng giao diện". Trước khi áp dụng, danh sách thay đổi được hiển thị cho người dùng để xác nhận.

Mô-đun không có sẽ được bỏ qua

Dù giao diện có chứa skin thương mại, trên website chưa cài mô-đun thương mại thì chỉ mục đó được lặng lẽ bỏ qua. Bạn có thể yên tâm đưa skin cho mô-đun bổ sung vào bộ.

Giao diện đáp ứng

Để khai báo giao diện là đáp ứng, tất cả skin và layout thành phần phải có dấu <responsive>true</responsive>. Thiếu dù chỉ một cái thì sẽ bị từ chối khi kiểm tra. (Xem Chế độ xem đáp ứng và hiển thị đáp ứng)

3. Tạo các thành phần như bình thường

Layout và skin trong giao diện có cú pháp và quy ước hoàn toàn giống tài nguyên thông thường. Chỉ khác là vị trí nằm trong thư mục giao diện.

Layout: layout.html + conf/info.xml (gồm extra_vars, khai báo menu, trường lặp)
Skin: cùng bộ tệp template như skin mặc định của mô-đun đó

Tài nguyên dùng chung: Để cả giao diện dùng chung hệ màu và phông chữ, hãy đặt CSS chung trong themes/{name}/assets/ rồi gọi từ từng thành phần bằng đường dẫn tương đối. Nếu gom màu vào biến CSS, bạn có thể đổi màu của cả giao diện ở một chỗ.

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

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

4. Hoạt động cài đặt và áp dụng

Việc cài đặt theo cách kiểm tra toàn bộ rồi mới giải nén toàn bộ. Chỉ cần một thành phần có vấn đề thì không có gì được cài.
Phạm vi áp dụng giới hạn trong website đã chọn.
Trước khi áp dụng, danh sách những gì sẽ thay đổi được hiển thị để xác nhận.

5. Danh sách kiểm tra khi tạo

components trong theme.xml có khớp với nội dung thư mục thực tế không
Từng thành phần có hoạt động bình thường khi đứng riêng không (vì giao diện chỉ là lớp đóng gói)
Khi khai báo đáp ứng, mọi thành phần đã có <responsive>true</responsive> chưa
Nếu dùng template v2, bạn có dùng chú thích {{-- --}} nhiều dòng không: chỉ chú thích một dòng được loại bỏ, nên chú thích nhiều dòng sẽ gây lỗi máy chủ. Hãy viết giải thích nhiều dòng bằng chú thích HTML.
CSS của layout đã khai báo nền cho html, body chưa: nếu chỉ tô nền cho div ngoài cùng, ở chế độ tối sẽ còn dải trắng ở mép màn hình.