3分钟教你学会你如何使用Nunjucks模板-1
npm install nunjucks
在 node 端，‘views’ 为相对于当前工作目录 (working directory) 的路径。在浏览器端则为一个相对的 url，最好指定为绝对路径 (如 ‘/views’)
app.js:
const express = require('express') // 引入express
const nunjucks = require('nunjucks') // 引入nunjucks
const path = require('path') // 引入path
var app = express();
nunjucks.configure('views', {
autoescape: true, // 控制输出是否被转义
express: app, // 传入 express 实例初始化模板设置
watch: true // 启用模板文件监视,文件一旦发生改变,重新编译
});
// 使用 render 来直接渲染文件，这种方式支持继承(extends)和包含(include)模板,下面会介绍到
app.get('/', function(req, res, next) {
res.render('index.html', {
foo: 'bar // 可以在页面上直接定义变量
});
});
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>首页</title>
</head>
<body>
<h1>Hello World</h1>
<h2>{{ foo }}</h2><!-- 可以将页面上定义的变量直接进行渲染 -->
</body>
</html>
运行结果,如下图所示:
随着项目的更新与完善,app.js页面上会一堆类似于app.get('/login')等类似于路由的方法,十分不专业,这时候我们就需要引入router了,然后nunjucks模板也需要进一步优化使用方法
- 在
views下面新建一个layout文件夹 - 在
layout文件夹下面新建一个`layout.html’文件,作为模板文件
layout.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>首页</title>
<!-- 页面公共 css -->
<link rel="stylesheet" type="text/css" href="/public/css/iconfont.css" />
<!-- 填充head内容预留位置，例如 css,实际页面应用的时候将会被填充 -->
{% block head %}
{% endblock %}
</head>
<body>
<div class="wrapper">
{% include "./header.html" %} <!-- 还可以把公共的组件提取出去,那个页面有需要就用include的方式加载进来 -->
</div>
<!-- 将来页面要往这里填充具体的页面内容 -->
{% block main %}
{% endblock %}
{% include "./footer.html" %}<!-- 加载公共的footer组件 -->
<!-- 公共的js -->
<script src="/public/js/common.js"></script>
<!-- 填充 script 脚本内容预留位置 -->
{% block script %}
{% endblock %}
</body>
</html>
index.html:
{% extends "./layout/layout.html" %} <!-- 引入定义好的layout布局模板 -->
{% block head %}<!-- 填充head部分的代码内容 -->
<link rel="stylesheet" type="text/css" href="/public/css/page-sj-qa-login.css" />
<link rel="stylesheet" type="text/css" href="/public/css/page-sj-qa-logined.css" />
<style>
.sui-pagination .disabled a {
background-color: #fafafa !important;
color: #999999 !important;
}
</style>
{% endblock %}
{% block main %} <!-- 填充main部分的代码内容 -->
{% include "./layout/navbar.html" %}<!-- 加载navbar组件 -->
<div class="wrapper">
<!-- 首页的主要内容代码 -->
</div>
{% endblock %}
{% block script %}<!-- 填充script部分的代码内容 -->
{% endblock %}
未完待续…