在NodeJs中公共模板的嵌套,采用art-template

1,297 阅读1分钟

  公所周知,大部分的pc项目中有很多个页面,而每个页面几乎都有重复的部分,比如头部页面,底部页面,侧边菜单栏等等。今天我将分享如何使用art-template模板引擎分将这些公共布局样式封装起来,在其他的页面中直接调用。
  在这里,我们举一个html静态页,引用同一个header.html和footer.html文件的例子。
头部布局

# header.html

<div>这是头部布局</div>

底部布局

# footer.html

<div>这是底部布局</div>

公共模板,其实也可以把头部布局和底部布局写进到公共模板中,也可以使用{{include}}语法将布局嵌套进去

# layout.html 公共模板

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{block 'title'}}My Site{{/block}}</title>

    {{block 'head'}}
    <link rel="stylesheet" href="main.css">
    {{/block}}
</head>
<body>
    {{include './header.html'}} 嵌套头布局 './header.html' ==》header.html 路径
    
    {{block 'content'}}
    {{/block}}
    
    {{include './footer.art'}} 嵌套底部布局
    
    {{block 'script'}}
    {{/block}}
</body>
</html>

具体页面继承公共模板

# index.html 继承公共模板,并实现自己的内容布局

{{extend './layout.html'}} // 继承公共布局
{{block 'head'}}
 <link rel="stylesheet" href="index.css">
{{/block}}

{{block 'content'}}
 <div>这是index的布局</div>
{{/block}}

{{block 'script'}}
 <script>
 </script>
{{/block}}

在node启动服务器中,app.js

var express = require('express')
var path = require('path')

var app = express()

app.use('/public/',express.static(path.join(__dirname,'./public/')))
app.use('/node_modules/',express.static(path.join(__dirname,'./node_modules/')))

app.engine('html', require('express-art-template'));

app.get('/',function(req,res){
    res.render('index.html')
})

app.listen(3000,function(){
    console.log(' port 3000 running')
})

{{include './header.html'}} :该语法是将header.html 嵌套到当前页面中

{{extend './layout.html'}}
{{block 'content'}}
 <div>这是index的布局</div>
{{/block}}

{{extend}}:继承 layout.html 模板
{{block 'content'}}具体布局{{/block}}:将“具体布局”的内容取代模板中{{block 'content'}}{{/block}}的内容