Heim > Artikel > Web-Frontend > 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:453422Durchsuche
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...
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.js4. 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> generierenDas 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!