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

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

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

有 Emacs 命令的话也行。

1 个赞

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

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

header footer 用 iframe

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

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

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

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

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

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

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

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

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

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

话说你用了php?那拼装html不是直接php include就好了嘛?https://www.php.net/manual/en/function.include.php

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