art-template模板包含和模板继承

最新推荐文章于 2022-05-08 16:54:42 发布

原创最新推荐文章于 2022-05-08 16:54:42 发布 · 402 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#node.js #前端 #javascript

本文详细介绍了一种使用模板引擎实现网页布局的方法，通过定义通用的头部和尾部，以及主体内容的留白区域，实现了页面结构的复用。文章展示了如何在子页面中继承父页面的布局，并填充特定的内容，提高了开发效率。

文件目录：

1.导入头部和尾部

header.html
<body>
    <h1>公共的头部</h1>
</body>

footer.html

<body>
 <h1>公共的尾部</h1>
</body>

2.写入默认主体内容

{{ block 'content'}} 默认内容 {{/block}} 这个里面是留白内容，在后面会进行填充

layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<!--导入头部-->
{{include './header.html'}}
<!--写入默认主体内容-->
{{ block 'content'}}
    默认内容
{{/block}}
<!--导入尾部-->
{{include './footer.html'}}
</body>
</html>

3.继承

index.html
<!--继承layout.html页面中的内容-->
{{extend './layout.html'}}

<!--填充之前的留白内容-->
{{block 'content'}}
    <div>
        <h2>这里是内容</h2>
    </div>
{{/block}}

app.js

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

var app = express()

app.use('/public/', express.static(path.join(__dirname, 'public')))
//__dirname:获取当前文件模块所属目录的绝对路径    __filename:可以获取当前文件的绝对路径
pp.use('/node_modules/',express.static(path.join(__dirname,'./node_modules/')))

app.engine('html',require('express-art-template'))
// 默认就是./views目录
app.set('views',path.join(__dirname,'./views/'))

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

})

app.listen(5000,function () {
    console.log('the server is running!')
})

运行app.js效果图：