Solution pour introduire des fichiers HTML externes dans les pages HTML-tutoriel HTML-php.cn

Solution pour introduire des fichiers HTML externes dans les pages HTML

(*-*)浩

Libérer： 2019-11-14 15:15:15

original

3533 Les gens l'ont consulté

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

Solution pour introduire des fichiers HTML externes dans les pages HTML

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

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

Copier après la connexion

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;)); 
   })

Copier après la connexion

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"引入公共页面

Copier après la connexion

6.header.html

<!-- header.html -->

<h1>I am the header</h1>

Copier après la connexion

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>

Copier après la connexion

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!