一个项目写很多的纯静态页面，有公共的部分（例如头和尾）你是怎么提取公用的？

在前端开发中，当需要处理包含许多纯静态页面并且有公共部分（如头部和尾部）的项目时，有几种常见的策略来提取和重用这些公共组件。以下是一些建议的方法：

1. 使用服务器端包含（Server-Side Includes, SSI）:
   如果你的服务器支持SSI，你可以在HTML中使用特殊的指令来包含其他文件的内容。例如，Apache服务器支持使用<!--#include file="header.html" -->来包含头部文件。这种方法简单直接，但依赖于服务器配置，且不是纯前端解决方案。

2. 使用PHP或其他后端模板引擎:
   如果你正在使用PHP、Node.js（如Express框架与EJS、Pug等模板引擎）、Ruby on Rails、Django等后端技术，你可以利用这些技术的模板引擎功能来包含公共部分。例如，在PHP中，你可以使用include 'header.php';来包含头部文件。

3. 使用前端模板引擎:
   前端模板引擎（如Handlebars, Mustache, Lodash Templates等）允许你在客户端动态地组合HTML片段。你可以定义头部和尾部的模板，并在每个页面中引用它们。这种方法使你的HTML保持干净，并将逻辑与标记分离。

4. 使用JavaScript进行DOM操作:
   你可以编写JavaScript代码来动态地加载和插入头部和尾部的内容。例如，使用fetch API或XMLHttpRequest来获取HTML片段，然后使用innerHTML或DOM API将其插入到页面中。这种方法更加灵活，但可能增加页面加载时间和复杂性。

5. 使用单页应用（Single-Page Application, SPA）框架:
   如果你正在构建一个SPA，那么像React、Vue或Angular这样的框架会提供组件化的方法来管理你的UI。在这些框架中，你可以创建可重用的头部和尾部组件，并在需要的地方导入和渲染它们。这种方法非常适合复杂的、交互性强的应用。

6. 使用静态网站生成器:
   静态网站生成器（如Jekyll、Hugo、Gatsby等）允许你使用模板和标记语言来定义你的网站结构。你可以创建一个包含公共部分的布局模板，并在每个页面中使用这个布局。生成器会根据你的模板和内容生成静态的HTML文件。

选择哪种方法取决于你的项目需求、技术栈和偏好。对于简单的静态网站，服务器端包含或前端模板引擎可能是最快速的解决方案。对于更复杂的应用，使用SPA框架可能更合适。