06-nunjucks模板语法

最新推荐文章于 2024-07-12 15:51:39 发布

L_yang\

最新推荐文章于 2024-07-12 15:51:39 发布

阅读量256

点赞数

分类专栏： nodejs 文章标签： java 数据库 servlet

本文链接：https://blog.csdn.net/qq_68478665/article/details/126485614

版权

nodejs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

循环语句

// 网页
<body>
    <h1>模板语法</h1>
    <p>{{title}}</p>
    <ul>
        {% for student in studentList %}
        <li>{{student}}</li>
        {% endfor %}
    </ul>

//后台 
router.get("/",async ctx =>{
    let studentList = ["A","B","C","D"]
    await ctx.render("index",{
        title:"首页",
        studentList
})
});

studentList是简写 全写是studentList：studentList

前端在ul标签内，li标签外{{%for a in list%}} 结尾在li外，ul内写{{endfor}}结束for循环

条件判断判断是否登录

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

//后台 
    let studentList = ["小明","小红","小黄"];
    await ctx.render("one", {
        title: "hello nunjucks!",
        studentList,
        isLogin: true,
        username: "amdin"

模板继承

让其它的页面，继承模板页面的公共部分

公共部分新建被继承页面然后在结尾写 {% block content %} {% endblock %}

在继承的页面删掉body以及html的内容只留下中间{% extends "路径" %}来引入继承被继承的页面，在继承页面顶部使用{% block content %}，内容结尾添加{% endblock %}以此来达到继承的效果。

// 公共部分 
<body>
    <div>
        <a href="">首页</a>
        <a href="/images">图片</a>
        <a href="/video">视频</a>
    </div>
    {% block content %} {% endblock %}
</body>

// 继承部分 
{% extends "./views/layout.html" %}

{% block content %}
    <h1>模板语法</h1>
    <!-- 循环语句 -->
    <ul>
        {%  for student in studentList  %}
        <li>{{student}}</li>
        {% endfor %}
    </ul>
    <!-- 条件判断 -->
    
    {% if isLogin %}
    <p>欢迎你：{{username}}</p>
    {% else %}
    <p>请登录...</p>
    {% endif %}

{% endblock  %}

include

某些页面可能会包含相同的组件，例如页脚、侧边栏，可以通过include引入

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

{% block content %}
    <h1>模板语法</h1>
    <!-- 循环语句 -->
    <ul>
        {%  for student in studentList  %}
        <li>{{student}}</li>
        {% endfor %}
    </ul>
    <!-- 条件判断 -->
    
    {% if isLogin %}
    <p>欢迎你：{{username}}</p>
    {% else %}
    <p>请登录...</p>
    {% endif %}
{% include "./views/footer.html" %}
{% endblock  %}