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

ホームページ

ウェブフロントエンド

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 id="这是-header-的内容">这是 header 的内容</h1>

footer.html

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

まとめ

上記のツールやテンプレートを使えば、画像を切り取って固定ページを作成する人でも開発効率が大幅に向上し、公開部分の修正に悩む必要がなくなりました。そうすることで、残りの時間を女の子のナンパ（逃走）に費やすことができます。

何か良いツールや提案がありましたら、連絡していただければ幸いです。皆さんも励みにしましょう。

声明

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

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

See all articles