Web前端必做笔记之一：Nunjucks基础使用（一）
宰父智敏
Web前端必做笔记之一：Nunjucks基础使用
在上一节我们说到引入Nunjucks
现在我们用ctx来渲染模版
views下面的模版index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公共模版</title>
</head>
<body>
<h1>我的第一个模版文件</h1>
</body>
</html>
server.js中
const Koa = require('koa');
const router = require('koa-router')();
const views = require('koa-views');
const nunjucks = require('nunjucks');
const app = new Koa(); //创建应用
app.use(views(__dirname + "/views",{ //项目放在views目录里，使用的模版引擎是nunjucks
map:{html:'nunjucks'}
}))
app.use(async (ctx ) => {
await ctx.render("index") //使用render替换body，这个render是个异步操作，所以前面要加个await, 等待这个异步操作完之后再继续
})
app.use(router.routes());
app.listen(3000, () => {
console.log("server running")
})
再使用命令nodemon server.js 启动成功，就实现了Nunjucks来渲染
这个html文件
我们现在来加一些动态的数据，h1标签里修改为后台的数据，那要怎么修改呢？
server.js中
const Koa = require('koa');
const router = require('koa-router')();
const views = require('koa-views');
const nunjucks = require('nunjucks');
const app = new Koa(); //创建应用
app.use(views(__dirname + "/views",{ //项目放在views目录里，使用的模版引擎是nunjucks
map:{html:'nunjucks'}
}))
app.use(async (ctx ) => {
await ctx.render("index",{title:"hello nunjucks"}) //使用render替换body，这个render是个异步操作，所以前面要加个await, 等待这个异步操作完之后再继续
})
app.use(router.routes());
app.listen(3000, () => {
console.log("server running")
})
index.html中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公共模版</title>
</head>
<body>
<h1>{{title}}</h1>
</body>
</html>
这样再重新启动服务器，就会看到，hello nunjucks.
通过render的第二个参数把一个数据传递给模版，这就是模版数据传递的方法
类似资料：