HTML コードの再利用方法の詳細な紹介-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

黄舟

May 27, 2017 pm 02:30 PM

はじめに

通常、私たちが作成するいくつかのページでは、デザイン図面からいくつかの類似点があることがわかります。例: ヘッダー、下部、サイドバーなど。固定ページを作成する学生の場合、ページ数が増えて共通部分に修正が必要な箇所があった場合、この繰り返し部分をコピーして新しいページに貼り付けるだけで済みます。ただし、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 id="这是-nbsp-header-nbsp-的内容">这是 header 的内容</h1>

footer.html

<h1 id="这是-nbsp-footer-nbsp-的内容">这是 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：構造、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、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。