前言
雖然現在單頁面很流行，但是在 PC 端多頁面還是常態，所以構建靜態頁面的工具還有用武之地。最近也看到了一些詢問如何 include HTML 文件的問題。
很多時候我們在寫靜態頁面的時候也希望能和后台模板一樣，將導航、頁頭、頁腳等公用的部分分離出去，然后引入頁面中。單純的靜態頁面不具備這種功能，而使用 gulp 插件可以很容易的完成，比如 gulp-file-include 插件。
官網對於插件的基本使用已經說得很詳細，但是對於一些具體的場景並沒有舉例，所以初次接觸還是還是會有疑惑，比如具有選中狀態的導航條怎么做、面包屑怎么做。本文的主要目的就是給出兩個例子的解決方案。
目錄及配置文件
基本的目錄結構如下，實際項目可能需要更精細的結構。
作為引入文件的插件，並沒有太多的配置參數，基本的 gulpfile 如下，更詳細的配置參見官網。
var gulp = require('gulp'), fileinclude = require('gulp-file-include'); gulp.task('fileinclude', function() { gulp.src(['./src/*.html'])//主文件 .pipe(fileinclude({ prefix: '@@',//變量前綴 @@include basepath: './src/_include',//引用文件路徑 indent:true//保留文件的縮進 })) .pipe(gulp.dest('./dist'));//輸出文件路徑 });
導航條
導航條是主要的引用內容，但是一般當前頁面的導航都會有選中效果，那么就要使用 gulp-file-include 的判斷功能。后台模板統一引入后也要考慮鏈接的選中問題。之前公司在用后台模板的時候就遇到過這個問題。其實無論是后台還是前台，在引入導航條這個問題上的解決方法差不多，都是在當前頁面定義一個私有變量，通過這個變量來設置鏈接的選中效果，而 gulp-file-include 的變量通過傳參實現。具體方法如下：
index.html
<!DOCTYPE html> <html> <body> @@include('./navbar.html',{ "index": "active" }) </body> </html>
navbar.html
<ul class="navbar"> <li @@if (context.index==='active' ) { class="active" }> <a href="index.html">首頁</a> </li> <li @@if (context.about==='active' ) { class="active" }> <a href="about.html">關於</a> </li> <li @@if (context.contact==='active' ) { class="active" }> <a href="contact.html">聯系我們</a> </li> </ul>
編譯結果：
<!DOCTYPE html> <html> <body> <ul class="navbar"> <li class="active" > <a href="index.html">首頁</a> </li> <li > <a href="about.html">關於</a> </li> <li > <a href="contact.html">聯系我們</a> </li> </ul> </body> </html>
面包屑
面包屑也是常用的功能，不過有些時候並不需要前端構建的方式生成，在此作為一個案例來說明吧。生成面包屑的方法很多，我使用了傳參的方法，通過傳遞一個導航路徑數組，然后循環生成面包屑。因為面包屑的最后一項沒有連接，所以循環要分兩次執行。具體方法如下：
index.html
<!DOCTYPE html> <html> <body> @@include('./breadcrumb.html',{ "title":"首頁", "breadcrumb":[{ "url":"...", "text":"首頁" },{ "url":"...", "text":"鏈接一" },{ "url":"", "text":"鏈接二" }] }) </body> </html>
breadcrumb.html
<div class="page-header"> <h2>@@title</h2> <ol class="breadcrumb"> @@for (var i = 0; i < (context.breadcrumb.length-1); i++) { <li><a href="`+context.breadcrumb[i].url+`">`+context.breadcrumb[i].text+`</a></li> } <!-- 面包屑最后一項無鏈接 --> @@for (var i = (context.breadcrumb.length-1); i < context.breadcrumb.length; i++) { <li><strong>`+context.breadcrumb[i].text+`</strong></li> } </ol> </div>
編譯結果：
<!DOCTYPE html> <html> <body> <div class="page-header"> <h2>首頁</h2> <ol class="breadcrumb"> <li><a href="...">首頁</a></li> <li><a href="...">鏈接一</a></li> <!-- 面包屑最后一項無鏈接 --> <li><strong>鏈接二</strong></li> </ol> </div> </body> </html>
結論
gulp-file-include 插件的使用非常簡單，如果實際項目中遇到更復雜的情況，還需要仔細閱讀官方文檔，也可以在 Github 的 Issues 中尋找答案！