Maison > Article > interface Web > Solution pour introduire des fichiers HTML externes dans les pages HTML
Solution pour introduire des fichiers HTML externes dans les pages HTML
- (*-*)浩original
- 2019-11-02 15:09:453421parcourir
Dans le processus de développement HTML statique ordinaire, il n'est pas nécessaire d'utiliser un framework. Je veux juste écrire quelques pages statiques de la manière la plus basique. Cependant, il n'y a pas de syntaxe d'inclusion dans HTML. la page doit être copiée et collée manuellement , ce n'est vraiment pas scientifique...
J'ai lu les solutions suivantes en ligne : (Étude recommandée : tutoriel html)
Option 1 : Convertir les fichiers html en fichiers js, puis les charger pour effectuer le rendu lorsque la page est chargée
Option 2 : Utiliser des balises iframe pour référence
Option 3 : Utiliser le plug-in gulp gulp-html-import
Je recommande la troisième option, qui est également très pratique à utiliser . Voici les étapes :
1. npm install gulp -D
2. npm install gulp-html-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. et enfin générer le répertoire dist 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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!