寫文建站主題二次開發：從共享版面到實際元素

佈景主題改變網站的呈現，文章和頁面檔案繼續保存內容。先做一個本地主題，把共享版面搭好，再用同一份內容檢查寬螢幕和窄螢幕。

建立並選擇主題

npx edgepress theme list
npx edgepress theme create my-theme
npx edgepress theme use my-theme
npm run dev

theme create 複製預設版面骨架，並為你建立空白的 assets/style.css，視覺設計需要自己補齊。既有主題用 theme use 切換，已發布的主題套件可以用 npx edgepress theme install <package> 安裝。站點在 config.yml 根層設定了 theme: 時，以它選擇主題；較早的專案也可以使用建置設定的 paths.theme。

themes/my-theme/
  theme.json
  layouts/layout.html
  layouts/partials/head.html
  layouts/partials/header.html
  layouts/partials/footer.html
  assets/style.css
  assets/data-saver-theme.css
  package.json
  README.md

先做共享版面

<html lang="{{site.language}}">
<head>{{> head}}</head>
<body>
  <a class="skip-link" href="#main">{{site.skipToContent}}</a>
  {{> header}}
  <main id="main">{{{page.content}}}</main>
  {{> footer}}
  <script defer src="/edgepress/language-select.7d871c5f0e7a9327.js"></script>
</body>
</html>

模板使用 HTML 和局部模板。{{page.title}} 等一般佔位符會跳脫，{{{page.content}}} 插入框架已經渲染的內容。保留 head 局部模板、同意管理、語言導覽和框架的本地執行程式碼，主題不需要複製這些瀏覽器實作。

保留跳轉連結、唯一 main、可見鍵盤焦點和一個頁面級 H1。body 佔滿視窗高度，main 可以增長，短頁面的頁尾才能落在底部。長標題、文章、專案清單、空狀態和本地化 404 都要看一遍。

給實際元素寫樣式

顏色、字型、間距和響應式規則放在 assets/style.css。內建字型變數是 --edgepress-font-sans、--edgepress-font-serif、--edgepress-font-mono，字型資源在本地。除了文章正文，也要照顧頁面的列與儲存格、導覽、表格、程式碼、示範播放進度條和提示。不要用只能適應桌面的固定寬度。

文章和頁面的圖片放在 content/assets/，主題自有裝飾才放主題資源目錄。本地 CSS、JavaScript 和它們的依賴在建置時產生內容雜湊；雜湊資源快取一年，HTML 與未版本化中繼資料保持可重新驗證。

擴充互動與服務

小型本地互動可以寫在主題的 assets/。建置外掛放在 edgepress.config.mjs 指定的路徑裡，建置時作為受信任的 Node 程式碼執行。可選外部服務登記到 config.yml 的扁平 plugins.consent.services 清單，填好名稱、用途與資料揭露，取得目前服務同意後才請求。留言交給我提問，主題不再做一套留言系統。

圖片、媒體圖庫和文件元素使用既有可重用檢視器。調整顏色時保留焦點、授權與延遲載入，不必複製播放器或文件引擎。