静态页面公共部分的处理

静态页面公共部分的处理

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

1.使用框架 angular.js vue.js或者模块化开发 （但是这个静态网站没有什么复杂的功能，引入框架有些大题小做 pass）

2.前端服务器上开启ssi  （服务器是 Linux 没有开启 ssi  pass）

这里有详细的介绍 ​​戳一下​​

3.使用iframe 把页面拆分为多个 然后引入 （当想要用iframe的时候 脑海里总是跳出n个不用iframe的理由 pass）

这个是用了layui框架的 首页 将头部和底部  内容区域 进行变换

对应变换iframe的src进行页面的跳转

’‘

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

以后有好的方法会继续完善。。。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。