基本的使用

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. tensorflow variable scope 变量命名空间和变量共享

    import tensorflow as tf def f(): var = tf.Variable(initial_value=tf.random_normal(shape=[2])) return ...

  2. codeforces 1025B Weakened Common Divisor(质因数分解)

    题意: 给你n对数,求一个数,可以让他整除每一对数的其中一个 思路: 枚举第一对数的质因数,然后暴力 代码: #include<iostream> #include<cstdio&g ...

  3. Standby Redo Logs的前世今生与最佳实践

    编辑手记:使用过Data Guard的人应该对于Standby Redo Logs都不陌生,在配置了 Standby Redo Logs的standby中,能够进行日志的实时应用,同时Standby ...

  4. Go语言实现：【剑指offer】包含min函数的栈

    该题目来源于牛客网<剑指offer>专题. 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数. 时间复杂度应为O(1). Go语言实现: var myList = ...

  5. Centos7.6安装zabbix留纪录

    1)查看系统版本 [root@zabbix-s41 ~]# cat /etc/redhat-release CentOS Linux release (Core) [root@zabbix-s41 ~ ...

  6. Flink系统之Table API 和 SQL

    Flink提供了像表一样处理的API和像执行SQL语句一样把结果集进行执行.这样很方便的让大家进行数据处理了.比如执行一些查询,在无界数据和批处理的任务上,然后将这些按一定的格式进行输出,很方便的让大 ...

  7. git-gitlab-github集合

    git-gitlab-github集合 git(一):     git简介 git(二):     git安装和简单使用 git(三):     git的分支管理 git(四):     git的远程 ...

  8. 惊讶！缓存刚Put再Get居然获取不到？

    最近一直在老家远程办公,微信突然响了下,有同事说遇到了一个奇怪的问题,让我帮忙看下. 现象就是标题所说的缓存获取不到的问题,我一听感觉这个问题挺有意思的,决定一探究竟. 下面给出部分代码还原下案发现场 ...

  9. RabbitMQ配置死信队列

    死信队列 消息传输过程中难免会产生一些无法及时处理的消息,这些暂时无法处理的消息有时候也是需要被保留下来的,于是这些无法被及时处理的消息就变成了死信. 既然需要保留这些死信,那么就需要一个容器来存储它 ...

  10. C# 中Trim()、TrimStart()、TrimEnd()、ToUpper()、ToLower()的用法

    Trim():删除字符串头部及尾部出现的空格,删除的过程为从外到内,直到碰到一个非空格的字符为止,所以不管前后有多少个连续的空格都会被删除掉. TrimStart():只删除字符串的头部的空格. Tr ...