HTML页面如何加入公共的头部文件和底部文件

最新推荐文章于 2022-06-24 14:48:46 发布

码农峰酱

最新推荐文章于 2022-06-24 14:48:46 发布

阅读量1.8k

点赞数 5

分类专栏：前端文章标签： html js web

本文链接：https://blog.youkuaiyun.com/Coder_Yafeng/article/details/106873013

版权

前端专栏收录该内容

1 篇文章

订阅专栏

我们都知道，多个页面间都有公共的部分，最常见的就是每个页面的导航栏和底部的友情链接之类的。最简单粗暴的方法就是在每个页面重复的去写一遍，但这样的问题就是给后期的维护带来了很大的麻烦，如果稍有改动，那就需要每个页面改一遍，显然效率很低。

在网上找了好久都没有找到一个很好地方法，很多人提供的方法都不太使用，根本起不到作用。在这里我提供一种方法，谨供参考！当然也有点麻烦，但是比暴力解决就好多了！

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>

HTML页面如何加入公共的头部文件和底部文件

走过路过的老哥，用了之后有用的记得回来点个赞！