Solution to introduce external HTML files into HTML pages-HTML Tutorial-php.cn

Solution to introduce external HTML files into HTML pages

(*-*)浩

Release： 2019-11-14 15:15:15

Original

3532 people have browsed it

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...

Solution to introduce external HTML files into HTML pages

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

Copy after login

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;)); 
   })

Copy after login

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"引入公共页面

Copy after login

6、header.html

<!-- header.html -->

<h1>I am the header</h1>

Copy after login

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>

Copy after login

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!