ホームページ > 記事 > ウェブフロントエンド > HTML コードの再利用 practice_html/css_WEB-ITnose
HTML コードの再利用 practice_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:39:431611ブラウズ
はじめに
通常、私たちが作成するいくつかのページでは、デザイン図面からいくつかの類似点があることがわかります。例: ヘッダー、下部、サイドバーなど。固定ページを作成する学生の場合、ページ数が増えて共通部分に修正が必要な箇所があった場合、この繰り返し部分をコピーして新しいページに貼り付けるだけで済みます。ただし、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 メソッドを示していますが、少し大きすぎたり小さかったりするように思えるかもしれません。興味のある学生は、テンプレートのいくつかの方法について詳しく学ぶことができます。
まとめ
上記のツールやテンプレートを使えば、画像を切り取って固定ページを作成する人でも開発効率が大幅に向上し、公開部分の修正に悩む必要がなくなりました。そうすることで、残りの時間を女の子のナンパ（逃走）に費やすことができます。
何か良いツールや提案がありましたら、連絡していただければ幸いです。皆さんも励みにしましょう。