16.art-template 模板继承和子模板

步骤

1. 初始化 package.json:
   项目目录下执行命令 npm init -y
2. 安装项目核心包：npm i express mongoose
3. 配置模板引擎：npm i art-template express-art-template
4. 创建 Views 目录以存放 html 页面文件
5. 安装 bootstrap 和 jquery：npm i bootstrap jquery

art-template 中的 include-extend-block 语法示例

子模板语法：https://aui.github.io/art-template/docs/syntax.html#Sub-template

子模板语法

模板继承语法：https://aui.github.io/art-template/docs/syntax.html#Template-inheritance

模板继承语法

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.set('views', path.join(__dirname, './views'))

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

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

layout.html 通过 include 语句定义头部与尾部，通过 block 语句设置默认内容

    
    
    
    {{ block 'head'}}{{ /block }}


    {{include './header.html'}}

    {{block 'content'}}
        
默认内容
    {{/block}}
    
    {{include './footer.html'}}
    
    
    
    {{ block 'script'}}{{ /block }}

index.html 通过 extend 语法继承 layout.html 的内容，通过 block 语句设置自己的内容，设置后该内容就会替换默认内容

{{extend './layout.html'}}
    
{{block 'content'}}
    
index 页面自己的内容
{{/block}}

{{block 'head'}}
    
{{/block}}

{{block 'script'}}
    
{{/block}}

执行 app.js 效果