利用JS实现简单的Header和Footer的复写

这个博客刚建立的时候呢，所有的框架都是手写的，几乎所有代码都在一块儿，包括什么CSS啊，JS啊都在一个HTML文档里，过了几天发现改起来太累了，然后呢才写了单独的CSS，JS文件。从2016年过到2017年的时候，发现了一个更加麻烦的问题，因为是静态网站的原因，页脚的版权信息啊，“Copyright © 2014-2017 Carl Zhang. All rights reserved.” 这一部分里面我要把2016改成2017，必须把所有的网页全手动改一遍，而且现在文章也多了，一堆文档改下来，人都快疯了。后来想想，其他大规模的网站肯定没有这么麻烦的啊，就想找一下能不能实现复写功能。

PHP实现Header和Footer复写的功能我是知道的，但是由于是HTML页面，全部改成PHP又得花我几天的时间，太累，所以就被我放弃了，后来我去网上搜了一下有没有什么好的解决方案。很多的答案都是不尽如人意，后来在某个问题的评论中看到了利用JS就可以实现这个功能，而且非常的简单，很容易操作，所以这里我就整理一下，发上来。

首先建立两个js文档，一个Header.js，一个Footer.js。

这里以Footer.js为例来大概解释一下，本站的Footer.js代码如下：

var footer="\ 
<div class='footer_item'>\ 
    <br />\ 
    <div>\ 
        <a href='https://carlzhang.net/copyright.html' style='color: white;' target='_blank'>Copyright</a>\ 
        © 2014-2017 Carl Zhang. All rights reserved.\ 
    </div>\ 
    <ul>\ 
        <li>Website designed by Carl Zhang.</li>\ 
        <li class='divide'>|</li>\ 
        <li>友情链接：<a href='http://miketech.it/' target='_blank'>MikeTech</a></li>\ 
        <li class='divide'>|</li>\ 
        <li><a href='https://carlzhang.net/sitemap.html' target='_blank'>站内导航</a></li>\ 
    </ul>\ 
</div>" 
 
document.write(footer);

代码中的换行是为了大家看起来方便，建议还是一行到底啊，虽然这样写也是没有太大问题的，浏览器还是能够处理的。每一行末尾的那个“\”就是用来换行的，不加这个是会报错的。（Header.js也是一样的道理，就不多解释了。）

然后呢，在所有网页中，引用这个js文档就行了:

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- --> 
    </head> 
 
    <body> 
        <header> 
            <!-- --> 
            <script src='https://carlzhang.net/js/My_Header.js'></script>  <!-- 使用绝对链接是我的个人习惯，也可以用相对链接。 --> 
        </header> 
        
        <footer> 
            <script src='https://carlzhang.net/js/My_Footer.js'></script>  <!-- 使用绝对链接是我的个人习惯，也可以用相对链接。 --> 
        </footer> 
    </body> 
</html>

页头：

Header

页脚：

Footer

这就OK了，非常的简单。这样，以后如果对页头或者页脚需要修改，只需要更改一下JS文件内的内容就可以了，再也不需要把所有文件都打开来改一遍了。不过弊端嘛也是有的，这样做对于整个网站的JS优化不太友好，可能会降低整个网页的加载速度。

（本文为作者原创。转载请注明：转自carlzhang.xyz）