纯手工写的静态页面，十个页面共享 header/footer，怎么同步？

闲聊灌水
1

有没有现成的工具把文件 index.html 的 header 的内容复制，替换到 about.html 的 header

$ html-node-replace -from index.html header -to about.html header

有 Emacs 命令的话也行。

2
1 个赞
3

之前有分别 gulp-include-file 和 pug 模版，都能用但是感觉有些过时了，有考虑过写个命令行工具解析修改 HTML，还有用 fetch + innerHTML，不知道效果如何，打算都先试一试。

4

fetch 不太好处理跨域问题x（其他还好

5

header footer 用 iframe

6

其实我想问为啥非要用静态页面，静态页面感觉限制太多，很多功能实现起来太麻烦，n个页面共享header,footer直接用动态语言的include不是方便很多

include "./public/header.html";
# ……
include "./public/footer.html";
7

该换下使用姿势了，模板引擎就是解决这个问题的。

  • 如果是简单的页面，推荐 https://ejs.co/ ，然后封装个 node 脚本来生成最终的 html
  • 如果复杂的页面，直接使用 hugo 来渲染
8

确实，而且改了 header/footer 的话，每次提交都会产生一大堆的 diff。

这个我还真没认真考虑过，虽然之前也有人跟我提过，等下我试试。

之前分别用过 Gulp、Webpack、Pug 模块，感觉现在前端工具太吓人了（特别是 webpack，理所当然地以为也适合用在非常简单的多页网站上，结果折腾来折腾去也没搞定），所以索性想保持简单看看，什么东西都不用，node.js 都没用，全部手写，反正是非常传统的 前端模版 + PHP后台 项目，没想到简单不一定就容易，一直复制粘贴实在不大可取，Emacs 的 Web 开发支持也不够好。

9

需求简单可以试试parcel作为webpack的替代，我用过一次，让它跑起来真的比webpack容易太多了…… 它也支持pug：https://parceljs.org/pug.html

10

parcel / webpack 好像都是用在重 JS 的单页面项目，我的项目是传统的多页面静态 HTML，很少 JS。

11

我对前端那一套工具也不熟，ejs 是我很早就开始用的工具，比较轻量，你可以试试，参考下面下面这个示例：

12

话说你用了php？那拼装html不是直接php include就好了嘛？PHP: include - Manual

13

后端不是我写的，我只写个前端，得弄完再给后端。