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

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?

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

?

轉載于:https://www.cnblogs.com/GoTing/p/8490195.html

總結

以上是生活随笔為你收集整理的静态页面公共部分的处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。