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

(*-*)浩
Freigeben: 2019-11-14 15:15:15
Original
3467 Leute haben es durchsucht

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
Nach dem Login kopieren

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')); 
   })
Nach dem Login kopieren

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"引入公共页面
Nach dem Login kopieren

6. header.html

<!-- header.html -->

<h1>I am the header</h1>
Nach dem Login kopieren

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>
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage