靜態頁面公共部分的處理

寫一個靜態網站，每個網站中都有相同的頭部和尾部，為了避免粘貼復制的重復操作，想到幾個方法：

1.使用框架 angular.js vue.js或者模塊化開發 （但是這個靜態網站沒有什么復雜的功能，引入框架有些大題小做 pass）

2.前端服務器上開啟ssi  （服務器是 Linux 沒有開啟 ssi  pass）

   這里有詳細的介紹 戳一下

3.使用iframe 把頁面拆分為多個 然后引入 （當想要用iframe的時候 腦海里總是跳出n個不用iframe的理由 pass）

      這個是用了layui框架的 首頁 將頭部和底部  內容區域 進行變換

 <div class="layui-tab-content"  style="padding:0">
                <div class="layui-tab-item layui-show">
                    <iframe src="main.html"></iframe>
                </div>
 </div>　　

對應變換iframe的src進行頁面的跳轉

’<iframe src="' + data.href + '" data-id="' + globalTabIdIndex + '"></iframe>‘

4.使用js加載引入 

  在公共的js中添加

$('header').load("head.html");
$('footer').load("foot.html");

　　每個頁面的結構均為

 

這里說一下 需要寫一個nav.js用來控制 跳轉頁面后 導航欄的狀態改變（當然不止這一種方法）

function init(){
    var link=['index','about','delop','new','recruit','contact']；//這個為你頁面名稱，順序和導航到對應，這里二級目錄會用關鍵字 eg:newDetails新聞詳情 
    var keyword;
    for(var i=0;i<=link.length-1;i++){
        keyword=window.location.href.lastIndexOf(link[i])
        if(keyword>=0){
            change(i)
            return null
        }
    }
}

function change(key){
//改變導航欄狀態
    $('.nav>li').eq(key).addClass('on').siblings().removeClass('on')
}

這樣就可以快速實現 前端的模塊化 但是有缺陷 首頁也做成這樣的話 搜索引擎不會抓取到導航以及底部的鏈接點 不利於seo 

以后有好的方法會繼續完善。。。