步骤
- 初始化 package.json:
项目目录下执行命令npm init -y - 安装项目核心包：
npm i express mongoose - 配置模板引擎：
npm i art-template express-art-template - 创建 Views 目录以存放 html 页面文件
- 安装 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
模板继承语法
<!-- 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.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 语句设置默认内容
<!-- layout.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
{{ block 'head'}}{{ /block }}
</head>
<body>
{{include './header.html'}}
{{block 'content'}}
<h1>默认内容</h1>
{{/block}}
{{include './footer.html'}}
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
{{ block 'script'}}{{ /block }}
</body>
</html>
index.html 通过 extend 语法继承 layout.html 的内容，通过 block 语句设置自己的内容，设置后该内容就会替换默认内容
<!-- index.html -->
{{extend './layout.html'}}
{{block 'content'}}
<h1>index 页面自己的内容</h1>
{{/block}}
{{block 'head'}}
<style>
body{
background-color: skyblue
}
</style>
{{/block}}
{{block 'script'}}
<script>
window.alert('index 页面自己的 js 脚本')
</script>
{{/block}}
执行 app.js 效果
网友评论