包含(处理)HTML的最简单方法包括
0 / 0 / 创建于 4年前
王子飞 的个人博客
HTML从来没有任何方法可以在其中包含其他HTML文件，这让我感到非常惊讶。似乎也没有任何东西可以解决这个问题。我说的是直接包含，例如获取一部分HTML并将其直接放入另一个。例如，整个互联网的大部分用例，所有页面都包含一个页眉和页脚：
...
<body>
<include src="./header.html"></include>
Content
<include src="./footer.html"></include>
</body>
...顺便说一下，那不是真的。我只是希望如此。
人们一直在寻找其他语言来为他们解决这个问题。从某种意义上说，它是HTML预处理。在预处理CSS之前很久，我们就使用工具来操纵HTML。而且我们仍然如此，因为包含的想法在世界上几乎每个网站上都很有用。
使用PHP
您可以改用PHP吗？
...
<body>
<?php include "./header.html" ?>
Content
<?php include "./footer.html" ?>
</body>
...这将在服务器级别执行包含，使请求在服务器上的文件系统级别发生，因此它应该比客户端解决方案快得多。
使用 gulp
有什么比服务器端包含的更快？Gulp有多种可以做到这一点的处理器。一种是gulp-file-include。
看起来像这样：
...
<body>
@@include('./header.html')
Content
@@include('./footer.html')
</body>
...您将像这样处理它：
var fileinclude = require('gulp-file-include'),
gulp = require('gulp');
gulp.task('fileinclude', function() {
gulp.src(['index.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('./'));
});看起来这个特定的插件具有精美的功能，您可以在其中将变量传递给include，从而可以制作很少的数据驱动组件。
使用 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>
...使用 Pug
Pug是HTML预处理程序，它具有HTML的全新语法，简洁得多。
...
body
include ./header.html"
p Content
include ./footer.html"
...然后用gulp-pug之类的东西运行它。
使用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框架来构建网站，那么通过组件进行构建都是其中的主要任务，并且不希望破坏要包含在其他文件中的部分。
使用iframe
<body>
<iframe src="./header.html"></iframe>
Content.
<iframe src="./footer.html"></iframe>
</body>但是这些iframe中的内容没有共享相同的DOM，所以这有点奇怪，更不用说样式缓慢且笨拙了（因为iframe不知道其内容的高度）。
使用 Jekyll
Jekyll是基于Ruby的静态网站生成器，其中包含include。您将包含/_includes/文件包含在该文件夹中，然后：
<body>
{% include header.html %}
Content.
{% include footer.html %}
</body>Jekyll是一个很大的公司，所以我在这里称呼它，但是有大量的静态站点生成器，我敢打赌它们中的任何一个都可以做。
转:The Simplest Ways to Handle HTML Includes
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号