基本的使用

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. css中flex布局

    一.Flex布局是什么? Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ display: flex; ...

  2. Go语言实现：【剑指offer】从上往下打印二叉树

    该题目来源于牛客网<剑指offer>专题. 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 不需分层,一维数组. Go语言实现: /** * Definition for a bi ...

  3. c++算法：计算行列式的值（详细讲解）

    参考了:https://blog.csdn.net/u011885865/article/details/42032229 需要的基础:学过<线性代数>,知道行列式值的求法 基本公式:对于 ...

  4. 数据清洗：按照进行数据清洗，并将清洗后的数据导入hive数据库中。

    虚拟机: hadoop:3.2.0 hive:3.1.2 win10: eclipse 两阶段数据清洗: (1)第一阶段:把需要的信息从原始日志中提取出来 ip:    199.30.25.88 ti ...

  5. malloc返回地址的对齐问题

    http://man7.org/linux/man-pages/man3/malloc.3.html RETURN VALUE         top The malloc() and calloc( ...

  6. RFC笔记—IP Version 6 Addressing Architecture

    IP Version 6 Addressing Architecture,RFC4291 It includes the basic formats for the various types of ...

  7. Nginx 缓存命中率

    # 在http头部显示命中方式 location ~* ^.*\.(js|ico|gif|jpg|jpeg|png)$ { proxy_redirect off; proxy_set_header H ...

  8. zabbix-mysql迁移分离

    io过高,迁移mysql 停掉zabbix 导出数据库的zabbix库 导入到新机器,并启动mysql 1:修改zabbix_server.conf文件里DB相关的地址,用户名和密码. vim /et ...

  9. [Python]JavaScript VS Python 函数

    js function 相当于 python def js语句结束符; python为缩进符 JavaScript /*定义*/ function 函数名(参数1,参数2,参数3...){ 函数体 } ...

  10. Rust学习--变量

    0x0 每种编程语言都有变量的概念,我们可以把变量理解为最简单的存储方式,它是编码过程中是必不可少的. Rust的变量很有特色.变量不可变的特性让人想起了Erlang.以及后面的模式匹配,我觉得作者应 ...