nunjucks 模板语法基本使用（部分）

插入后台传入前台变量

{{变量名}}

循环后台数据

  <ul>
  {% for item in items%}
    <li>{{ item.title }}</li>
  {% endfor %}
  </ul>

条件渲染

{% if isTrue%}
  为真 渲染此
{% else %}
  否则 渲染else
{% endif %}

继承

设置共有的 layout.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>Document</title>
</head>
<body>
  <div>
    <a href="/">首页</a>
    <a href="/image">图片</a>
    <a href="/video">视频</a>
  </div>
  {% block content %}{% endblock %}
</body>
</html>

在需要使用的地方继承

{% extends "./views/layout.html" %}  // 选择继承的文件位置
{% block content %}  // 渲染的位置 content
  <h1>图片</h1>
{% endblock %}

include

拎出需要在多个地方使用的部分 footer.html

<div>
  <p>这是页脚</p>
</div>

在需要使用的地方嵌入

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

{% block content %}

  <h1>视屏</h1>

  {% include "views/footer.html" %}  // 文件路径

{% endblock %}

具体官网 https://nunjucks.bootcss.com/templating.html

posted @ 2022-03-23 03:58  老oo  阅读(245)  评论(0)  编辑  收藏  举报