Nunjucks模板基于Koa代码示例-自学php网

Nunjucks模板基于Koa代码示例

来源：未知时间：2023-12-13 15:54 作者：小飞侠阅读:次

[导读] 一、循环语句 1、js代码 const Koa = require(koa); // 引入Koa构造函数 const views = require(koa-views); const nunjucks = require(nunjucks); // post请求 const parser = require(koa-parser); const router = require(koa-router)();...

一、循环语句

1、js代码

const Koa = require("koa"); // 引入Koa构造函数
const views = require("koa-views");
const nunjucks = require("nunjucks");
// post请求
const parser = require("koa-parser");
const router = require("koa-router")();
const app = new Koa(); // 创建应用
 
// 设置路径，并且告知使用的模板引擎为：nunjucks
app.use(views(__dirname + "/views", {
    map: {
        html: "nunjucks"
    }
}))
 
let studentList = ["小明", "小红", "小亮"];
 
// index:网页名
// title:传递的参数
router.get("/", async (ctx) => {
    await ctx.render("index", {
        title: "hello nunjucks!",
        studentList
    });
})
 
app.use(router.routes());
 
// 设置监听端口
app.listen(3000, () => {
    console.log("server is running");
})

定义了一个studentList数组。

2、index.html页面代码

<body>
    <!-- title是后台传过来的值  -->
    <h1>{{title}}</h1>
    <ul>
        {% for student in studentList %}
        <li>{{student}}</li>
        {% endfor %}
    </ul>
</body>

使用for循环，取studentList数组的值。

3、效果

二、条件判断

1、js代码：

router.get("/", async (ctx) => {
    await ctx.render("index", {
        title: "hello nunjucks!",
        studentList,
        isLogin: true,
        username: "amdin"
    });
})

添加两个数据：isLogin，username。

2、index.html页面代码：

<body>
    {% if isLogin %}
    <p>欢迎你：{{username}}</p>
    {% else %}
    <p>请登录...</p>
    {% endif %}
</body>

3、效果

（1）如果值为true

（2）如果值为false

三、模板继承

让其它的页面，继承模板页面。（因为有些公共部份，可以单独提取出来。）

项目结构：

1、模板页面代码（公共页面）layout.html：

<body>
    <div>
        <a href="/">首页</a>
        <a href="/images">图片</a>
        <a href="/videos">视频</a>
    </div>
    {% block content %} {% endblock %}
</body>

2、js文件：

const Koa = require("koa"); // 引入Koa构造函数
const views = require("koa-views");
const nunjucks = require("nunjucks");
// post请求
const parser = require("koa-parser");
const router = require("koa-router")();
const app = new Koa(); // 创建应用
 
// 设置路径，并且告知使用的模板引擎为：nunjucks
app.use(views(__dirname + "/views", {
    map: {
        html: "nunjucks"
    }
}))
 
// 首页路由
router.get("/", async (ctx) => {
    await ctx.render("index", {
 
    });
})
 
// 图片路由
router.get("/images", async (ctx) => {
    await ctx.render("images", {
 
    })
})
 
// 视频路由
router.get("/videos", async (ctx) => {
    await ctx.render("videos", {
 
    })
})
 
app.use(router.routes());
 
// 设置监听端口
app.listen(3000, () => {
    console.log("server is running");
})
3、首页 index.html： 
{% extends "./views/layout.html" %}
 
{% block content %}
<h1>首页</h1>
 
{% endblock %}

4、图片页 images.html：

{% extends "./views/layout.html" %}
 
{% block content %}
 
<h1>图片页面</h1>
 
{% endblock %}
5、视频页 videos.html：
{% extends "./views/layout.html" %}
 
{% block content %}
 
<h1>视频页面</h1>
 
{% endblock %}

6、效果：

四、include

某些页面可能会包含相同的组件，例如轮播图，可以通过include引入

1、新建footer.html

<div>

power by XiaoSheng.

</div>

2、首页新增footer：

{% extends "./views/layout.html" %}

{% block content %}

{% include "./views/footer.html" %}

{% endblock %}

3、效果：

只有首页有页脚，其它页面没有页脚。

webp格式利用pdf-lib转换成pdf

子栏目