Home > Article > Web Front-end > Solution to introduce external HTML files into HTML pages

Solution to introduce external HTML files into HTML pages

(*-*)浩Original: 2019-11-02 15:09:453477browse

In the ordinary static HTML development process, there is no need to use a framework. I just want to write a few static pages in the most basic way. However, there is no include syntax in HTML. The public parts of each page must be copied and pasted manually. , it’s really unscientific...

I read the following solutions online: (Recommended study: html tutorial)

Option 1: Convert the html file to a js file, and then load it in to perform rendering when the page is loaded

##Option 2: Use the iframe tag for reference

Option 3: Use the gulp plug-in gulp-html-import

I recommend the third option, which is also very convenient to use. Here are the steps:

1. npm install gulp -D

2. npm install gulp-html-import -D

3. Directory structure:

    |
    -- html-import
    |   |
    |   -- components
    |   |    |
    |   |    -- header.html
    |   |    |
    |   |    -- footer.html
    |   |
    |   -- index.html
    |   -- gulpfile.js

4. gulpfile.js

   var gulp = require(&#39;gulp&#39;);
   var htmlImport = require(&#39;gulp-html-import&#39;);
   
   gulp.task(&#39;import&#39;, function () {
       gulp.src(&#39;./*.html&#39;)
          .pipe(htmlImport(&#39;./components/&#39;))
          .pipe(gulp.dest(&#39;dist&#39;)); 
   })

5、index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gulp-html-import Example</title>
</head>
<body>
    @import "header.html"
    <p>Hello World</p>
    @import "footer.html"
</body>
</html>
# 使用标签@import "XXX.html"引入公共页面

6、header.html

<!-- header.html -->

<h1>I am the header</h1>

8、gulp import Run gulp to merge the pages and finally generate the dist directory

9./dist/index.html

<!-- /dist/index.html -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gulp-html-import Example</title>
</head>
<body>
    <h1>I am the header</h1>
    <p>Hello World</p>
    <h1>I am the footer</h1>
</body>
</html>

The above is the detailed content of Solution to introduce external HTML files into HTML pages. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Tutorial on using HTML Object elementsNext article：Tutorial on using HTML Object elements

See more

Solution to introduce external HTML files into HTML pages

Related articles