HTML从来没有任何方法可以在其中包含其他HTML文件。似乎也没有什么可以解决它的问题。比如拿一大块HTML并把它直接放到另一个。例如，整个互联网的大部分用例，包含所有页面的页眉和页脚：
理想的情况是这样子：
图片1.png
顺便说一句，这不是真的。这只是理想中的罢了。
人们一直在寻找其他语言来永远解决这个问题。从某种意义上说，这是HTML预处理。早在我们预处理CSS之前，我们就使用工具来操作HTML。而且我们仍然如此，因为包含的概念对世界上几乎每个网站都很有用。
＃使用PHP
你可以用PHP吗？
...<body>
<?php include "./header.html" ?>
Content
<?php include "./footer.html" ?></body>...
这将在服务器级别执行include，使得它的请求发生在服务器上的文件系统级别，因此它应该比客户端解决方案快得多。
＃使用Gulp
什么比服务器端包括更快？如果include甚至在服务器上进行预处理。Gulp有各种各样的处理器可以做到这一点。一个是gulp-file-include。
这看起来像这样：
...<body>
@@include('./header.html')
Content
@@include('./footer.html')</body>
...
你会像下面这样处理它：
varfileinclude = require('gulp-file-include'),
gulp = require('gulp');
gulp.task('fileinclude', function() {
gulp.src(['index.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('./'));});
看起来这个特定的插件具有奇特的功能，您可以将变量传递给包含，从而可以制作少量数据驱动的组件。
＃使用Grunt
这就是grunt-bake插件的功能。您要配置Grunt来处理您的HTML：
grunt.initConfig({
bake: {
your_target: {
files: {
"dist/index.html": "app/index.html",
}
}
}});
然后你的HTML可以使用这个特殊的语法包括：
...<body>
*<!--(bake header.html)-->*
Content
*<!--(bake footer.html)-->*</body>
...
＃使用把手
把手有部分。
你注册他们：
Handlebars.registerPartial('myPartial', '{{name}}')
然后使用它们：
{{> myPartial }}
还有一些奇特的功能允许评估和传递数据。你仍然需要一个处理器来运行它，可能像gulp-handlebars。
说到使用花括号的模板语言...... Mustache 也有它们。
＃使用帕格
Pug是一个HTML预处理器，它有一个全新的HTML语法，有点简洁。它有包括虽然。
...
body
include ./header.html"
p Content
include ./footer.html"
...
然后用gulp-pug之类的东西运行它。
＃使用Nunjucks
我爱我一些Nunjucks！ Nunjucks有包括。你这样做：
...<body>
{% include "./header.html" %}
Content
{% include "./footer.html" %}</body>
...
如果你把它放在一个名为的文件中index.njk，你可以用一个简单的Node脚本处理它到index.html中，如下所示：
constnunjucks = require("nunjucks");constfs = require("fs");
fs.writeFile("index.html", nunjucks.render("index.njk"), function(err, data) {
if (err) console.log(err);
console.log("Compiled the Nunjucks, captain.");});
或者像gulp-nunjucks这样处理它。
11ty有Nunjucks内置，以及到目前为止提到的许多其他内容。如果你真的在建一个小网站，可能对你有好处。
＃使用Ajax
说你有......
<body>
<header></header>
Content.
<footer></footer></body>
您可以从相应的文件中获取页眉和页脚的内容并转储内容。
fetch("./header.html")
.then(response => {
return response.text()
})
.then(data => {
document.querySelector("header").innerHTML = data;
});fetch("./footer.html")
.then(response => {
return response.text()
})
.then(data => {
document.querySelector("footer").innerHTML = data;
});
说到JavaScript ......如果你使用几乎任何类型的JavaScript框架构建你的网站，那么构建组件就是那里的主要交易，而你想要包含在其他文件中的部分应该没问题。某种形式，import Header from "./header.js";并且<Header />是你在React土地上的领土。
#使用****iframes
你可以这样做：
<body>
<iframe src="./header.html"></iframe>
Content.
<iframe src="./footer.html"></iframe>
</body>
但是那些iframe中的内容并不共享相同的DOM，所以它有点奇怪，更不用说风格缓慢而笨拙（因为iframe不知道其内容的高度）。
Scott Jehl记录了一个很酷的想法：你可以让iframe将自己的内容注入父页面，然后自行删除。
<body>
<iframe src="header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
Content.
<iframe src="footer.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
</body>
＃使用Jekyll
<u>Jekyll</u>是一个基于Ruby的静态站点生成器，包含。您将包含在/_includes/文件夹中，然后：
<body>
{% include header.html %}
Content.
{% include footer.html %}</body>
Jekyll是一个很大的，所以我在这里打电话给它，但是有很多静态站点生成器，我打赌他们中的任何一个都可以做。
#使用****Sergey
好的，我会再召集一次SSG，因为它是新的，超级专注。Sergey有一个Web组件样式格式：
<body>
<sergey-import src="header" />
Content.
<sergey-import src="footer" /></body>
你会命名文件header.html，并footer.html把他们的/includes/，然后它会做出与构建包括处理在运行NPM脚本有你这样做。
#使用**** Apache SSI
Apache，一个超级常见的Web服务器，可以做包括。你这样做：
<body>
*<!--#include file="./header.html" -->*
Content
*<!--#include file="./footer.html" -->*
</body>
但是你需要正确的Apache配置来允许东西。我尽力去做一个有效的演示，但运气不好。
尝试去.htaccess在Apache服务器上的一个文件夹中使用并翻转我认为正确的东西：
Options +Includes
AddType text/html .html
AddOutputFilter INCLUDES .html
我确信有一些方法可以使它工作，如果你这样做，它有点整洁，它需要零其他依赖
#使用**** CodeKit
仅限Mac，但CodeKit有一种称为Kit的特殊语言，它处理的内容中有90％是HTML包含的。它使用特殊的HTML注释：
...<body>
*<!-- @import "./header.html" -->*
Content
*<!-- @import "./footer.html" -->*</body>
...
你还能想出其他方法吗，一起交流吧～
本文译自https://css-tricks.com/the-simplest-ways-to-handle-html-includes
网友评论