HTML コードの再利用 practice_html/css_WEB-ITnose-htmlチュートリアル-php.cn

はじめに

gulp-file-include

フロントエンドテンプレート

まとめ

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML コードの再利用 practice_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:39 AM

はじめに

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

SF を例にとると、頭と尻はどのページでも同じです (一部のページは異なります):

↑頭↑
↓下↓

バックエンドの学生には、分割用のテンプレートを渡すことができます。これにより、HTML コードの再利用性と保守性が向上します。しかし、デザイン図面から静的なページを作成するだけの学生にとって、HTML にはテンプレートインクルードのようなメソッドが提供されていません。ただし、バックエンドテンプレートを使用したくない場合は、これから紹介する次のツールが役立つかもしれません。

gulp-file-include

最初に紹介したいのは、バックエンドテンプレートのようにパブリック部分を分離できる include メソッドを提供する gulp プラグインです。また、提供される include メソッドには多くの設定項目があります。詳細については、gulp-file-include を確認してください。

すぐに理解できるように、最初に gulp と gulp-file-include をインストールする必要があるので、小さなデモを書いてみましょう。

npm install -g gulpmkdir gulp-file-include && cd gulp-file-includenpm install  gulp --save-devnpm install gulp-file-include

ログイン後にコピー

インストール後、単純にファイルディレクトリを整理しましょう:

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

ログイン後にコピー

新しく作成した 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'));});

ログイン後にコピー

次に、2 つの新しい HTML ファイルを作成します (先頭に 1 つ、最後に 1 つ) ：

header.html

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

ログイン後にコピー

footer.html

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

ログイン後にコピー

最後に、新しい HTML を作成し、使用するヘッダーとフッターを含めます。

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>

ログイン後にコピー

最後にコマンドラインツールに戻り、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-devnpm install gulp-ejs --save-dev

ログイン後にコピー

次のステップは、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'));});

ログイン後にコピー

次に、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 メソッドを示していますが、少し大きすぎたり小さかったりするように思えるかもしれません。興味のある学生は、テンプレートのいくつかの方法について詳しく学ぶことができます。