注意!使用本功能请确保您的CCHTTP模块版本≥2.0.1.4 (更新模块)
简介
CCHTTP模板引擎使用简单高效,类似mustache语法,支持循环、条件判断 及易上手。模板位置以当前网站的“模板”目录做为根目录。
后端渲染有什么用?
后端渲染可自动的处理静态文本,对静态文本进行文本替换,循环渲染,逻辑渲染并以网页的形式输出给客户端(浏览器)。
后端渲染可对搜索引擎友好,可显著提高站点SEO权重。
如何使用后端渲染?
接口.渲染()
参数1为模板路径,空留状态下会直接使用注册接口时传入的模板文件。支持绝对和相对路径,相对路径不需要输入最前面的/,相对路径是指相对于网站程序存放目录中/网站/模板 而言的。
参数2为渲染使用的参数,需要传递一个JSON对象进入。
接口.回复模板()
参数1为模板路径,空留状态下会直接使用注册接口时传入的模板文件。支持绝对和相对路径,相对路径不需要输入最前面的/,相对路径是指相对于网站程序存放目录中/网站/模板 而言的。
参数2为渲染使用的参数,需要传递一个JSON对象进入。
接口.回复模板_文本()
参数1为文本型,可以直接对内存中的文本进行渲染并自动将渲染后的内容以网页形式回复给浏览器。
参数2为渲染使用的参数,需要传递一个JSON对象进入。
模板语法
默认模板引擎支持以下几种类型的内容输出:
输出变量
列表循环
条件判断
包含文件
所有形式的渲染都是以两个起始大括号“{{”开始和两个结束大括号“}}”结束的标签的形式。例如:
{{用户名}}
列表循环 和 条件判断 都必须定义收尾标签,和 起始标签遥相呼应,一一对应。收尾标签的形式为:
{{#列表数据}}
{{/列表数据}}
输出变量
[格式] {{变量名}}
以下是一个标准的变量输出定义:
{{用户名}}
变量名不能以这些字符开头:> # ? !
变量名称建议使用标准英文或者中文,这样也便于阅读,允许使用下划线和中划线。
[示例]
{
"页面名称": "首页"
}
<meta charset="UTF-8">
<title>CCHTTP - {{页面名称}}</title>
<meta charset="UTF-8">
<title>CCHTTP - 首页</title>
列表循环
列表循环能够循环一个列表数据,枚举其中的每一项并做输出。
[格式] {{#列表变量}} 每项下级内容 {{/列表变量}}
使用列表循环的格式和使用步骤:
列表枚举起始:{{#列表变量}}
渲染列表数据:输出每一项的下级内容
列表枚举结束:{{/列表变量}}
列表循环的起始格式以“{{#”开头,“}}”结束,中间是变量的名称。
列表循环必须包含收尾标签。收尾标签以“{{/”开头,“}}”结束,中间是和起始格式一样的变量的名称。
注意:起始和结束标签务必配对。
列表循环会从列表第一行一直读取到最后一行,没读一行就会取出当前行的数据并且进行渲染。当列表数据为空时,列表标签内的内容将不会进行输出。
以下是一个标准的列表循环定义:
{{#列表数据}}
...
{{/列表数据}}
[示例] 查看JSON构建代码
{
"项目列表": [
{
"项目": "CCHTTP",
"id": 1,
"已完成": true
},
{
"项目": "酷C发卡网",
"id": 2,
"已完成": true
},
{
"项目": "月入百万",
"id": 3,
"已完成": false
}
]
}
<ul>
{{#项目列表}}
<li> {{id}} - {{项目}} - {{已完成}} </li>
{{/项目列表}}
</ul>
<ul>
<li> 1 - CCHTTP - 真 </li>
<li> 2 - 酷C发卡网 - 真 </li>
<li> 3 - 月入百万 - 假 </li>
</ul>
条件判断
[格式] {{?判断内容}}
条件判断的使用方式和 列表循环 差不多。
使用条件判断的格式和使用步骤:
条件判断起始:{{?要判断变量}}
符合条件则渲染标签范围内的数据
条件判断结束:{{/要判断变量}}
条件判断的起始格式以“{{?”开头,“}}”结束,中间是变量的名称或者判断的条件。
注意:条件判断必须包含收尾标签。
收尾标签以“{{/”开头,“}}”结束,中间是和起始格式一样的变量的名称。无论起始标签中是否存在条件文本,收尾标签内都只能为变量名称。
起始和结束标签务必配对。
以下是一个标准的条件判断定义:
{{?名称}}
我叫 {{名称}},我是{{性别}}
{{/名称}}
为了方便说明各种条件处理情况,我们先定义模板数据:
{
"项目列表": [
{
"项目": "CCHTTP",
"id": 1,
"已完成": true
},
{
"项目": "酷C发卡网",
"id": 2,
"已完成": true
}
],
"项目数量": 2,
"不显示项目": true,
"负责人": "浅浅",
"年龄": 18
}
判断变量是否存在
[格式] {{?变量}} 输出内容 {{/变量}}
若渲染参数中存在该JSON变量节点,则渲染,若不存在将不渲染输出内容
[相反格式] {{?!变量}} 输出内容 {{/变量}}
与上相反,若不存在则渲染,若存在则不渲染
[示例1]
{{?控制显示}}显示内容{{/控制显示}}
-
注:由于模板数据中没有“控制显示”因此并没有渲染出“显示内容”
[示例2]
{{?!控制显示}}显示内容{{/控制显示}}
显示内容
注:由于模板数据中没有“控制显示”但加了“!”进行了反转 因此渲染出了“显示内容”
判断比较
CCHTTP的渲染引擎目前支持:“==”,“=”,“!=”,“>”,“<”,“>=”,“<=”等7种比较方式,但“>”,“<”,“>=”,“<=”仅支持数值比较。
若两个数据进行比较,例如:数据a>数据b,会自动根据数据b的数据类型进行比较。
若比较数据类型为文本,需添加“””双引号标注,例如:”负责人”才表示文本,不加双引号情况下 负责人 表示渲染参数中的 负责人变量 即 “浅浅”。
[示例1]
{{?项目数量=2}}显示内容{{/项目数量}}
{{?项目数量=1}}显示内容{{/项目数量}}
{{?项目数量>1}}显示内容{{/项目数量}}
{{?项目数量>10}}显示内容{{/项目数量}}
显示内容
-
显示内容
-
[示例2]
{{?负责人='浅浅'}}显示内容{{/负责人}}
{{?项目数量!=年龄}}显示内容{{/项目数量}}
{{?不显示项目=假}}显示内容{{/不显示项目}}
显示内容
显示内容
-
以上示例中,负责人=’浅浅’ 是判断的字符串,而 项目数量!=年龄 是两个变量进行比较
多条件判断
多条件判断支持“或”(||)与“且”(&&)联合判断使用
或 || 判断 [表达式1成立] 或 [表达式2成立]。
{{?表达式1 || 表达式2}} 输出内容 {{/表达式1变量}}
且 && 判断 [表达式1成立] 且 [表达式2成立]。
{{?表达式1 && 表达式2}} 输出内容 {{/表达式1变量}}
[示例]
{{?负责人='浅浅' || 项目数量=3}}显示内容{{/负责人}}
{{?项目数量>1 && 年龄>20}}显示内容{{/项目数量}}
显示内容
-
包含文件
在当前模板中引入其它模板文件。
[格式] {{> 模板文件路径 }}
[示例]
假设当前模板目录为:c:/网站/模板/
当前模板文件路径为:c:/网站/模板/用户/index.html
页头文件:[网站]/模板/header.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CCHTTP官网</title>
</head>
<body>
页脚文件:[网站]/模板/footer.html
<body>
</html>
模板文件:[网站]/模板/用户/index.html
{{>/header.html}}
<div class="am-g">
<a href="#">添加</a>
<a href="#">删除</a>
</div>
{{>/footer.html}}
最终输出:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>留言本</title>
</head>
<body>
<div class="am-g">
<a href="#">添加</a>
<a href="#">删除</a>
</div>
<body>
</html>
值得注意的是,CCHTTP的包含文件功能,渲染参数的变量在引入的文件中仍然好用。