直接用模板引擎批量生成静态页面的核心是“数据 + 模板字符串 → HTML 字符串 → 写入文件”，适合文档页、产品列表等固定内容场景；Mustache 因零依赖、无逻辑、自动转义而最轻量稳妥，支持浏览器 CDN 和 Node fs 写入；也可手写字符串替换实现极简需求；关键需用相对路径、声明 UTF-8、避免服务端语法。
直接用模板引擎批量生成静态页面，核心是“数据 + 模板字符串 → HTML 字符串 → 写入文件”。不依赖服务端、不走构建流程，适合生成文档页、产品列表、博客归档等固定内容场景。
Mustache 是最轻量稳妥的选择
它零依赖、无逻辑、自动转义，适合纯数据填充。浏览器里引入 CDN 就能跑，Node 环境下也能直接 fs.writeFile 输出文件。
<script src="https://unpkg.com/mustache@4.2.0/mustache.min.js"></script>
<script>
const data = [
{ title: "入门指南", desc: "从零开始写 HTML" },
{ title: "响应式布局", desc: "适配手机和桌面" }
];
const template = '<article><h2>{{title}}</h2><p>{{desc}}</p></article>';
const htmls = data.map(item => Mustache.render(template, item));
document.getElementById('container').innerHTML = htmls.join('');
</script>批量导出为独立 .html 文件（Node 环境）
浏览器不能直接写文件，但你在本地用 Node 脚本就能完成最终落地：
- 把模板字符串存为
template.html - 数据存在
data.json里（或直接写在脚本中） - 用
fs.writeFileSync(${i}.html, renderedHtml)逐个生成
注意：{{{html}}} 用于输出未转义的 HTML（比如富文本内容），普通字段用 {{key}} 即可。
手写模板 + 字符串替换也够用（极简场景）
如果就几条数据、不想引库，用原生 JS 替换也行：
const template = `<html><body><h1>{title}</h1><div>{content}</div></body></html>`;
const pages = [
{ title: "首页", content: "<p>欢迎访问</p>" },
{ title: "关于", content: "<p>我们是谁</p>" }
];
pages.forEach((item, i) => {
let html = template.replace(/{title}/g, item.title)
.replace(/{content}/g, item.content);
// 这里用 fs 写入文件，或复制到剪贴板手动保存
});关键细节不能漏
- 所有路径用相对路径（
./css/style.css），确保双击.html能正常加载资源 - 中文必须声明
<meta charset="UTF-8">，且放在<head>最前面 - 图片、CSS、JS 文件要和生成的 HTML 在合理目录结构下共存，别靠 CDN 或 fetch
- 不要用
<!--#include-->、<?php ?>、{{ }}（非 Mustache 环境）这类服务端语法，它们在本地打不开
模板引擎不是必需品，但能让数据与结构解耦更干净。小批量用字符串替换，中批量用 Mustache，大批量或需逻辑（如分页、条件显示）再考虑其他方案。
立即学习“前端免费学习笔记（深入）”；
