在HTML頁面中引入外部HTML文件的解決方案
- (*-*)浩原創
- 2019-11-02 15:09:453536瀏覽
在普通的靜態html開發過程中，沒必要用框架，只想用最基本的方式寫幾個靜態頁面出來，但是HTML中沒有include語法，每個頁面的公共部分都要手動複製貼上一次，實在不科學…
在網路上看了有以下的解決方案： ( 推薦學習：html教學 )
#方案一：將html文件轉為js文件，然後在頁面載入的時候將其載入進來執行渲染
#方案二：使用iframe標籤進行引用
方案三：使用gulp外掛gulp-html-import
自己推薦使用第三種方案，使用起來也很方便，以下介紹使用步驟：
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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn