前端模板 art-template 继承、子模板及过滤器介绍

[TOC]

## art-template母板继承和局部模板套用介绍

### 1. 母板继承
#### 1.1 素材文件准备
##### 1.1.1 母板文件 layout.art
母板定义使用block关键字，关键字后面是对应区域的名称，例如 `{{block 'title'}}`,一个母板文件中可以多处定义block，被定义的block包括住的内容都可以在继承的子模板中进行替换，block名称需在一个母板文件中唯一。

```html
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
    <title>{{block 'title'}} art-template 模板 {{/block}} </title>
    {{block 'head'}}
    <style>
    body {
    background-color: black;
    color: white;
    }
    </style>
    {{/block}}
</head>
<div id="app">
    {{block 'content'}}
    {{/block}}
</div>
<script type="text/javascript">
</script>
</html>
```
##### 1.1.2 继承母模板的子模板
继承母模板需要使用extend关键字，后面是母板的位置，这个位置是相对与执行渲染功能的js文件，例如本案例指的就是下面的application.js文件

+ 文件一 index.art
 + 访问路径：http://localhost:3000/index.html

```html
{{extend '../00-tpl/layout.art'}}
{{block 'title'}}{{title}}{{/block}}
{{block 'content'}}
<p>从我开始学习art-template吧.</p>
{{/block}}
```

+ 文件二 artListen1.art
 - 访问路径：http://localhost:3000/artListen1.html

```html
{{extend '../00-tpl/layout.art'}}
{{block 'title'}}{{title}}{{/block}}
{{block 'head'}}{{@ styleAndscript}}{{/block}}
{{block 'content'}}
{{@ content}}
{{/block}}
```
##### 1.1.3 渲染处理业务的 application.js
```js
const paths = require("path")
const fs = require("fs")
const http = require("http")
const template = require("art-template")

http.createServer((req, res) => {
    let url = paths.join(__dirname, "../00-tpl", req.url.replace("html", "art"))
    let dtype = "text/plain;charset=utf8"
    let stateCode = 200
    if (req.url.startsWith("/index") && req.method == "GET") {
        dtype = "text/html;charset=utf8"
        //填充数据
        let content = template(url, {
            title: "欢迎开启art-template学习之旅"
        })
        res.writeHead(stateCode, { "content-type": dtype })
        res.end(content);
    }
    else if (req.url.startsWith("/artListen1") && req.method == "GET") {
        dtype = "text/html;charset=utf8"
        let styleArray = [];
        styleArray.push("<style>")
        styleArray.push("body {")
        styleArray.push("background-color: black;")
        styleArray.push("color: white;}")
        styleArray.push("</style>")
        //填充数据
        let content = template(url, {
            title: "art-template学习之旅第一课",
            styleAndscript: styleArray.join(""),
            content: "<h2>开始今天的学习吧第一个</h2>"
        })
        res.writeHead(stateCode, { "content-type": dtype })
        res.end(content);
    }
    else {
        res.writeHead(500, { "content-type": dtype })
        res.end("server error");
    }

}).listen(3000, () => {
    console.log("服务已启动")
})
```
以上文件的目录结果根据代码自行调整

### 2. 局部模板套用
#### 2.1 素材文件准备
##### 2.1.1 调整上面的文件 artListen1.art
在artListen1.art文件中引入子模板内容，使用关键字include，语法为{{include  '文件路径' data}}，data默认为实例化模板时传入的$data,template(url, data)传入的data，所以语法也可以简写为{{include  '文件路径'}}，如果在模板中引入子模板，主要引入需要放在block区块中。

```html
{{extend '../00-tpl/layout.art'}}
{{block 'title'}}{{title}}{{/block}}
{{block 'head'}}{{@ styleAndscript}}{{/block}}
{{block 'content'}}
{{@ content}}
{{@ content}}
<div>{{include  '../00-tpl/foo.art'}}</div>
{{/block}}
```
##### 2.1.2 局部模板文件 foo.art
```html
<div style="background-color:#fff;color:black;">
{{@ title}}
{{@ content}}
<div>
```
执行文件仍然是上面的application.js

### 3. 过滤器
过滤器其实就是在模板文件中使用自定义的函数，自定义函数需要创建在template.defaults.imports中，例如：template.defaults.imports.date = function(date){}
#### 3.1 素材文件准备
##### 3.1.1 修改artListen1.art模板文件
在{{block 'content'}}模板块中添加过滤器（调用模板扩展的自定义函数）
```html

{{block 'content'}}

{{date('2023-01-10')}}<br/><br/>
{{@ date('2022-01-10')}}<br/><br/>
{{/block}}
```
##### 3.1.2 调整application.js的文件
在文件中添加模板扩展函数
```js
//…… 省略原代码
template.defaults.imports.date = function(date){
    if(new Date(date.replace(/-/g,'/')) > new Date()) {
        return '参数时间大于当前时间'
    }else{
        return '<span style="color:red">参数时间小于当前时间</span>'
    }
}
```