Nunjucks模板语法

最新推荐文章于 2024-07-08 22:56:50 发布
最新推荐文章于 2024-07-08 22:56:50 发布
阅读量589 收藏 1
点赞数
分类专栏： Node基础 文章标签： node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41523175/article/details/124317957
版权
本文详细介绍了使用Koa框架和Nunjucks模板引擎进行JavaScript开发，包括循环遍历数组、条件判断展示不同内容、模板继承以及include功能的应用。通过实例展示了如何在网页中动态渲染数据和实现页面结构复用。
摘要由CSDN通过智能技术生成

一、循环语句

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 %}

<h1>首页</h1>

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

{% endblock %}

3、效果：

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

 

 

 

pro1822
关注
专栏目录
nunjucks 模板引擎常用语法学习总结
yangyang_A的博客
07-15 2444
文章目录nunjucks模板引擎nunjucks模板注释koa-nunjucks-2的使用nunjucks 插值语法nunjucks 的判断语句nunjucks 的循环语句nunjucks内置的过滤器nunjucks 模板继承nunjucks 中的宏标签 macronunjucks 中的includenunjucks 中的 import nunjucks模板引擎 nunjucks官网: nunjucks模板注释 由于nunjucks 模板, 直接以写html 的方式写的模板文件, 因此他的注释可以直
3分钟教你学会你如何使用Nunjucks模板-1
Calla_Lj的博客
01-25 3494
3分钟教你学会你如何在Node端使用Nunjucks模板 安装 npm install nunjucks 配置 在 node 端，‘views’ 为相对于当前工作目录 (working directory) 的路径。在浏览器端则为一个相对的 url，最好指定为绝对路径 (如 ‘/views’) app.js: const express = require('express') ...
八、Nunjucks模板语法
weixin_46261309的博客
05-05 1250
目录一、概述一、循环语句二、分支语句三、模板继承四、include 一、概述 在上一节内容中，我们了解到通过`render`方法不仅可以指定渲染的模板，还可以向模板传递数据。 本节我们继续讲解nunjucks模板语法，使其不仅可以展示一行字符串，还可以展示更为丰富的网页效果。 本章我们只讲解常用的功能，如果需要更多的nunjucks模板功能，可以到[nunjucks中文文档](https://...
Nunjucks模板引擎
最新发布
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
07-08 760
Nunjucks 是一个更复杂的 JavaScript 模板引擎，提供丰富的语言特性和块继承、自动转移、宏和异步控制等等。
Node-06Nunjucks语法
Void的博客
02-28 434
如何根据后台的数据动态地改变前端的页面？ 很多时候前端的界面需要根据数据库的内容对一些内容进行动态的增减，比如列表，那么就需要在前端的html界面能够识别循环和分支等”语法“。 1.nunjucks进阶——循环语句和分支语句 nunjucks 语法： 使用{%%}可以识别逻辑语句 以{%%}content{%%}为例子 content将视逻辑类型 重复*次（循环） 或者 显示/隐藏（分支） index.html <!DOCTYPE html> <html lang="en"> &lt
06-nunjucks模板语法
前端萌新
08-27 283
nunjucks模板语法
Nunjucks简介&基本使用教程
Javachichi的博客
03-14 2243
Nunjucks 是一个功能丰富、强大的 JavaScript 专用模板引擎。Nunjucks 提供丰富的语言特性和块继承、自动转移、宏和异步控制等等。重点要关注的是，Nunjucks 模板引擎的代码在沙箱环境中运行，任何全局对象都从环境中剥离出来，以限制可用于跳出沙箱并执行任意代码。因此我们测试{{root}}或{{global}}时并没有任何反应，所以说明代码在沙箱环境中运行，而root和global命令并没有跳出沙箱进行RCE。在 JavaScript 中，global是一个预定义的全局对象。
koa2使用ejs和nunjucks作为模板引擎的使用
10-17
Nunjucks提供丰富的模板语法，如变量输出、条件语句、循环等。例如，以下是一个简单的Nunjucks模板示例： ```html <h1>{{ title }} 循环： {% for key, value in food %} <li>{{ key }} - {{ value }} {%...
eleventy-plugin-syntaxhighlight:一组Eleventy插件，用于在Markdown，Liquid和Nunjucks模板中突出显示语法
04-30
"eleventy-plugin-syntaxhighlight" 是一个专为Eleventy设计的插件，其主要功能是在Markdown、Liquid以及Nunjucks模板中实现代码语法的高亮显示。"Eleventy"是一个静态网站生成器，而这个插件的引入，使得在构建过程...
Atom-language-nunjucks,atom中nunjuck模板的语法突出显示。.zip
09-18
5. **错误检测**：实时检查模板语法错误，帮助你在编写过程中快速发现并修复问题。 6. **跳转到定义**：对于导入的模板或函数，可能有跳转功能，可以直接定位到定义的位置。 7. **多语言支持**：Nunjucks 支持嵌套...
小书匠语法说明之nunjucks1
08-04
要使用nunjucks语法，首先需要在设置中的“扩展语法”选项开启nunjucks模板语法。如果只想针对特定文章启用，可以在文章的元数据中通过`grammar_nunjucks`进行控制。默认情况下，nunjucks模板语法是关闭的。 **内部...
nunjucks方法
nanling0220的博客
04-06 504
<!-- 正常书写注释即可 --> {# 我是nunjucks的注释 #} <!-- if 判断 --> {% if num >3 %} <p>num值大于3</p> {% elseif num <3 %} <div>num值小于3</div> {% else...
Nunjucks：‘if‘有多个‘和‘或‘或‘条件
高山景行，一尘不染
12-03 871
直接上代码： {% if (item.type=='banner') and (item.list.length>0) %} // {% endif %} {% if (VARIABLE == 10) or (VARIABLE == 20) %} // {% endif %}
使用Nunjucks
android开发笔记
06-12 2242
Nunjucks Nunjucks是什么东东？其实它是一个模板引擎。 那什么是模板引擎？ 模板引擎就是基于模板配合数据构造出字符串输出的一个组件。比如下面的函数就是一个模板引擎： function examResult (data) { return `${data.name}同学一年级期末考试语文${data.chinese}分，数学${data.math}分，位于年级第${d...
nodejs 模板引擎nunjucks使用
qq_34870529的博客
10-14 388
使用nunjucks实现登录功能 1、server.js const Koa = require("koa"); const nunjucks = require("nunjucks"); const views = require("koa-views"); const Router = require('koa-router'); const parser = require('koa-parser'); const app = new Koa(); const router = new R
从一道题目学习Nunjucks模板
2301_76869453的博客
09-08 199
在 JavaScript 中，global 是一个预定义的全局对象。它表示全局作用域，也就是说，在任何地方都可以访问它的属性和方法。在 Node.js 中，global 对象的属性和方法可以在任何模块中使用，而不需要使用 require() 来导入它们。例如，在 Node.js 中，您可以使用 global.process 来访问 process 对象，而不需要使用 require('process')
if判断语句
weixin_42214422的博客
01-19 240
if判断 三种 if if后的条件成立，则执行if中缩进的代码块 if 可以嵌套使用，可以嵌套多次，注意缩进，同一级别代码缩进相同 代码块： 同一缩进级别的代码，三个代码缩进级别一样，即运行级别一样，运行顺序为从上到下 布尔值为False数据有哪些: 0, None, ‘’, [], {} 布尔值可以直接用来判断 变量名也可以用来判断，因为可以变量名指向的值对应的就是True或False if 条件: 代码1 代码2 代码3 if…else else 不能单独使用，必须和if，while，for配合
nodejs02:模板引擎
斜光的博客
05-18 342
模板引擎 模板引擎是web应用中动态生成html的工具，负责将数据和模板结合； 常见模板引擎有：ejs、jade（现更名为pug）、Handlebars、Nunjucks、Swig等； 使用模板引擎可以是项目结构更加清晰，结构更加合理，让项目维护变得更简单 pug模板引擎的使用 const Koa = require("koa"); const Router = require("koa-router"); const views = require("koa-views"); let app = ne
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pro1822

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值