HTMLが他のHTMLファイルを含める方法がなかったことは、非常に驚??くべきことです。また、地平線上にそれに対処するものは何もないようには見(jiàn)えません。私は、HTMLの塊を取り、それを別のものにまっすぐに落とすなど、まっすぐなアップについて話しています。たとえば、インターネット全體の多くのユースケース、すべてのページに含まれるヘッダーとフッターが含まれています。

 ...

   <includs src="./%20header.html"> 

   コンテンツ

   <include src="./%20footer.html"> </include>

...</includs>

ちなみに、それは本物ではありません。私はそれがあったことを望みます。

人々は、この問(wèn)題を永遠(yuǎn)に解決するために他の言語(yǔ)を探していました。ある意味では、HTMLの前処理です。 CSSを前処理するずっと前に、HTMLを操作するためにツールを使用していました。そして、私たちはまだそうです。なぜなら、含まれるアイデアは世界のほとんどすべてのウェブサイトで役立つからです。

PHPを使用します

代わりにPHPを使用できますか？

 ...

   

   コンテンツ

   

...

これにより、サーバーレベルで含まれることを?qū)g行し、サーバーのファイルシステムレベルでリクエストを行うため、クライアント側(cè)のソリューションよりもはるかに速くなります。

Gulpを使用します

サーバー側(cè)が含まれるよりもさらに高速なものは何ですか？インクルードがサーバー上にある前に前に前処理されている場(chǎng)合。 Gulpには、これを行うことができるさまざまなプロセッサがあります。 1つはGulp-File-Includeです。

それは次のようになります：

 ...

   @@ include（ './ header.html'）

   コンテンツ

   @@

...

そして、あなたはそれを処理するでしょう：

 var fileclude = require（ 'gulp-file-include'）、
  gulp = require（ 'gulp'）;
 
gulp.task（ 'fileclude'、function（）{
  gulp.src（['index.html']）
    .pipe（fileclude（{
      プレフィックス： '@@'、
      ベースパス：「@file」
    }））
    .pipe（gulp.dest（ './'））;
}）;

この特定のプラグインには、含まれる変數(shù)を渡すことができる派手な機(jī)能があるように見(jiàn)え、データ駆動(dòng)型コンポーネントをほとんど作成できるようにします。

グラントを使用してください

これは、Grunt-Bakeプラグインが行うことです。 htmlを処理するようにgruntを構(gòu)成します：

 grunt.initconfig（{
    焼く：{
        your_target：{
            ファイル：{
                "dist/index.html"： "app/index.html"、
            }
        }
    }
}）;

その後、HTMLはこの特別な構(gòu)文を使用できます。

 ...

   

   コンテンツ

   

...

ハンドルバーを使用します

ハンドルバーには部分的なものがあります。

あなたはそれらを登録します：

 handlebars.registerpartial（ 'mypartial'、 '{{name}}'）

その後、それらを使用します：

 {{> mypartial}}

また、評(píng)価と渡されたデータを可能にするこの派手な機(jī)能もあります。おそらくGulp handlebarsのようなものを?qū)g行するには、プロセッサがまだ必要です。

巻き毛のブレースを使用するテンプレート言語(yǔ)といえば、口ひげも持っています。

パグを使用します

Pugは、HTML用のまったく新しい構(gòu)文を備えたHTMLプリプロセッサであり、これはもう少し簡(jiǎn)単です。ただし、含まれています。

 ...
體
   ./header.htmlを含める "

   Pコンテンツ

   ./footer.htmlを含める "

   ...

次に、Gulp-Pugのようなものでそれを?qū)g行します。

nunjucksを使用してください

私は私にいくつかのヌジュックが大好きです！ Nunjucksには含まれています。あなたはこのようにそれをするでしょう：

 ...

   {％include "./header.html"％}

   コンテンツ

   {％include "./footer.html"％}

...

それをindex.njkというファイルに配置すると、単純なノードスクリプトでindex.htmlに処理できます。

 const nunjucks = require（ "nunjucks"）;
const fs = require（ "fs"）;

fs.writefile（ "index.html"、nunjucks.render（ "index.njk"）、function（err、data）{
  if（err）console.log（err）;
  console.log（ "nunjucks、captainをコンパイルした。"）;
}）;

または、Gulp-Nunjucksのようなもので処理します。

11tyには、これまでに言及された他の多くのものとともに、Nunjucksが組み込まれています。あなたが実際に小さなサイトを構(gòu)築しているなら、あなたにとって良いかもしれません。

ajaxを使用します

