ホームページ > 記事 > ウェブフロントエンド > 外部 HTML ファイルを HTML ページに導入するソリューション
外部 HTML ファイルを HTML ページに導入するソリューション
- (*-*)浩オリジナル
- 2019-11-02 15:09:453420ブラウズ
通常の静的 HTML 開発プロセスでは、フレームワークを使用する必要はありません。最も基本的な方法でいくつかの静的ページを書きたいだけです。ただし、HTML には include 構文がありません。それぞれのパブリック部分ページは手動でコピーして貼り付ける必要があります。これは非常に非科学的です...
オンラインで次の解決策を読みました: (推奨される調査: 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.js4. 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 までご連絡ください。