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

Home

Web Front-end

HTML Tutorial

Solution to introduce external HTML files into HTML pages

(*-*)浩

Nov 02, 2019 pm 03:09 PM

html

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!

Statement of this Website

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