あなたが持っていたと言う…

 
  
  <header> </header>
  
  コンテンツ。
  
   

それぞれのファイルからヘッダーとフッターの內(nèi)容を取得し、內(nèi)容をダンプすることができます。

 fetch（ "./ header.html"）
  .then（response => {
    RESPORSIN.TEXT（）を返します
  }）
  .then（data => {
    document.queryselector（ "header"）。innerhtml = data;
  }）;

fetch（ "./footer.html"）
  .then（response => {
    RESPORSIN.TEXT（）を返します
  }）
  .then（data => {
    document.queryselector（ "footer"）。innerhtml = data;
  }）;

JavaScriptといえば、ほぼあらゆる種類(lèi)のJavaScriptフレームワークを使用してサイトを構(gòu)築する場(chǎng)合、コンポーネントを介して構(gòu)築することは一種の主要な取引であり、他のファイルに含めたい部分を破ることは問(wèn)題ありません。 「./header.js」からのある種のインポートヘッダー。

iframesを使用します

あなたはこれを行うことができます：

 
  
  <iframe src="./%20header.html"> </iframe>
  
  コンテンツ。
  
  <iframe src="./%20footer.html"> </iframe>
  

しかし、これらのiframesのコンテンツは同じDOMを共有していないため、少し奇妙で、ゆっくりと厄介なスタイルは言うまでもありません（Iframesはコンテンツの高さを知らないため）。

しかし、Scott Jehlはクールなアイデアを文書(shū)化しました。iframeを親ページにIFrameに注入してから削除することができます。

 
  
  <iframe src="header.html" onload="this.before（（this.contentdocument.body || this.contentdocument）
  
  コンテンツ。
  
  <iframe src = " footer.html html data-line=""> <iframe src="include.html" onload="this.insertadjacenthtml（ 'afterend'、（this.contentdocument.body || this.contentdocument）.innerhtml）; this.remove（）"> </iframe></iframe>

Jekyllを使用してください

Jekyllisは、Rubyベースの靜的サイトジェネレーターです。 /_includes/folderに含まれることを保持します。

 
  {％header.html％を含む}
  
  コンテンツ。

  {％footer.html％を含む}

Jekyllは大きなものなので、ここでそれを呼び出していますが、靜的サイトジェネレーターの面積があり、誰(shuí)でもできることを賭けています。

Sergeyを使用してください

OK、私はそれが新しくて超焦點(diǎn)を絞っているので、1つのMoressgBecを呼び出します。SergeyhasWebコンポーネントスタイル形式：

 
  <sergey-import src="header"></sergey-import>

  コンテンツ。

  <sergey-import src="footer"></sergey-import>

filesheader.htmlandfooter.htmlandに名前を付けます。

Apache SSIを使用します

Apache、Super Duper Common Webサーバー、Candoが含まれます。あなたはこのようにそれをします：

 
		
  
  
  コンテンツ
  
  
  

ただし、ものを許可するには、適切なApache構(gòu)成が必要です。仕事のデモを得るために最善を盡くしましたが、それほど運(yùn)はありませんでした。

Apacheサーバー上のフォルダーを使用して、htaccesswithinを使用して、正しいものだと思ったものをめくりました。

オプションには含まれます

addType Text/html .html
AddOutputFilterが含まれています。html

しかし、それを機(jī)能させる方法があると確信しています。もしそうなら、他の依存関係がゼロであることはちょっとすてきです。

CodeKitを使用します

Macのみですが、kititプロセスと呼ばれるCodeKit Hasa特別言語(yǔ)では、そのポイントの90％がHTMLが含まれます。特別なHTMLコメントを使用します。

 ...

   

   コンテンツ

   

...

DreamWeaverを使用してください

笑JK。しかし、それは実際にはthing.dwts、babyです。

聖なるがらくた

それは多くの方法ですね。

私が一番上で言ったように、HTML自體がこれに直接対処していないことは私にとって非常に驚くべきことです。パフォーマンスがコード全體にネットワークを要求するステートメントを持つことは素晴らしいアイデアだと思うわけではありませんが、プラットフォームにはインラインなようです。 BundlingなしでES6のインポートを直接使用することも常に素晴らしいアイデアではありませんが、CSS內(nèi)でCSSをインポートすることは常に素晴らしいアイデアではありませんが、持っています。プラットフォームにネイティブの構(gòu)文がある場(chǎng)合、JavaScriptバンドラーがES6インポート形式をサポートするのと同じように、おそらく他のツールがそれをキーアウトするでしょう。

以上がHTMLを処理する最も簡(jiǎn)単な方法が含まれますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。