网页模板分离的高效方法

发表于2017-08-15更新于2021-06-24字数统计459阅读时长3分阅读次数

网站模板的设计，一般的，我们做网站有一些通用的部分，比如 导航，底部，访问统计代码等等.
比如 header.html, footer.html, content.html…..其实我们可以写一个 base.html 来包含这些通用文件。ok,让我们一起学习如何实现的吧。

网页基础

以前我们这样写网页

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
我的地盘我做主！
</body>
</html>

看完本片博客，你以后可以这样写

1
2
3
4
<extend name="Temp/base"/>
<block name="content">
	我的地盘我做主！
</block>

WOW, 好腻嗨啊……怎么做到的…

如何实现

新建文件夹和文件

新建一个文件夹 Temp 模板文件夹的意思。然后在这个 Temp 文件夹里面新建文件head.html、footer.html、index.html

最终目录结构是这样的

Temp
├── base.html
├── footer.html
├── head.html
└── index.html

接下来编辑 head.html 文件

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

1
2
3
<footer></footer>
</body>
</html>

编辑 base.html

1
2
3
4
5
6
7
<include file="Temp/head" />

<block name="content">

</block>

<include file="Temp/footer" />

这时候 index.html 应该这样来写

1
2
3
4
<extend name="Temp/base"/>
<block name="content">
	我的地盘我做主！
</block>

浏览器运行 index.html 看看吧

为什么要实现模板分离？

这样我们就完成模板分离的处理。好处在于当一个网站的网页特别多的时候，相同的代码又不可避免。这时候用这个方法可以起到方便管理的作用。使你的代码高效、清晰、明了！