我們都知道，多個頁面間都有公共的部分，最常見的就是每個頁面的導航欄和底部的友情鏈接之類的。最簡單粗暴的方法就是在每個頁面重複的去寫一遍，但這樣的問題就是給後期的維護帶來了很大的麻煩，如果稍有改動，那就需要每個頁面改一遍，顯然效率很低。
在網上找了好久都沒有找到一個很好地方法，很多人提供的方法都不太使用，根本起不到作用。在這裏我提供一種方法，謹供參考！當然也有點麻煩，但是比暴力解決就好多了！
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>
**
走過路過的老哥，用了之後有用的記得回來點個贊！
**