基本的使用

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. python笔记带你走向测试开发之路-第一篇(数据类型之数字，序列)

    数字 数字的类型 数字是 Python中比较常用的数据类型,数字有可以分为: 整型 int如 1,2,3 浮点型 float如 2.1,3.5 长整型 long如 3L,需要注意的是 Python2. ...

  2. javascript get set读取器

    class Person{ constructor(name, id){ let _name = name, _id = id; Object.defineProperties(this, { nam ...

  3. 开发时从宿主机连接容器中的MySQL

    从宿主机连接Docker容器中的MySQL 刚接触Docker,电脑安装Docker后,使用docker命令pull了一个MySQL5.6的Docker镜像,之后docker run启动创建容器. 可 ...

  4. Tensorflow和pytorch安装（windows安装）

    一. Tensorflow安装 1. Tensorflow介绍 Tensorflow是广泛使用的实现机器学习以及其它涉及大量数学运算的算法库之一.Tensorflow由Google开发,是GitHub ...

  5. CodeForces 429B Working out DP

    E - Working out Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Su ...

  6. 珠峰-buffer-流事件

    #### Buffer // 字符串的二进制转10进制 let r = parseInt('11111111', 2); console.log(r); // 打印 255 // Number类型转为 ...

  7. h5笔记1

    1.HTML中不支持 空格.回车.制表符,它们都会被解析成一个空白字符 2.适用于大多数 HTML 元素的属性: class 为html元素定义一个或多个类名(classname)(类名从样式文件引入 ...

  8. MySql的命令介绍

    1,连接数据库服务器命令 mysql -u 用户名 -p 密码 mysql是连接MySql数据库的命令,-u后跟用户名,-p后跟密码,如果登陆后展示"mysql",则表示登录成功. ...

  9. CAP原理

    定义 在一个分布式系统(指系统中的节点互相连接并共享数据)中,当涉及读写操作时,只能保证一致性 (Consistency).可用性 (Availability).分区容错性 (Partition To ...

  10. java工作流系统jflow表单引擎字段扩展组件介绍

    关键词:工作流快速开发平台  工作流流设计  业务流程管理   asp.net 开源工作流  bpm工作流系统  java工作流主流框架  自定义工作流引擎 表单设计器  流程设计器 装饰类图片 用于 ...