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

作者:Carl Zhang | 更新时间:2017-03-04 | 分类:科技

这个博客刚建立的时候呢,所有的框架都是手写的,几乎所有代码都在一块儿,包括什么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代码如下:

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

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

页头:

Header

页脚:

Footer

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

(本文为作者原创。转载请注明:转自carlzhang.net