主题改变网站的呈现，文章和页面文件继续保存内容。先做一个本地主题，把共享布局搭好，再用同一份内容检查宽屏和窄屏。

创建并选择主题

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 列表，填好名称、用途与数据披露，取得当前服务同意后才请求。评论交给我提问，主题不再做一套评论系统。

图片、媒体图库和文档元素使用现有可复用查看器。调整颜色时保留焦点、授权与延迟加载，不必复制播放器或文档引擎。

用真实内容检查

运行 npm run build、npm run check，再看浅色与深色、键盘导航、翻译后的菜单和手机布局。至少打开一篇含代码与表格的文章、一个双栏页面、一段带进度条的演示和一个文档预览。构建通过说明结构有效，页面是否好读还需要实际查看。

轻量文字版是主题的可选能力。添加时既要看布局，也要看实际请求：省流配置。

写作与 Pages · 主题元素参考