网页模板分离的高效方法
  • 2017-08-15

网站模板的设计,一般的,我们做网站有一些通用的部分,比如 导航,底部,访问统计代码等等.
比如 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.htmlfooter.htmlindex.html

最终目录结构是这样的

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

接下来编辑 head.html 文件

1
2
3
4
5
6
<!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 看看吧

为什么要实现模板分离?

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

感谢您的阅读,本文由 三步枫|三步枫的个人网站 版权所有。如若转载,请注明出处:三步枫|三步枫的个人网站(https://blog.adymilk.cn/2017/08/15/2017-08-15-HTML-template-separation/
Android-Studio 多渠道打包
学习Python系列第一天

” 打赏了的人都会变美~ “