基本的使用

const nunjucks = require('nunjucks')

// nunjucks.configure({ autoescape: true });

// const result = nunjucks.renderString('Hello {{ username }}', { username: 'James' });

// console.log(result)

// 这里的 views 相对路径是受 node 执行路径影响的

nunjucks.configure('views', { autoescape: true });

// var result = nunjucks.render('index.html', { foo: 'bar' });

var result = nunjucks.render('login.html');

console.log(result)

login.html

{% extends "layout.html" %}

{% block body %}

<h1>这是登陆页</h1>

{% endblock %}

{% block script %}

<script>

  window.alert('hello login')

</script>

{% endblock %}

layout.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <link rel="stylesheet" href="normalize.css">

  {% block style %}

  {% endblock %}

</head>

<body>

  {% include "header.html" %}

  {% include "sidebar.html" %}

  {% block body %}

  {% endblock %}

  {% include "footer.html" %}

  <script src="jquery.js"></script>

  {% block script %}

  {% endblock %}

</body>

</html>

还有header和sidebar和foot都是属于布局里的公共样式，block遵循一个萝卜一个坑原则，自己写特殊的部分。

ok！使用这个模板引擎来写一个页面吧！

nunjucks如何使用？的更多相关文章

  1. nunjucks.js模板渲染

    直接用 script 引入文件: <script src="nunjucks.js"></script> 是使用 render 来直接渲染文件,这种方式支持 ...

  2. Koa与Node.js开发实战（3）——Nunjucks模板在Koa中的应用（视频演示）

    技术架构: ​ 在Koa中应用Nunjucks,需要先把Nunjucks集成为符合Koa规格的中间件(Middleware),从本质上来讲,集成后的中间件的作用是给上下文对象绑定一个render(vi ...

  3. Nunjucks：Mozilla 开发的 JavaScript 模板引擎

    Nunjucks 中文网站:https://nunjucks.bootcss.com/

  4. iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 视图Nunjucks

    视频地址:https://www.cctalk.com/v/15114923888328 视图 Nunjucks 彩虹是上帝和人类立的约,上帝不会再用洪水灭人. 客户端和服务端之间相互通信,传递的数据 ...

  5. 前端模板Nunjucks简介

    参考资料: https://mozilla.github.io/nunjucks/ https://mozilla.github.io/nunjucks/templating.html https:/ ...

  6. nunjucks模板设计一个页面

    使用nunjucks代替原来的ejs,因为这个更强大,是node中主流的模板引擎 nunjucks官网 配置使用 nunjucks 模板引擎 nunjucks 模板引擎没有对模板文件名的后缀名做特定限 ...

  7. 2015年最佳的12个 CSS 开发工具推荐

    CSS所能做的就是改变网页的布局.排版和调整字间距等,但编写 CSS 并不是一项容易的任务,当你接触新的 CSS3 属性及其各自的浏览器前缀的时候,你会发现很伤脑经.值得庆幸的是一些优秀的开发人员提供 ...

  8. 在 2016 年学 JavaScript 是一种什么样的体验？

    转 译者:方应杭 嘿,我最近接到一个 Web 项目,不过老实说,我这两年没怎么接触 Web 编程,听说 Web 技术已经发生了一些变化.听说你是这里对新技术最了解的 Web 开发工程师? 准确地说,我 ...

  9. github上最全的资源教程-前端涉及的所有知识体系

    前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...

随机推荐

  1. 机器学习（ML）九之GRU、LSTM、深度神经网络、双向循环神经网络

    门控循环单元(GRU) 循环神经网络中的梯度计算方法.当时间步数较大或者时间步较小时,循环神经网络的梯度较容易出现衰减或爆炸.虽然裁剪梯度可以应对梯度爆炸,但无法解决梯度衰减的问题.通常由于这个原因, ...

  2. POJ_1564_dfs

    题目描述: 每组数据给定一个大的数,和一系列降序的数值,要求列出不重复的数值中挑选的数的和为大数的方案,每一种方案里,每个数值最多只能使用一次. 思路: dfs基础题,每次记录大数和当前总和的差值,当 ...

  3. EMC NW NMM to backup MS AG

    To use EMC NW NMM to backup MS SQL always on database, that is a simple and safe way to protector da ...

  4. 1276:【例9.20】P2758 编辑距离

    题目传送门[(https://www.luogu.com.cn/problem/P2758)] 题目描述 设A和B是两个字符串.我们要用最少的字符操作次数,将字符串A转换为字符串B.这里所说的字符操作 ...

  5. C++：重载前置++/--返回引用，重载后置++/--返回临时对象

    标准库中iterator对++/--的重载代码如下: _Myiter& operator++() { // preincrement ++*(_Mybase *)this; return (* ...

  6. 安装Debian的磨磨唧唧

    安装Debian的磨磨唧唧 唆使VMware罢工的微软 这两天心血来潮想折腾,拆了我亲爱的Ubuntu.装个Debian 不过因为加入了微软的insider版本 就很尴尬的发现当我打开我的VMware ...

  7. Linux系统下常见的数据盘分区丢失的问题以及对应的处理方法

    在修复数据前,您必须先对分区丢失的数据盘创建快照,在快照创建完成后再尝试修复.如果在修复过程中出现问题,您可以通过快照回滚将数据盘还原到修复之前的状态. 前提条件 在修复数据前,您必须先对分区丢失的数 ...

  8. 多校二 1003Maximum Sequence 模拟

    Maximum Sequence Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  9. RaspberryPi 3b+ 安装OpenWrt教程

    layout: post title: "RaspberryPi 3b+ 安装OpenWrt教程" date: 2019-09-28 22:00:00 +0800 categori ...

  10. django 定时任务 django-crontab 的使用

    成功例子如下图: 1.前言 在做 django 开发需求时,多多少少都会遇到需要定时任务的功能,比如定时执行任务,检查订单之类的.可能是一段时间,比如每隔 10分钟执行一次,也可能是定点时间,比如 1 ...