Bareungyeol 佈景主題（企業網站）
Bareungyeol 佈景主題（企業網站・企業媒體）
這是為企業・機構網站與企業媒體（新聞中心・公司故事）打造的 Zittme 付費佈景主題 Bareungyeol（bareungyeol） 的說明手冊。白底黑字，以照片為主角的卡片構成。封面會將討論區的最新文章以照片投影片輪播，下方接著推薦文章・故事・最新消息卡片，以及黑色的洽詢引導區塊。子頁面的標題帶・橫幅・下層選單分頁・內文寬度也都由版面設定決定。
示範：bareungyeol-demo.zitt.me · 商店：zitt.me/store/package/37507
組成
| 組成元件 | 位置 | 用途 |
|---|---|---|
| 版面 | themes/bareungyeol/layouts/bareungyeol | 網站骨架 + 佈景主題內建主頁面 + 子頁面頁首 |
| 討論區面板 | themes/bareungyeol/modules/board | 列表型・卡片型・大圖庫型・網誌型・FAQ 型 |
| 會員・站內信・通知中心・訊息面板 | themes/bareungyeol/modules/{member, communication, ncenterlite, message} | 登入・我的頁面・站內信・通知・系統提示 |
| 聯絡・電商・zittme Pay 面板 | themes/bareungyeol/modules/{contact, commerce, zittme_pay} | 僅在已安裝該模組的網站中套用。電商用於服務・產品介紹與銷售 |
重點色（預設綠色 #00b04f）與色彩模式（預設淺色・深色・依裝置設定）可在版面設定 > 基本中變更。
安裝與套用
- 在商店購買後登錄要使用的網域（啟用授權），即可開放下載。可在系統（管理員 > 資料庫）中安裝，或解壓縮到
themes/bareungyeol。 - 在管理員 > 設計設定中選擇 Bareungyeol 並套用。版面與模組面板會一次變更。
- 建立要作為首頁的討論區（例如：
journal），並在文章中放入照片。在版面設定 > 首頁的「封面投影片討論區（mid）」中填入該討論區，封面即完成。 - 主頁：網站首頁（網站設定的預設模組）會自動成為主頁。若要讓其他頁面以主頁形式呈現，請在網站地圖中該選單的類別填入
m。 - 子頁：其餘頁面。依序為標題帶 →（下層選單分頁）→ 內文。
- 全寬：在選單類別填入
wide，內文不受寬度限制，占滿整個畫面（小工具頁面等）。 - 在首頁，頁首會以透明方式疊在封面照片上（白色文字），捲動後會以白色背景固定。若使用標誌圖片，請在「白色標誌圖片」欄一併放入白色標誌。
- 頁首按鈕由版面設定 > 基本的「頁首按鈕名稱・連結」建立。留空則不顯示。
- 若要在頁首隱藏登入・帳號連結、只放在行動版抽屜中，請將「在頁首顯示登入・帳號」改為隱藏。
- 照片投影片：在「封面投影片討論區（mid）」填入討論區後，該討論區最新文章中具有代表圖片的文章會成為投影片。標題會大大地顯示在照片中央，下方附有
1 / 4計數器與箭頭。可設定自動切換間隔（關閉・4・5・8 秒）與數量，滑鼠移上去時會暫停。 - 固定封面：討論區留空時，會成為使用背景圖片・上方小字・標題・說明・按鈕的固定封面。
- 影片封面（1.2.0）：在「固定封面背景影片」填入 mp4・webm 網址，固定封面後方會重複播放無聲影片。背景圖片會作為影片載入前的首畫面。右下角附有暫停按鈕，對於在裝置上開啟「減少動態效果」的訪客不會自動播放。
- 投影片自動切換也附有暫停・播放按鈕。以鍵盤進入投影片時，自動切換會暫時停止。
- 高度：全螢幕・較高（80%，預設）・一般（620px）。
- 標題上方小字：以重點色附在標題上方的短語（About、Since 2009 等）。
- 背景：無・淺灰色・深色。淺灰色・深色會塗滿到畫面邊緣，與前後區段區隔。照片帶・洽詢引導・徵才橫幅・影片使用各自的背景。
- 顯示位置：留空則為首頁。填入頁面 mid 則會出現在 該子頁面。多個位置以逗號分隔（
about, ceo），若也要放在首頁，請一併填入home。 - 在子頁面中的位置：內文下方（預設）・內文上方。
- 關閉卡片右上角的 顯示勾選 即可不刪除而暫時隱藏。拖曳卡片 即可調整順序。
- 頁首形式：標題帶（照片背景，預設）・僅標題（白底）・不顯示。
- 標題帶預設背景圖片 與 高度（220・320・460px）。沒有背景圖片時為深色單色帶。
- 標題來源：第一層選單名稱（預設）或模組（討論區・頁面）名稱。
- 路徑顯示：首頁 / 第一層選單 / 下層選單。
- 下層選單分頁：目前的第一層選單有第二層選單時，標題帶下方會附上「全部・下層選單…」分頁。
- 子頁面內文寬度：與內文最大寬度相同，或易於閱讀的 960px。
- 各頁面橫幅：在重複欄位中填入頁面 mid・背景圖片・標題・副標題，該頁面的標題帶會另外裝飾。填入第一層選單的 mid，也會套用到其下的頁面。
- 網誌型・大圖庫型的 內文摘要，需在討論區管理 > 列表設定中開啟「摘要（summary）」項目才會出現。這是因為核心只有在列表查詢含有摘要項目時，才會一併讀取內文。
- 發文・修改・刪除按鈕只會對有權限的會員顯示。像 FAQ 這類只有管理員撰寫的討論區，請在討論區管理 > 權限中將「撰寫文章」限制為管理群組。
- 示範的選單配置：故事 → Inside（大圖庫）、新聞中心 → 新聞稿（網誌）、聯絡 → FAQ。第二層選單會自動出現在頁首下拉選單與子頁面分頁中。
- 深色模式切換按鈕：將色彩模式設為「依訪客裝置設定」時，頁首會出現太陽/月亮按鈕。一開始依照裝置設定，並記住訪客選擇的模式。討論區・會員・聯絡・電商面板也會一併變更。
- 捲動進場動畫：區段進入畫面時會平順地浮現。可在設定中關閉，對於在裝置上開啟「減少動態效果」的訪客會自動關閉。即使腳本載入較慢，3 秒後所有區段也都會顯示。
- 按鈕對比：重點色維持不變，但放白色文字的按鈕底色，以及白底上的重點色文字，會自動混入稍深的顏色以符合 WCAG AA（4.5:1）對比。深色模式下則反過來混入較亮的顏色。非常亮的重點色（黃色・淺綠色）可能使按鈕文字變得不清楚，建議使用中等以上的深色。
- 鍵盤：最前方有「跳至內文」連結，所有按鈕・連結都有焦點外框。
- 列印：排除頁首・選單・地圖・影片，以黑白列印，FAQ 以展開狀態列印。
建議環境：Zittme 1.0.1 以上。由於是響應式佈景主題，建議關閉行動版專用檢視。
頁面類型
頁首
由標誌（圖片或文字）・上方選單（第二層選單為下拉式）・右側文字（標語）・搜尋・購物車（安裝電商時）・登入・重點色按鈕（例如：聯絡我們）・行動版抽屜選單組成。
封面（首頁）
代表圖片規則
卡片與封面的照片使用文章的代表圖片（縮圖）。若未擷取到縮圖，則改用內文的第一張圖片。請務必在每篇文章放入至少一張照片。沒有照片的文章不會出現在封面投影片中。
佈景主題內建主頁面（主頁配置）
在版面設定 > 主頁配置 分頁的「主頁面區段」重複欄位中依序組合。若一個都沒有，則使用預設配置（推薦文章 → 故事 → 最新消息 → 洽詢引導）。
| 區段種類 | 內容 | 討論區 mid | 數量 |
|---|---|---|---|
| 推薦文章 | 1 張大卡片 + 小卡片。分類名稱以標籤顯示在照片上，討論區名稱顯示為出處列 | 例如：journal | 建議 5 |
| 故事 | 2 張寬卡片 + 內文摘要 | 討論區 mid | 建議 2 |
| 最新消息 | 左側標題，右側橫向卡片列、日期 | 例如：notice | 建議 4 |
| 消息 | 3 欄卡片 | 討論區 mid | 3 或 6 |
| 公司介紹文字 | 小標籤 + 一大段大字（使用內文） | - | - |
| 事業領域 | 「事業領域」重複欄位的圖示卡片 4 欄 | - | - |
| 經營團隊・成員 | 「經營團隊・成員」重複欄位。沒有照片時顯示姓名第一個字 | - | - |
| 數字指標 | 「數字指標」重複欄位。進入畫面時數字會往上跳動 | - | - |
| 客戶・合作夥伴標誌 | 「客戶・合作夥伴」重複欄位。沒有標誌時以文字顯示名稱 | - | - |
| 照片帶 | 占滿畫面的照片 + 標題・文句・按鈕（使用圖片・內文） | - | - |
| 洽詢引導 | 黑色帶狀區塊中的標題・文句・外框按鈕（使用內文・按鈕名稱・連結，放入圖片則為照片背景） | - | - |
| 產品・新品 | 電商商品卡片 4 欄（安裝電商時）。價格為 0 時顯示為「洽詢」 | - | 建議 4 |
| 照片 + 文字（左・右） | 一張照片與標題・內文・連結並排。交替使用兩種即成為之字形配置 | - | - |
| CEO 致詞 | 直式照片 + 標題 + 長內文 + 署名。署名填寫在「按鈕名稱」欄（例如：代表理事 金正直） | - | - |
| 沿革時間軸 | 「沿革」重複欄位（年度・標題・內容・照片）。以直線與圓點串連的時間軸 | - | - |
| 組織圖 | 「組織圖」重複欄位。層級 1（最上層）・2（事業部）・3（緊接在前一個事業部下的團隊） | - | - |
| 獲獎・認證 | 「獲獎・認證」重複欄位（標章圖片・名稱・機構・年度）。沒有標章時顯示星形圖示 | - | - |
| 常見問題 | 「常見問題」重複欄位。左側標題，右側展開清單 | - | 顯示數量 |
| 交通資訊 | Google 地圖 + 地址・交通指引（內文）・電話・營業時間・地圖 App 按鈕。地址填在「討論區網址（mid）・地址」欄，留空則使用頁尾公司介紹的最後一行 | - | - |
| 洽詢說明 | 標題・文句・洽詢按鈕 + 頁尾的電話・電子郵件・營業時間清單 | - | - |
| 徵才橫幅 | 重點色帶狀區塊（放入圖片則在照片上覆蓋重點色）+ 白色按鈕 | - | - |
| 影片 | 在「按鈕連結」填入 YouTube・Vimeo 網址或 mp4。點選前不會載入外部播放器，因此速度快（YouTube 使用無 Cookie 網址）。圖片為首畫面 | - | - |
| 資料室・IR | 以表格呈現討論區文章。顯示分類・標題・日期・「附件 N」 | 例如：ir | 4~6 |
區段共用欄位（1.2.0）
子頁面組合範例（與示範相同的配置）
建立內文簡短的頁面（一行標題 + 介紹文句），並在區段的「顯示位置」填入該頁面 mid，即可在版面中組合子頁面。
| 頁面（mid） | 區段 |
|---|---|
CEO 致詞（ceo） | CEO 致詞 → 照片 + 文字（右） |
沿革・組織（history） | 沿革時間軸 → 組織圖（背景淺灰色） |
交通資訊（location） | 交通資訊 → 洽詢說明（背景淺灰色） |
公司介紹（about） | 數字指標（深色）→ 資料室・IR → 獲獎・認證 |
聯絡（contact） | 常見問題（以 home, contact 與首頁一同顯示） |
間距・文字體系
區段之間的間距、標題與內容之間的間距、卡片之間的間距、帶狀區段的內側留白、標題・內文的文字大小，都以同一組數值統一。會依畫面寬度平順縮小（區段之間 72~120px、標題下方 24~36px、卡片之間 16~28px、帶狀內側 64~112px）。無論區段以何種順序排列，間距都相同；帶狀區段彼此相連時，中間不會出現白色縫隙。
分類標籤
推薦文章・最新消息・消息卡片的照片上方所附的黑色標籤，是文章的 分類（類別） 名稱。在討論區管理 > 分類中事先建立「人物&文化・技術・服務・企業」等分類，並為每篇文章選擇分類，即可成為企業媒體首頁。
子頁面（設定分頁「子頁面」）
討論區種類（討論區面板設定「列表樣式」）
| 樣式 | 外觀 | 示範 |
|---|---|---|
| 列表型 | 編號・標題・作者・日期表格 | 新聞中心 |
| 大圖庫型 | 第一篇文章以大照片 + 標題呈現，接著是 3 欄照片卡片。照片上附分類標籤 | Inside |
| 網誌型 | 左側縮圖 + 標題・摘要 | 新聞稿 |
| 卡片型 | 有外框的卡片網格 | - |
| FAQ 型 | 點選問題即展開答案的手風琴。以分類分頁歸類 | FAQ |
內文組合區塊（公司介紹・組織頁面）
在頁面模組（非小工具頁面的一般頁面）的內文中使用下列類別，即可成為與首頁同一風格的介紹頁面。貼到編輯器的 HTML 模式即可。將整體以 <div class="bg-page"> 包起來，區塊之間的間距會自動拉開。
| 區塊 | 標記 | 用途 |
|---|---|---|
| 開頭 | <section class="bg-page-lead"><span class="bg-eyebrow">About</span><h2>標題</h2><p>文句</p></section> | 頁面第一段 |
| 照片 + 文字 | <section class="bg-split"><img src="..." /><div class="bg-split-copy"><span class="bg-eyebrow">標籤</span><h3>標題</h3><p>文句</p></div></section> | 加上 is-flip 則照片在右側 |
| 3 欄卡片 | <section class="bg-cols"><div class="bg-col"><em>01</em><strong>標題</strong><p>文句</p></div>…</section> | 原則・福利・特色 |
| 沿革 | <section class="bg-timeline"><div class="bg-tl"><em>2009</em><strong>標題</strong><p>文句</p></div>…</section> | 4 欄，行動版 2 欄 |
| 引言 | <section class="bg-quote"><blockquote>文句</blockquote><cite>出處</cite></section> | 一行大字 |
| 照片帶 | <section class="bg-band" style="background-image:url('...')"><div class="bg-band-copy"><h3>標題</h3><p>文句</p></div></section> | 占滿畫面寬度 |
| 人員清單 | <section class="bg-roster"><div class="bg-roster-item"><img src="..." /><strong>姓名</strong><span>職稱</span><em>部門</em></div>…</section> | 也可用 <span class="bg-roster-photo">王</span> 取代照片 |
| 按鈕列 | <div class="bg-page-links"><a class="is-primary" href="/contact">洽詢</a><a href="/shop">服務</a></div> | 頁面結尾 |
示範中的公司介紹（/about）・人物（/riders）頁面完全只用這些區塊製作，複製內文後修改使用會比較快。
服務・產品（電商）
將電商模組用於服務商品的介紹與銷售。商品的 摘要 項目會以卡片上方小字（重點色）顯示，首頁的產品區段使用正方形縮圖。報價型商品若將價格設為 0，在首頁會顯示為「洽詢」（在商店列表中會顯示為 0 韓元，因此建議填寫價格）。
頁尾
淺色・深色兩種顏色。公司介紹文字（地址）、代表電話・電子郵件・營業時間、社群（Instagram・YouTube・Facebook・LinkedIn・部落格）、底部說明文字、公司・聯絡資訊（每行一個項目）、版權、回到頂端按鈕。
深色模式・動畫・無障礙（1.2.0）
搜尋引擎結構化資料（1.2.0）
在首頁放入 schema.org Organization 資訊。公司名稱（正式公司名稱 → 標誌文字 → 網站標題的順序）、標誌、代表電話・電子郵件、地址（頁尾公司介紹的最後一行）、社群網址，皆從頁尾設定取得。可在設定 > 基本 >「搜尋引擎用公司資訊」中關閉。
整合搜尋
頁首搜尋會前往網站整合搜尋。結果畫面也會以佈景主題的樣式（分頁・結果清單・按鈕）呈現。需要在管理員 > 整合搜尋中指定搜尋對象模組，才會出現結果（對象留空且設為「包含」時，會顯示「無法使用搜尋」）。
版面設定完整項目
基本
標誌圖片・白色標誌圖片・標誌文字・頁首右側文字・頁首按鈕名稱・連結・重點色・內文最大寬度・色彩模式・使用搜尋・在頁首顯示登入・帳號・產品商店網址（mid）・深色模式切換按鈕・捲動進場動畫・搜尋引擎用公司資訊・正式公司名稱・上方選單・頁尾選單
首頁
顯示封面・封面高度・封面投影片討論區（mid）・投影片數量・自動切換間隔・固定封面背景圖片・固定封面背景影片・上方小字・標題・說明・按鈕名稱・按鈕連結
主頁配置
主頁面區段（種類・標題・標題上方小字・內文・圖片・討論區 mid・地址・按鈕名稱・按鈕連結・數量・背景・顯示位置・在子頁面中的位置）・沿革・組織圖・獲獎・認證・常見問題・經營團隊・成員・事業領域・客戶・合作夥伴・數字指標
子頁面
子頁面頁首・標題帶預設背景圖片・標題帶高度・標題來源・路徑顯示・下層選單分頁・子頁面內文寬度・各頁面橫幅
頁尾
頁尾顏色・公司介紹文字・地址・代表電話・代表電子郵件・營業時間・社群網址 5 種・底部說明文字・公司・聯絡資訊・版權標示