包含(处理)HTML的最简单方法包括

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 协议》,转载必须注明作者和本文链接
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!