Python大神教你300行代码搞定HTML模板渲染「附源码」

html-css015

Python大神教你300行代码搞定HTML模板渲染「附源码」,第1张

模板语言由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>

项目结构

实现结果：