开发静态页面时，不依赖node相关的工具，如何提取出公共部分并引入？

在不依赖 Node.js 等构建工具的情况下，提取静态页面公共部分并引入，主要有以下几种方法：

1. 使用 Server-Side Includes (SSI):

• 原理: SSI 是由服务器端解析的一种指令，允许你在 HTML 页面中包含其他文件的内容。
• 优势: 简单易用，服务器端动态组装，减少重复代码。
• 劣势: 需要服务器支持 SSI，例如 Apache、Nginx 等。 如果你的服务器不支持 SSI，则无法使用此方法。
• 使用方法: 在公共部分文件（例如 header.html、footer.html）创建好之后，在主 HTML 文件中使用 SSI 指令引入：

<!--#include virtual="/path/to/header.html" -->

<main>
  <!-- 主体内容 -->
</main>

<!--#include virtual="/path/to/footer.html" -->

• 配置 (Apache 示例): 需要在 Apache 配置文件中启用 Includes 以及 IncludeOptions。 例如，在 .htaccess 文件或 httpd.conf 文件中添加以下配置：

Options +Includes
AddType text/html .html
AddOutputFilter INCLUDES .html

2. 使用 iframe:

• 原理: 使用 <iframe> 标签嵌入公共部分的 HTML 文件。
• 优势: 简单，所有浏览器都支持。
• 劣势: SEO 不友好，iframe 的内容与主页面是独立的，搜索引擎可能无法正确索引 iframe 中的内容。 较难控制 iframe 的样式和布局，可能会出现滚动条或高度不合适的问题。 性能略低于 SSI。
• 使用方法:

<iframe src="/path/to/header.html"></iframe>

<main>
  <!-- 主体内容 -->
</main>

<iframe src="/path/to/footer.html"></iframe>

3. 使用 JavaScript:

• 原理: 使用 JavaScript 动态加载公共部分的 HTML 文件并插入到主页面中。
• 优势: 灵活，可以根据需要动态加载不同的公共部分。
• 劣势: 需要编写 JavaScript 代码，增加了页面加载的复杂性。 如果 JavaScript 被禁用，则公共部分无法加载。 SEO 方面，需要确保搜索引擎能够正确抓取 JavaScript 加载的内容。
• 使用方法:

<div id="header"></div>

<main>
  <!-- 主体内容 -->
</main>

<div id="footer"></div>

<script>
  fetch('/path/to/header.html')
    .then(response => response.text())
    .then(html => {
      document.getElementById('header').innerHTML = html;
    });

  fetch('/path/to/footer.html')
    .then(response => response.text())
    .then(html => {
      document.getElementById('footer').innerHTML = html;
    });
</script>

4. 手动复制粘贴:

• 原理: 直接将公共部分的代码复制粘贴到每个页面中。
• 优势: 最简单的方法，不需要任何服务器配置或额外的代码。
• 劣势: 维护困难，如果需要修改公共部分，则需要修改所有页面。 代码冗余，增加文件大小。 强烈不推荐这种方式。

推荐方案:

如果你的服务器支持 SSI，那么 SSI 是最简单和高效的解决方案。 如果服务器不支持 SSI，那么使用 JavaScript 是比较灵活的选择，但需要注意 SEO 和 JavaScript 禁用的情况。 尽量避免使用 iframe 和手动复制粘贴。

选择哪种方法取决于你的具体需求和服务器环境。 建议根据实际情况选择最合适的方案。