静态页面公共部分的处理

写一个静态网站，每个网站中都有相同的头部和尾部，为了避免粘贴复制的重复操作，想到几个方法：

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