Maison > Article > interface Web > Introduction détaillée aux pratiques de réutilisation du code HTML
Habituellement, certaines des pages que nous réalisons, nous pouvons voir à partir des dessins de conception qu'il existe des similitudes. Par exemple : en-tête, bas, barre latérale, etc. Si vous êtes un étudiant qui crée une page statique, vous ne pouvez copier et coller ces parties répétées sur une nouvelle page que si le nombre de pages augmente et qu'il y a des zones à réparer dans les parties communes. Cependant, plus de 10 pages utilisent ce code public html
. Ne serait-il pas gênant de le modifier ?
Pour les étudiants back-end, ils peuvent le diviser via des modèles. Cela peut améliorer la réutilisabilité et la maintenabilité du code. Mais pour les étudiants qui créent simplement des pages statiques à partir de dessins de conception, html
ne propose pas de méthode comme les modèles html
. Mais vous ne souhaitez pas utiliser de modèles back-end, alors les outils suivants que je vais vous présenter pourront peut-être vous aider. include
, qui fournit une méthode gulp
qui nous permet de l'utiliser comme un back- modèle de fin. Les parties publiques sont séparées. Et la méthode include
fournie comporte de nombreux éléments de configuration. Pour plus de détails, vous pouvez consulter gulp-file-include. include
pour comprendre rapidement. Nous devons d'abord installer demo
et gulp
. gulp-file-include
npm install -g gulp mkdir gulp-file-include && cd gulp-file-include npm install gulp --save-dev npm install gulp-file-includeAprès l'installation, organisons simplement le répertoire des fichiers :
|-node_modules|-src // 生产环境的 html 存放文件夹 |-include // 公共部分的 html 存放文件夹 |-*.html |-dist // 编辑后的 html 文件 gulpfile.jsDans le
nouvellement créé, configurez gulpfile.js
: gulp-file-include
var gulp = require('gulp');var fileinclude = require('gulp-file-include'); gulp.task('fileinclude', function() { gulp.src('src/**.html') .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest('dist')); });Créez ensuite deux
fichiers, à savoir l'en-tête et le bas : html
header.html
<h1>这是 header 的内容</h1>
footer.html
<h1>这是 footer 的内容</h1>Enfin, créez un nouveau
et ajoutez le html
et le header
que vous souhaitez utiliser à footer
. include
layout.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> @@include('include/header.html') <p> 这是 layout 的内容 </p> @@include('include/footer.html')</body></html>Enfin, revenez à l'outil de ligne de commande et exécutez
: gulp fileinclude
sous le répertoire dist
, qui a finalement été compilé. layout.html
code que vous écrivez plus maintenable et réutilisable. html
est simple et facile à utiliser. C'est un bon outil pour les étudiants qui ne souhaitent pas utiliser de modèles. Mais pour les étudiants qui sont familiers avec les modèles front-end, nous pouvons également utiliser des modèles pour obtenir gulp-file-include
la maintenabilité et la réutilisabilité du code. Ensuite, j'utiliserai un modèle html
que j'utilise couramment pour expliquer comment séparer ces parties publiques des fichiers ejs
. html
. Supprimez ensuite le dossier ejs
et supprimez tous les fichiers node_modules
sous le dossier dist
. html
, vous devez remplacer les noms de suffixe des fichiers ejs
dans src
par html
. L'outil pour compiler .ejs
fichiers dans ejs
utilise toujours html
. Installez simplement gulp
et vous avez terminé. gulp-ejs
npm install gulp --save-dev npm install gulp-ejs --save-devModifiez ensuite le fichier
: gulpflie.js
var gulp = require('gulp');var ejs = require('gulp-ejs'); gulp.task('ejs', function() { gulp.src('src/**.ejs') .pipe(ejs()) .pipe(gulp.dest('dist')); });Modifiez ensuite le fichier
: layout.ejs
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title></head><body> <%-include include/header %> <p> 这是 layout 的内容 </p> <%-include include/footer %> </body> </html>Enfin, utilisez l'outil de ligne de commande Exécutez
à l'intérieur et consultez le fichier gulp ejs
compilé dans le répertoire dist
. Et c'est fini. layout.html
cette méthode, qui peut paraître un peu lourde mais de peu d'utilité. Les étudiants intéressés peuvent en apprendre davantage sur certaines méthodes de modèles. include
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!