外部 HTML ファイルを HTML ページに導入するソリューション-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

外部 HTML ファイルを HTML ページに導入するソリューション

(*-*)浩

Nov 02, 2019 pm 03:09 PM

html

通常の静的 HTML 開発プロセスでは、フレームワークを使用する必要はありません。最も基本的な方法でいくつかの静的ページを書きたいだけです。ただし、HTML には include 構文がありません。それぞれのパブリック部分ページは手動でコピーして貼り付ける必要があります。これは非常に非科学的です...

外部 HTML ファイルを HTML ページに導入するソリューション

オンラインで次の解決策を読みました: (推奨される調査: html チュートリアル )

オプション 1: html ファイルを js ファイルに変換し、それを読み込んでページの読み込み時にレンダリングを実行します。

オプション 2:参照用の iframe タグ

オプション 3: gulp プラグイン gulp-html-import を使用する

3 番目のオプションをお勧めします。これも非常に便利です。手順は次のとおりです:

1. npm install gulp -D

2. npm install gulp-html-import -D

3. ディレクトリ構造:

    |
    -- html-import
    |   |
    |   -- components
    |   |    |
    |   |    -- header.html
    |   |    |
    |   |    -- footer.html
    |   |
    |   -- index.html
    |   -- gulpfile.js

ログイン後にコピー

4. gulpfile.js

   var gulp = require(&#39;gulp&#39;);
   var htmlImport = require(&#39;gulp-html-import&#39;);
   
   gulp.task(&#39;import&#39;, function () {
       gulp.src(&#39;./*.html&#39;)
          .pipe(htmlImport(&#39;./components/&#39;))
          .pipe(gulp.dest(&#39;dist&#39;)); 
   })

ログイン後にコピー

5、index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gulp-html-import Example</title>
</head>
<body>
    @import "header.html"
    <p>Hello World</p>
    @import "footer.html"
</body>
</html>
# 使用标签@import "XXX.html"引入公共页面

ログイン後にコピー

6、header.html

<!-- header.html -->

<h1>I am the header</h1>

ログイン後にコピー

8、gulp import gulp を実行してページをマージしますそして最後に dist ディレクトリ

9./dist/index.html

<!-- /dist/index.html -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gulp-html-import Example</title>
</head>
<body>
    <h1>I am the header</h1>
    <p>Hello World</p>
    <h1>I am the footer</h1>
</body>
</html>

ログイン後にコピー

を生成します

以上が外部 HTML ファイルを HTML ページに導入するソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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