Maison >interface Web >tutoriel HTML >Introduction détaillée aux pratiques de réutilisation du code HTML

Introduction détaillée aux pratiques de réutilisation du code HTML

黄舟original: 2017-05-27 14:30:232224parcourir

Avant-propos

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

gulp-file-include

Le premier que je souhaite présenter est un plug-in

, 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

Écrivons un petit

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

Après l'installation, organisons simplement le répertoire des fichiers :

|-node_modules|-src // 生产环境的 html 存放文件夹    |-include // 公共部分的 html 存放文件夹    |-*.html 
|-dist // 编辑后的 html 文件
gulpfile.js

Dans le

nouvellement créé, configurez gulpfile.js : gulp-file-include

var gulp = require(&#39;gulp&#39;);var fileinclude  = require(&#39;gulp-file-include&#39;);

gulp.task(&#39;fileinclude&#39;, function() {
    gulp.src(&#39;src/**.html&#39;)
        .pipe(fileinclude({          prefix: &#39;@@&#39;,          basepath: &#39;@file&#39;
        }))
    .pipe(gulp.dest(&#39;dist&#39;));
});

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(&#39;include/header.html&#39;)    <p> 这是 layout 的内容 </p>

    @@include(&#39;include/footer.html&#39;)</body></html>

Enfin, revenez à l'outil de ligne de commande et exécutez

: gulp fileinclude

Après avoir vu que la compilation est terminé, allez dans Il y a un fichier

sous le répertoire dist, qui a finalement été compilé. layout.html

D'accord, maintenant que vous comprenez le petit exemple ci-dessus. Cela pourrait améliorer considérablement la productivité dans les travaux futurs, rendant le

code que vous écrivez plus maintenable et réutilisable. html

Modèle frontal

Comme mentionné ci-dessus

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

Copiez l'intégralité du dossier de l'exemple précédent vers un nouvel emplacement et changez le nom en

. Supprimez ensuite le dossier ejs et supprimez tous les fichiers node_modules sous le dossier dist. html

Si vous utilisez le modèle

, 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-dev

Modifiez ensuite le fichier

: gulpflie.js

var gulp = require(&#39;gulp&#39;);var ejs  = require(&#39;gulp-ejs&#39;);

gulp.task(&#39;ejs&#39;, function() {
    gulp.src(&#39;src/**.ejs&#39;)
        .pipe(ejs())
    .pipe(gulp.dest(&#39;dist&#39;));
});

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

En fait, les modèles disposent de nombreuses méthodes puissantes, et l'exemple ci-dessus démontre principalement

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Une introduction détaillée aux composants de formulaire en HTMLArticle suivant：Une introduction détaillée aux composants de formulaire en HTML

Articles Liés

Voir plus