HTMLを処理する最も簡単な方法が含まれます

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

 ...

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

   コンテンツ

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

...</includs>

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

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

PHPを使用します

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

 ...

   

   コンテンツ

   

...

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

Gulpを使用します

サーバー側が含まれるよりもさらに高速なものは何ですか？インクルードがサーバー上にある前に前に前処理されている場合。 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（ './'））;
}）;

この特定のプラグインには、含まれる変数を渡すことができる派手な機能があるように見え、データ駆動型コンポーネントをほとんど作成できるようにします。

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

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

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

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

 ...

   

   コンテンツ

   

...

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

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

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

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

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

 {{> mypartial}}

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

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

パグを使用します

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

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

   Pコンテンツ

   ./footer.htmlを含める "

   ...

次に、Gulp-Pugのようなものでそれを実行します。

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が組み込まれています。あなたが実際に小さなサイトを構築しているなら、あなたにとって良いかもしれません。

ajaxを使用します

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

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

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

 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といえば、ほぼあらゆる種類のJavaScriptフレームワークを使用してサイトを構築する場合、コンポーネントを介して構築することは一種の主要な取引であり、他のファイルに含めたい部分を破ることは問題ありません。 「./header.js」からのある種のインポートヘッダー。

は、React Landにある領土です。

iframesを使用します

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

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

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

しかし、Scott Jehlはクールなアイデアを文書化しました。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は大きなものなので、ここでそれを呼び出していますが、静的サイトジェネレーターの面積があり、誰でもできることを賭けています。

Sergeyを使用してください

OK、私はそれが新しくて超焦点を絞っているので、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構成が必要です。仕事のデモを得るために最善を尽くしましたが、それほど運はありませんでした。

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

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

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

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

CodeKitを使用します

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

 ...

   

   コンテンツ

   

...

DreamWeaverを使用してください

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

聖なるがらくた

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

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

以上がHTMLを処理する最も簡単な方法が含まれますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。