模板语言由HTML代码和逻辑控制代码组成,此处 @PHP 。通过模板语言可以快速的生成预想的HTML页面。应该算是后端渲染不可缺少的组成部分。
通过使用学习 tornado 、 bottle 的模板语言,我也效仿着实现可以独立使用的模板渲染的代码模块,模板语法来自 tornado 和 bottle 的语法。可以用来做一些简单的事情 网页渲染 , 邮件内容生成 等HTML显示方面。以下就是简单的语法使用介绍。
1. 变量。使用 {{ }} 包裹起来,里面的变量为Python传入。模板渲染时会将传入的变量转换成字符串并填入对应位置。
2. 转义。默认传入的数据都会进行HTML转义,可以使用 {% raw value %} 来将value的内容按原始字符串输出。
3. 条件控制。支持Python的 if,elif,else 。条件代码需要放在 {% %} 内部,并且在条件结束后需要额外增加 {% end %} ,用于标识条件控制语句块范围。
4. 循环控制。支持Python的 for 和 while 。与条件控制一样也需要放在 {% %} 内部,并且结束处需要额外增加 {% end %} ,用于标识循环控制语句块的范围。
这个模板语言模块是在 Python2.7 上面开发使用的,如果要在 Python3+ 上使用需要对 str 和 bytes 进行一些处理即可,由于没有引用任何其他模块,可以很好地独立使用。
原文链接:
http://www.cnblogs.com/jeffxun/p/15585073.html
1、ASP文件中的代码pencat=rs.Fields.Item("m_content").Value
pencat=replace(pencat,"t_title",n_title)
pencat=replace(pencat,"t_author",n_author)
pencat=replace(pencat,"t_content",n_content)
Set fso = Server.CreateObject("Scripting.FileSystemObject")
Set fout = fso.CreateTextFile(server.mappath(fpath&"\" &fname))
fout.WriteLine pencat
fout.close
2、如下给出要生成的网页模板:
<html>
<head>
<meta http-equiv=""Content-Language"" content=""zh-cn"">
<meta http-equiv=""Content-Type"" content=""text/htmlcharset=gb2312"">
<meta name=""GENERATOR"" content=""Microsoft FrontPage 4.0"">
<meta name=""ProgId"" content=""FrontPage.Editor.Document"">
<title></title>
</head>
<body topmargin=""0"" leftmargin=""0"">
<table border=""0"" width=""760"" height=""100%"" background=""background.jpg"" >
<tr>
<td width=""752"" height=""10"" colspan=""3"">
<p align=""center"">t_title
</td>
</tr>
<tr>
<td width=""752"" height=""18"" colspan=""3"">
<div align=""center"">
</div>
<div align=""center"">
<font size=""2"">
作者:</font><font color=""#990000"">t_author</font>
<font size=""2"">
加入时间:</font><font color=""#990000"">t_date</font>
</div>
</td>
</tr>
<tr>
<td width=""15%"" height=""100%"" valign=""top"">
</td>
<td width=""70%"" height=""100%"" valign=""top"">
t_content
</td>
<td width=""15%"" height=""100%"" valign=""top"">
</td>
</tr>
</table>
</body>
</html>
3、解释
(1)pencat=rs.Fields.Item("m_content").Value
pencat为一个字符串变量。
rs.Fields.Item("m_content").Value就是如上2、网页模板的全部HTML字符
(2)pencat=replace(pencat,"t_title",n_title)
pencat=replace(pencat,"t_author",n_author)
pencat=replace(pencat,"t_content",n_content)
以上三句就是将字符串中的字串替换成为你所需要的内容,即ASP中动态获得的内容。
(3)Set fso = Server.CreateObject("Scripting.FileSystemObject")
Set fout = fso.CreateTextFile(server.mappath(fpath&"\" &fname))
fout.WriteLine pencat
fout.close
以上为将刚刚组合所得的网页代码写入文件的过程。第一句定义fso文件,第二句创建输出流文件,其中fpath为你想要存储的文件的路径,fname为文件名;后两句是将字符串写入文件和关闭输出流文件。
HTML复用,不需要任何模板就可以复用相同的内容
条件:控制页面布局显示就可以完成
示例:
主页
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>HTML调试</title>
<script type='text/javascript' src='js/jquery-1.8.0.min.js'></script>
<script src='js/zui.min.js' type='text/javascript' charset='utf-8'></script>
<script src='js/jquery-barcode.js' type='text/javascript' charset='utf-8'></script>
<link rel='stylesheet' type='text/css' href='css/zui.css' />
<style type='text/css'>
#container {
position: absolute
left: 0
top: 0
right: 0
bottom: 0
width: 100%
height: 100%
overflow: auto
font-family: '宋体'
}
</style>
</head>
<body>
<div id='container'>
<!--复用页面容器1-->
<div style="position: absoluteleft: 0pxtop: 0pxheight: 70pxwidth: 100%border-bottom: 1px solid #F1F1F1">
<iframe align="center" width="100%" height="70px" src="html/page_header.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
<div id="contents" style="position: absoluteleft: 0pxtop: 70pxwidth: 100px">
<!--不相同内容容器-->
</div>
<!--复用页面容器2-->
<div style="position: absoluteleft: 0pxtop: 585pxheight: 70pxwidth: 100%border-top: 1px solid #F1F1F1">
<iframe align="center" width="100%" height="70px" src="html/page_footer.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
</div>
</body>
</html>
复用页面1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<title>复用头部</title>
</head>
<body>
<div style="position: absoluteleft: 0pxtop: 0pxheight: 70pxwidth:100%background: #ff0font-size: 30pxtext-align: centerline-height: 70px">
复用头部
</div>
</body>
</html>
复用页面2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<title>复用底部</title>
</head>
<body>
<div style="position: absoluteleft: 0pxtop: 0pxheight: 70pxwidth:100%background: #ff0font-size: 30pxtext-align: centerline-height: 70px">
复用底部
</div>
</body>
</html>
项目结构
实现结果: