javascript - 静态页面Demo项目，如何将header和footer 像PHP一样 include？

Question

静态页面Demo项目，如何将header和footer 像PHP一样 include？

Answer 1

最简单的用SSI！

Apache httped和Nginx都有配置SSI的方法。

SSI不仅能够设置简单包含，还有变量指令等，做demo足够了。至于Nginx和Apache httped分别如何配置，请百度，不再赘述。

另外推荐一款基于nodejs、gulp的自动化插件 fas ，已集成支持SSI的http服务器 ， 集成node-sass：

https://github.com/fas-team/fas

Answer 2

最简单是用iframe

<IFRAME NAME="header_frame" width=100% height=30 marginwidth=0 marginheight=0 SRC="thefooter.html" ></IFRAME> 

Answer 3

你可以试一下shtml，就是常说的服务器端包含（SSI）。
我以前就是用这种方法来做的个人网站，效果不错。
以下引用百度百科

---

主要有以下几种用途：
1．显示服务器端环境变量<#echo>
2．将文本内容直接插入到文档中<#include>
3．显示WEB文档相关信息<#flastmod #fsize> (如文件制作日期/大小等)
4．直接执行服务器上的各种程序<#exec>(如CGI或其他可执行程序)
5．设置SSI信息显示格式<#config>(如文件制作日期/大小显示方式) 高级SSI可设置变量使用if条件语句。

Answer 4

可以用jquery的load方法，直接将需要的文件加载到页面中。
$('className').load('page/header.html');

Answer 5

可以试一下：https://github.com/vanetix/grunt-includes

Answer 6

用前端模板配合js

Answer 7

使用fis。有html嵌入功能，可以如下使用。

<link rel="import" href="demo.html?__inline">

Answer 8

angularjs

Answer 9

grunt+handlebars可以实现

Answer 10

用node打包工具，将每个页面拼起来