Heim >Web-Frontend >HTML-Tutorial >Lösung zum Einfügen externer HTML-Dateien in HTML-Seiten

Lösung zum Einfügen externer HTML-Dateien in HTML-Seiten

(*-*)浩
(*-*)浩Original
2019-11-02 15:09:453530Durchsuche

Im normalen statischen HTML-Entwicklungsprozess ist es nicht erforderlich, ein Framework zu verwenden. Ich möchte jedoch nur ein paar statische Seiten in HTML schreiben Seite muss manuell kopiert und eingefügt werden, das ist wirklich unwissenschaftlich...

Lösung zum Einfügen externer HTML-Dateien in HTML-Seiten

Ich habe die folgenden Lösungen online gelesen: (Empfohlenes Studium: HTML-Tutorial)

Option 1: HTML-Dateien in JS-Dateien konvertieren und sie dann laden, um das Rendern beim Laden der Seite durchzuführen

Option 2: Iframe-Tags verwenden für Referenzen

Option 3: Verwenden Sie das Gulp-Plugin gulp-html-import

Ich empfehle die dritte Option, die auch sehr bequem zu verwenden ist . Hier sind die Schritte:

1. npm install gulp -D

2. npm install gulp-import -D

3

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

4. gulpfile.js

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

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 importieren, um die Seiten zusammenzuführen und schließlich das dist-Verzeichnis

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

Das obige ist der detaillierte Inhalt vonLösung zum Einfügen externer HTML-Dateien in HTML-Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

In Verbindung stehende Artikel

Mehr sehen