面板是模組的外觀，版面是整個網站的框架。製作方法幾乎相同，只是放置位置與宣告檔案不同。

製作模組面板

若要為既有模組套上新外觀，請從整份複製該模組的 skins/default/ 並改名開始。需要哪些範本檔案、會傳入哪些變數，預設面板就是標準答案。

modules/board/skins/myskin/
├── skin.xml
├── list.html        ← 목록 (+ 상세는 _read.html 포함 방식)
├── _read.html
├── _comment.html
├── write_form.html
├── css/skin.css
└── ...

skin.xml

<?xml version="1.0" encoding="UTF-8"?>
<skin version="0.2">
	<responsive>true</responsive>
	<title xml:lang="ko">내 스킨</title>
	<description xml:lang="ko">설명</description>
	<version>1.0.0</version>
	<date>2026-08-05</date>
	<author email_address="you@example.com" link="https://example.com">
		<name xml:lang="ko">제작자</name>
	</author>
	<extra_vars>
		<var name="list_style" type="select" default="list">
			<title xml:lang="ko">목록 형태</title>
			<options value="list"><title xml:lang="ko">목록형</title></options>
			<options value="card"><title xml:lang="ko">카드형</title></options>
		</var>
	</extra_vars>
</skin>

• <responsive>true</responsive> 表示此面板能支援到窄螢幕。請參閱 響應式檢視與響應式顯示。
• 以 <extra_vars> 宣告的面板設定，在範本中以 $module_info->{variable_name} 讀取。

必須遵守的事項

• 面板只改變畫面。伺服器傳入的變數與表單規範必須與預設面板保持一致。 若漏掉表單的 hidden 欄位（module、act、mid 等），就無法儲存。
• 像討論區列表欄位這類與管理員設定連動的部分（$list_config 等），請勿寫死，而是依照設定值。
• 圖示建議使用行內 SVG，而非圖片檔。

製作版面

layouts/mylayout/
├── layout.html      ← 뼈대. {!! $content !!} 자리에 본문이 들어감
├── conf/info.xml
├── css/layout.css
└── js/layout.js

layout.html 最小骨架

@version(2)
@load('css/layout.css')
@load('js/layout.js')

<div class="my-layout">
	<header>
		<a href="{{ getUrl('') }}">{{ $layout_info->logo_text ?: '사이트' }}</a>
		<nav>
			@foreach ($gnb->list ?? [] as $item)
			<a href="{{ $item['href'] }}" @if (!empty($item['selected'])) class="on" @endif>{{ $item['text'] }}</a>
			@endforeach
		</nav>
	</header>

	<main>{!! $content !!}</main>

	<footer>{{ $layout_info->copyright }}</footer>
</div>

• 內文以 {!! $content !!} 輸出，不可跳脫。
• 選單依 info.xml 的 <menus> 宣告，以 $gnb->list 等形式傳入。每個項目含有 text（名稱）href（網址）selected/open（目前位置）list（子選單）。

conf/info.xml

<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.2">
	<responsive>true</responsive>
	<title xml:lang="ko">내 레이아웃</title>
	<version>1.0.0</version>
	<author email_address="you@example.com" link="https://example.com">
		<name xml:lang="ko">제작자</name>
	</author>

	<menus>
		<menu name="gnb" maxdepth="3" default="true">
			<title xml:lang="ko">상단 메뉴</title>
		</menu>
	</menus>

	<extra_vars>
		<group>
			<title xml:lang="ko">기본</title>
			<var name="logo_text" type="text">
				<title xml:lang="ko">로고 텍스트</title>
			</var>
			<var name="point_color" type="color" default="#2677e3">
				<title xml:lang="ko">포인트 색상</title>
			</var>
		</group>
	</extra_vars>
</layout>

• extra_vars 的 <var> 務必放在 <group> 內。 版面詳細設定會把群組畫成分頁，因此群組外的變數不會顯示在畫面上。
• 設定值在範本中以 $layout_info->{variable_name} 讀取。
• 輪播・橫幅這類重複的項目，請以 版面重複欄位 宣告。

版面 CSS 須遵守的事項

• 務必同時宣告 html, body { margin: 0; background: ... }。 若只替最上層 div 上底色，body 的預設邊界與捲軸溝槽會留下白色，在深色模式中看起來就像畫面四周的白框。
• 若要支援深色模式，請將顏色集中為 CSS 變數，並以 data-theme 屬性或 prefers-color-scheme 切換。
• 若提供重點色設定，以 style="--brand: {{ $layout_info->point_color }}" 的方式傳成變數，讓整份 CSS 跟著變動，會比較容易管理。

發佈

面板・版面可將整個資料夾壓縮後登錄到商店，或直接安裝（上傳到對應路徑）。若要將版面與模組面板成套發佈，請打包成 佈景主題套件。