内容以避免重复代码 " />

本文介绍一种基于原生 JavaScript 的轻量级方案：通过外部 head.html 文件集中管理公共 标签（如 CDN 链接、meta 信息等），并在各页面加载时动态注入，实现一次编写、多页复用，无需构建工具或服务端渲染。

本文介绍一种基于原生 javascript 的轻量级方案：通过外部 `head.html` 文件集中管理公共 `

` 标签（如 CDN 链接、meta 信息等），并在各页面加载时动态注入，实现一次编写、多页复用，无需构建工具或服务端渲染。

在多页面静态网站开发中，频繁在每个 HTML 文件的

中重复书写相同的资源引用（如 Bootstrap CDN、字体链接、SEO meta 标签、全局脚本等）不仅增加维护成本，还容易因疏漏导致不一致。虽然现代前端框架（如 React/Vue）或构建工具（如 Webpack、Vite）可通过模板继承或组件化解决，但对纯静态项目或学校级轻量应用而言，引入复杂工具反而得不偿失。

一个简洁、兼容性好且零依赖的解决方案是：将公共 内容抽离为独立的 head.html 文件，并利用 JavaScript 在页面加载完成后动态插入到当前文档的 中。

✅ 实现步骤

1. 创建 head.html 文件
   在项目根目录（或统一路径下）新建 head.html，仅包含需复用的 片段（注意：不要包含 或 标签本身）：

<!-- head.html -->
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script><!-- 可按需添加其他公共资源：字体、分析脚本、PWA manifest 等 -->

2. 在目标页面中注入 head.html
   在每个需要复用头部内容的 HTML 文件中（如 about.html、contact.html），于 内或 底部添加以下 JS 脚本：

<script>
document.addEventListener('DOMContentLoaded', async () => {
  try {
    const response = await fetch('head.html');
    if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);

    const headContent = await response.text();
    const headElement = document.querySelector('head');
    if (headElement) {
      headElement.insertAdjacentHTML('afterbegin', headContent);
    }
  } catch (error) {
    console.warn('⚠️ 无法加载 head.html，跳过注入:', error.message);
  }
});
</script>

? 提示：建议将上述脚本保存为独立文件（如 js/inject-head.js），然后在各页面中统一引入：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

<script src="js/inject-head.js" defer></script>

这样更利于缓存与维护。

⚠️ 注意事项与最佳实践

• 同源限制：fetch() 要求 head.html 与当前页面同源（协议、域名、端口一致）。若直接双击打开本地 HTML 文件（file:// 协议），浏览器会因 CORS 策略拒绝请求。✅ 解决方案：使用本地服务器预览（如 VS Code 的 Live Server 插件，或运行 npx serve）。
• 加载时机：使用 DOMContentLoaded 确保 DOM 就绪后再注入；insertAdjacentHTML('afterbegin') 保证新内容位于 最前，避免覆盖原有标签（如
• 错误降级：代码已内置 try/catch 和 response.ok 检查，当 head.html 不可用时，页面仍可正常渲染，仅缺失复用资源——这对教学项目或原型开发非常友好。
• SEO 与爬虫兼容性：此方案为客户端注入，搜索引擎爬虫可能无法执行 JS，因此关键 SEO 标签（如

✅ 总结

该方法以极小的学习成本和零构建依赖，解决了静态网站中

冗余问题。它不改变现有工作流，兼容所有现代浏览器，特别适合课程设计、个人作品集、内部文档站等轻量场景。如后续项目规模扩大，再平滑迁移到模板引擎（如 EJS）或静态站点生成器（如 Jekyll）即可。核心原则始终不变：关注点分离 + 单一可信源（Single Source of Truth）。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！