ホームページ >ウェブフロントエンド >htmlチュートリアル >外部 HTML ファイルを HTML ページに導入するソリューション

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

(*-*)浩
(*-*)浩オリジナル
2019-11-02 15:09:453527ブラウズ

通常の静的 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('gulp');
   var htmlImport = require('gulp-html-import');
   
   gulp.task('import', function () {
       gulp.src('./*.html')
          .pipe(htmlImport('./components/'))
          .pipe(gulp.dest('dist')); 
   })

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 までご連絡ください。