ホームページ > 記事 > ウェブフロントエンド > HTML コードの再利用方法の詳細な紹介

HTML コードの再利用方法の詳細な紹介

黄舟オリジナル: 2017-05-27 14:30:232207ブラウズ

はじめに

通常、私たちが作成するいくつかのページでは、デザイン図面からいくつかの類似点があることがわかります。例: ヘッダー、下部、サイドバーなど。固定ページを作成する学生の場合、ページ数が増えて共通部分に修正が必要な箇所があった場合、この繰り返し部分をコピーして新しいページに貼り付けるだけで済みます。ただし、10 ページ以上でこの公開 html コードが使用されています。改造するの面倒じゃないですか？ html代码。那修改起来不是很麻烦吗？

对于后端的同学而言，他们可以通过模版来进行拆分。这样做可以提高html代码的复用性和可维护性。但对于只是对设计图而制作成静态页面的同学而言他们，html没有提供像模版的include这种方法。但又不想使用到后端的模版，那么接下来的我介绍的几个工具也许可以帮助到你。

gulp-file-include

第一个我要介绍的是一个gulp的插件，他提供了一个include的方法让我们可以想后端模版一样把公共的部分分离出去。而且提供的include方法有许多配置项，详细可以去看看 gulp-file-include。

下面我们写一个小demo来快速的了解一下，我们需要先安装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

安装好之后，来简单的组织一下文件的目录：

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

在新建的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;));
});

接着新建两个html文件，分别是头部和底部：

header.html

<h1>这是 header 的内容</h1>

footer.html

<h1>这是 footer 的内容</h1>

最后在新建一个html，把要用到的header和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>

最后回到命令行工具里，执行gulp fileinclude：

看到编译完成之后，到dist目录一下有一个layout.html的文件，这就是最后编译出来的。

好了，上面的一个小实例也明白之后。也许能够在以后的工作中大大提供生产力，使得自己写的html代码更加具有维护性和可复用性。

前端模版

上面说道gulp-file-include简单而且易上手，对于不想使用模版的同学是一个很好的小工具。但是熟悉前端模版的同学来说，我们一样可以使用模版来做到html代码的维护性和可复用性。那么我就用一个我自己比较常用的ejs这个模版来说说一下如何分离那些公共部分的html文件。

把上一个例子的整个文件夹复制到一个新的地方，然后把名字修改为ejs。接着把node_modules文件夹给删除，dist文件夹下的html文件都删除。

用到ejs模版的话，需要把src里面的html文件的后缀名都修改成.ejs。把ejs文件编译成html的工具依旧是使用gulp。只需要安装gulp-ejs就可以了。

npm install gulp --save-dev
npm install gulp-ejs --save-dev

接着就是修改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;));
});

然后是修改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>

最后就是在命令行工具里面运行gulp ejs，在到dist目录下看到编译好的layout.html文件。就大功告成了。

其实模版具有许多强大的方法，而上面的例子主要还是演示include

バックエンドの学生の場合は、テンプレートを使用して分割できます。これにより、html コードの再利用性と保守性が向上します。ただし、デザイン図面から静的ページを作成するだけの学生の場合、html にはテンプレート include のようなメソッドが提供されていません。ただし、バックエンドテンプレートを使用したくない場合は、これから紹介する次のツールが役立つかもしれません。 🎜🎜gulp-file-include🎜🎜 最初に紹介したいのは、gulp プラグインです。これは、バックグラウンドを考えることができるように、include メソッドを提供します。終了テンプレートもパブリック部分を分離します。提供されている include メソッドには多くの設定項目があります。詳細については、gulp-file-include を確認してください。 🎜🎜すぐに理解できるよう、小さな demo を作成しましょう。まず gulp と gulp-file-include をインストールする必要があります。 🎜rrreee🎜 インストール後、ファイルディレクトリを簡単に整理しましょう: 🎜rrreee🎜 新しく作成した gulpfile.js で、gulp-file-include を構成します: 🎜rrreee 🎜次に、 2 つの新しい html ファイル、つまりヘッダーと下部: 🎜🎜header.html🎜rrreee🎜footer.html🎜rrreee🎜 最後に、新しい html を作成し、header と footer を include に追加します。 🎜🎜layout.html🎜rrreee🎜最後にコマンドラインツールに戻り、gulp fileinclude を実行します。 🎜🎜 コンパイルが完了したことを確認したら、 に移動します。 distディレクトリ内にファイル layout.html があり、これが最終的にコンパイルされたものです。 🎜🎜 さて、上記の小さな例を理解したら。これにより、作成した html コードの保守性と再利用性が向上し、将来の作業の生産性が大幅に向上する可能性があります。 🎜🎜フロントエンドテンプレート🎜🎜 gulp-file-include はシンプルで使いやすいと前述しましたが、テンプレートを使用したくない学生にとっては優れた小さなツールです。ただし、フロントエンドテンプレートに慣れている学生の場合は、テンプレートを使用して html コードの保守性と再利用性を実現することもできます。次に、html ファイルのパブリック部分を分離する方法について説明するためによく使用する ejs テンプレートを使用します。 🎜🎜前の例のフォルダー全体を新しい場所にコピーし、名前を ejs に変更します。次に、node_modules フォルダーを削除し、dist フォルダー内のすべての html ファイルを削除します。 🎜🎜 ejs テンプレートを使用する場合は、src 内の html ファイルのサフィックス名を .ejs。 <code>ejs ファイルを html にコンパイルするツールは、引き続き gulp を使用します。 gulp-ejs をインストールするだけです。 🎜rrreee🎜次のステップは、gulpflie.js ファイルを変更することです: 🎜rrreee🎜次に、layout.ejs ファイルを変更します: 🎜rrreee🎜最後に、 を実行します。コマンドラインツール >gulp ejs を実行し、dist ディレクトリに移動して、コンパイルされた layout.html ファイルを確認します。これで完了です。 🎜🎜実際、テンプレートには多くの強力なメソッドがあり、上の例では主に include メソッドを示しています。これは少し大きく見えるかもしれませんが、ほとんど役に立ちません。興味のある学生は、テンプレートのいくつかの方法について詳しく学ぶことができます。 🎜

以上がHTML コードの再利用方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML のフォームコンポーネントの詳細な紹介次の記事：HTML のフォームコンポーネントの詳細な紹介

続きを見る