我们都知道,多个页面间都有公共的部分,最常见的就是每个页面的导航栏和底部的友情链接之类的。最简单粗暴的方法就是在每个页面重复的去写一遍,但这样的问题就是给后期的维护带来了很大的麻烦,如果稍有改动,那就需要每个页面改一遍,显然效率很低。
在网上找了好久都没有找到一个很好地方法,很多人提供的方法都不太使用,根本起不到作用。在这里我提供一种方法,谨供参考!当然也有点麻烦,但是比暴力解决就好多了!
1. 首先看一下我的导航看部分head.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/model.css">
</head>
<body>
<div class="navigation_bar">
<ul>
<li ><a href="/growth_rate" id="on">home</a></li>
<li><a href="/cracking_analyse">article</a></li>
<li><a href="/noStress_predict_depth">comment</a></li>
<li><a href="/stress_predict_depth">about</a></li>
</ul>
</div>
</body>
</html>
2.利用转换工具,将上述HTML文件转换成JS文件(转换工具)
document.writeln("<!DOCTYPE html>");
document.writeln("<html lang=\'en\'>");
document.writeln("<head>");
document.writeln(" <meta charset=\'UTF-8\'>");
document.writeln(" <title></title>");
document.writeln(" <link rel=\'stylesheet\' type=\'text/css\' href=\'../css/model.css\'>");
document.writeln("</head>");
document.writeln("<body>");
document.writeln("<div class=\'navigation_bar\'>");
document.writeln(" <ul>");
document.writeln(" <li ><a href=\'/growth_rate\' id=\'on\'>home</a></li>");
document.writeln(" <li><a href=\'/cracking_analyse\'>article</a></li>");
document.writeln(" <li><a href=\'/noStress_predict_depth\'>comment</a></li>");
document.writeln(" <li><a href=\'/stress_predict_depth\'>about</a></li>");
document.writeln(" </ul>");
document.writeln("</div>");
document.writeln("</body>");
document.writeln("</html>");
3.将该js文件引入到页面中(亲测有效)
<head>
<meta charset="UTF-8">
<script src="../js/echarts.min.js"></script>
<script src="../js/head.js"></script> <!--引入头部文件-->
</head>
**
走过路过的老哥,用了之后有用的记得回来点个赞!
**