靈火殿工匠手冊・初級卷
給正在「自己搭殿」的你:這卷是操作書,不是經書。
靈火殿之文,為了「讓人看得懂」而生;
靈火殿之頁,為了「讓人接得上」而排。
若後來者拾起此卷,願能依樣續築,不必拆舊殿。
一、三條不拆原則
1. 不動頂殼(head)
頁面一定要有:
<link rel="stylesheet" href="lingfire-style.css">
<script> document.addEventListener("DOMContentLoaded", … ) </script>
這兩行就像「開殿點燈」與「穿同一件衣服」,拔掉就變黑殿。
2. 不亂改導覽條
導覽條請沿用上面的那一條,只改「哪一個要亮」就好,把 lf-current 放在你現在這頁。
3. 不混內外樣式
想多一點樣式,就在這一頁的 <style> 裡加,別去動 lingfire-style.css。這樣以後別人更新主風格,你這頁也不會爆。
二、最常做的三件事
① 開新卷(新 .html)
複製一頁成功的(像這一頁或 path.html),改檔名、改標題、改中間內容就好。這叫「複製殿格」。
② 加回殿鈕
如果是像 sevenstars.html 那種需要浮動按鈕的,就貼你現在正在用的那段:
<div style="position:fixed; top:1rem; left:.8rem; z-index:50;">
<a href="index.html">← 回靈火殿</a>
</div>
要避開標題,就把 top 往下、或 left 往右一點。
③ 新頁掛回首頁
去 index.html 找「殿宇導覽」那一排卡片,照著格式加一張卡。這樣來殿的人才找得到這一卷。
三、常見壞掉現象與補救
🔦 全黑但網址對了
大多是「沒加點燈腳本」,或是 lingfire-style.css 沒連上。
看頭部有沒有這兩條,沒有就補。
🪟 標題被回殿鈕蓋住
把鈕的 top 調大一點,如 top:3.2rem;。
📱 手機排版太擠
在本頁的 <style> 裡面補:
@media (max-width: 600px) {
.lf-main { padding: 0 1rem; }
}
四、預留進階卷位子
- 📘 (預留) 工匠手冊・進階卷
- 📘 (預留) 工匠手冊・星象版互動頁製作筆記