直接用模板引擎批量生成静态页面的核心是“数据 + 模板字符串 → 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}}<p>{{desc}}';
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 = `<h1>{title}</h1><div>{content}</div>`;
const pages = [
{ title: "首页", content: "<p>欢迎访问</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>" },
{ 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">，且放在最前面 - 图片、CSS、JS 文件要和生成的 HTML 在合理目录结构下共存，别靠 CDN 或 fetch
- 不要用
<!--#include-->、<?php ?>、{{ }}（非 Mustache 环境）这类服务端语法，它们在本地打不开
模板引擎不是必需品，但能让数据与结构解耦更干净。小批量用字符串替换，中批量用 Mustache，大批量或需逻辑（如分页、条件显示）再考虑其他方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
