模板引擎 art-template

支持两种用法

标准语法

    {{if user}}
        <h2>{{user.name}}</h2>
    {{/if}}

原始语法本人比较喜欢标准语法，接下来不会介绍原始的使用情况

    {{if user}}
        <h2>{{user.name}}</h2>
    {{/if}}

语法

循环

 {{each target}}
     {{$index}} {{$value}}
 {{/each}}

条件

{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}

变量
```
{{set temp = data.sub.content}}
```

模板集成

{{extend './layout.art'}}
{{block 'head'}} ... {{/block}}

过滤器

{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}

在 node 实现服务端渲染

    <!--layout.art-->
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>{{ title }}</title>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <ul>
            {{each list}}
            <li>{{$value}}</li>
            {{/each}}
        </ul>
    </body>
    </html>

const http = require('http')
const fs = require('fs')

const template = require('art-template')

http.createServer(function(req, res) {
    let pathname = req.url
    if (pathname === '/' || pathname === '/index.html') {
        let htmlStr = ''
        fs.readFile('./index.html', (err, data) =>{
            if (err) {
                return console.log(err)
            }
            htmlStr = template.render(data.toString(), {
                title: 'nodeJs',
                list: [
                    'fs',
                    'url',
                    'fttp'
                ]
            })
            res.setHeader('Content-Type','text/html;charset=utf-8')
            res.end(htmlStr)
        })
    } else {
        res.setHeader('Content-Type','text/html;charset=utf-8')
        res.end('你访问的页面不存在')
    }

}).listen(1010, (err) =>{
    if (err) {
        return console.log('启动失败')
    }
    console.log('启动成功')
})

注意

因为 art-template 模板引擎是解析 {{}} 这个特殊的约定，所以我们写模板的时候一定要注意必须使用哪怕是注释的也不行

    <!--layout.art-->
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
    <!-- 比如 title 的值  nodeJs  会输出来 'nodeJs' -->
    '{{ title }}'
    <!-- 这样写是有问题的 虽然浏览器没有显示出来， 但是已经通过 模板引擎 解析过了 只不过是 浏览器能解析注释-->
    <!-- {{ node }} -->
    </body>
    </html>

node 模板引擎 art-template

模板引擎 art-template

支持两种用法

语法

在 node 实现服务端渲染

注意