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

最新推荐文章于 2020-09-15 17:18:07 发布

weixin_34137799

最新推荐文章于 2020-09-15 17:18:07 发布

阅读量605

点赞数

文章标签： javascript 数据库 ViewUI

原文链接：https://juejin.im/post/5cd0e0455188250c7621c0c0

版权

公所周知，大部分的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}}的内容

转载于:https://juejin.im/post/5cd0e0455188250c7621c0c0

weixin_34137799

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