L'éditeur suivant vous apportera un exemple d'implémentation d'include pour introduire du code public dans une page statique. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un coup d'œil.
Le front-end de notre entreprise a toujours utilisé la fonction include de PHP pour introduire des codes courants tels que l'en-tête et le pied de page, comme suit :
<!-- index.php -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<?php include('header.php'); ?>
<p>页面主体部分</p>
<?php include('footer.php'); ?>
</body>
</html>
Copier après la connexion
<!-- header.php -->
<header>这是头部</header>
Copier après la connexion
<!-- footer.php -->
<footer>这是底部</footer>
Copier après la connexion
Jusqu'à récemment, un projet nécessitait de créer une application Web, ce qui était réalisé via HBuilder. Les pages statiques sont emballé dans APP, ce qui me pose un problème.
S'il s'agit d'un petit projet, copiez-le simplement et collez-le manuellement plusieurs fois. Cependant, s'il y a beaucoup de pages, la solution copier-coller est évidemment peu fiable et le coût de maintenance est élevé.
Après avoir vérifié de nombreuses informations, j'ai finalement décidé d'utiliser gulp pour résoudre le problème. Les opérations spécifiques sont les suivantes :
Installer gulp et gulp-. file-include
Créez d'abord un nouveau dossier, localisez l'emplacement du dossier dans le terminal, puis initialisez npm
npm init
Copier après la connexion
Ensuite, installez gulp
npm install gulp --save-dev
Copier après la connexion
Ensuite, installez gulp-file-include
npm install gulp-file-include --save-dev
Copier après la connexion
2. Créez et configurez gulpfile.js
Ensuite, nous créons manuellement un nouveau fichier js nommé gulpfile et y écrivons le code suivant :
var gulp = require('gulp');
var fileinclude = require('gulp-file-include');
gulp.task('fileinclude', function () {
// 适配page中所有文件夹下的所有html，排除page下的include文件夹中html
gulp.src(['page/**/*.html', '!page/include/**.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('dist'));
});Copier après la connexion
3. Créez la structure de répertoires du projet et ajoutez le code de test
La structure globale des répertoires du projet devrait être comme ceci
app
page
include
header.html
footer.html
index.html
gulpfile.js
package.json
Copier après la connexion
Ensuite, nous ajoutons le code de test. Il n'y a pas grand chose à dire sur header.html et footer.html. L'essentiel est que index.html soit payant. attention à la manière dont il est introduit. Le code est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
@@include('include/header.html')
<p>页面主体部分</p>
@@include('include/footer.html')
</body>
</html>
Copier après la connexion
4. Tapez le code suivant dans le terminal pour voir l'effet d'exécution
Vous constaterez qu'il existe un dossier dist supplémentaire avec un fichier index.html dans gulp-file-include nous a aidé à générer le fichier index.html compilé final.
gulp fileinclude
Copier après la connexion
Peut-être que vous pouvez déjà tirer des conclusions. Dans gulpfile.js, nous pouvons définir manuellement l'emplacement du fichier final généré, qui est cette phrase
gulp.dest('dist')
Copier après la connexion
5. Compilation automatique
Le problème de l'introduction du code public dans les pages statiques a été résolu, mais à chaque fois que vous écrivez le code source html, vous devez y aller au terminal et exécutez-le manuellement. L'opération de compilation est toujours très gênante, alors les fichiers peuvent-ils être automatiquement compilés ? La réponse doit être oui.
gulp a une méthode de surveillance, qui consiste à surveiller si le fichier a changé. Il suffit de modifier légèrement le fichier gulpfile.js et d'ajouter un morceau de code de surveillance, comme suit :
Après l'écriture, il suffit d'exécuter
var gulp = require('gulp');
var fileinclude = require('gulp-file-include');
gulp.task('fileinclude', function () {
// 适配page中所有文件夹下的所有html，排除page下的include文件夹中html
gulp.src(['page/**/*.html', '!page/include/**.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('dist'));
});
gulp.task('watch', function () {
gulp.watch('page/**/*.html', ['fileinclude']);
});Copier après la connexion
Chaque fois que nous enregistrons le code source html, gulp nous aidera automatiquement à le compiler.
gulp watch
Copier après la connexion
Jusqu'à présent, le problème de la façon d'implémenter l'inclusion dans une page statique et d'introduire du code public a été résolu avec succès. Enfin, les informations pertinentes sont jointes.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
