快速开始
5 分钟跑通一个最小示例：写内容 → 准备模板 → 发布前注入。
你需要什么
- 一个能编辑 HTML 的编辑器。
- 一个支持声明式 Shadow DOM 的浏览器（Chrome 111+ / Edge 111+ / Safari 16.4+ / Firefox 123+）。
- 你的网站现有的发布流程——不需要引入任何新工具。
这个方案不依赖构建器、不依赖运行时。你要做的只是在发布前，把一段固定的 HTML 片段插到每个页面的
</body> 之前。
三步走
-
写页面内容
让 AI（或你自己）生成页面，只保留正文部分。不要写 header、侧边栏、footer——这些属于模板。
-
准备一份模板
把站点的标题、导航、页脚写进一个
<template shadowrootmode="open">里，中间留一个<slot>作为内容投影口。整站只需要这一份。 -
发布前注入
在你的发布流程里，把模板片段插入每个 HTML 的
</body>之前。手动、脚本、CI 都行。
最小示例
1. 页面文件 about.html
注意：没有 header、没有导航、没有 footer。样式也只为正文服务。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>关于我们</title>
<style>
article {
max-width: 720px;
margin: 0 auto;
padding: 40px 24px;
}
h1 { font-size: 28px; }
</style>
</head>
<body>
<article>
<h1>关于我们</h1>
<p>我们是一支专注于静态网站的小团队。</p>
</article>
</body>
</html>2. 模板片段 site-template.txt
整站共用一份。<slot> 的位置决定了页面内容出现在哪里。
<template shadowrootmode="open">
<style>
:host { display: block; font-family: system-ui, sans-serif; }
header { padding: 16px 24px; border-bottom: 1px solid #e2e8f0; }
nav a { margin-right: 16px; }
footer { padding: 24px; text-align: center; color: #94a3b8; }
</style>
<header>我的网站</header>
<nav>
<a href="/">首页</a>
<a href="/about.html">关于</a>
</nav>
<slot></slot>
<footer>© 2026 我的网站</footer>
</template>3. 注入后的 about.html
就是在 </body> 之前多了一段。页面内容和模板都不用改。
<body>
<article>
<h1>关于我们</h1>
<p>我们是一支专注于静态网站的小团队。</p>
</article>
<!-- 注入的模板 -->
<template shadowrootmode="open">
…
</template>
</body>验证一下
用浏览器打开这个文件，你会看到：
- 页面顶部有统一的网站标题和导航。
- 中间是"关于我们"的正文。
- 底部是统一的版权信息。
- 而且——页面里那段
article { max-width: 720px }，不会影响模板里的 header 和 footer。
独立打开也没问题。注入前，每个页面都是一个完整、能直接阅读的 HTML；注入后，它自动获得站点级的布局与风格。两种状态都不冲突。
什么时候注入？
任何"文件将要被发布出去"的时刻都可以：
- 手动：复制粘贴模板片段，适合页面很少的场景。
- 脚本：写一个几行的 Node / Python 脚本，遍历目录、在每个
</body>前插入。 - 构建链路：接到你的 CI/CD、静态站点生成器或部署脚本里。
具体写法见 如何注入。
常见疑问
浏览器兼容性如何？
声明式 Shadow DOM（shadowrootmode 属性）在 Chrome / Edge 111+、Safari 16.4+、Firefox 123+ 均已支持。旧浏览器会忽略 <template>，页面仍能显示内容，只是没有站点布局。
会不会影响 SEO？
不会。页面内容和模板都在同一个 HTML 文档里，爬虫能看到全部内容。这也是它比 iframe 更适合静态站的原因。
样式真的不会互相污染吗？
是的，双向隔离。唯一会穿透的是可继承属性（如 color、font-family）和 CSS 自定义属性。详见 核心概念。
下一步 → 页面怎么写