[JavaScript知识库] Web前端必做笔记之一：Nunjucks基础使用（一）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Web前端必做笔记之一：Nunjucks基础使用（一） -> 正文阅读

[JavaScript知识库]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>