基本的使用

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. Affinity Propagation

    1. 调用方法: AffinityPropagation(damping=0.5, max_iter=200, convergence_iter=15, copy=True, preference=N ...

  2. 谈python3的封装

    这章给大家介绍,如何封装一个简单的python库 首先创建一个以下型式的文件结构 rootFile/ setup.py example_package/ __init__.py example_mod ...

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

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

  4. 使用 Visual Studio 2015 + Python3.6 + tensorflow 构建神经网络时报错：'utf-8' codec can't decode byte 0xcc in position 78: invalid continuation byte

    使用 Visual Studio 2015 + Python3.6 + tensorflow 构建神经网络时报错:'utf-8' codec can't decode byte 0xcc in pos ...

  5. 3803 register initialization

    wim寄存器 window invalid mask,窗口无效屏蔽寄存器,如果某bit为1,则表示该窗口无效,不能使用. 初始化,设置%psr.CWP=0,即当前使用win0:设置wim=2,即只有w ...

  6. Element-UI ( Dropdow )下拉菜单组件command传输对象

    通过 :command绑定对象数据,handleCommand方法处理数据 template <div v-for="(item, index) in FlyWarningList&q ...

  7. HTTP 1.1状态代码及其含义

    HTTP 1.1状态代码及其含义 100  Continue  初始的请求已经接受,客户应当继续发送请求的其余部分.(HTTP 1.1新) 101  Switching Protocols  服务器将 ...

  8. 关于OFFICE 文件在线编辑dsoframer

    下载dsoframer.ocx 系统为32位时:拷贝 dsoframer.ocx  到c:\windows\system32\dsoframer.ocx打开cmd命令行注册  regsvr32.exe ...

  9. html语义化的意义

    易于用户阅读,样式丢失的时候能让页面呈现清晰的结构. 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重. 方便其他设备解析,如盲人阅读器根据语义渲染网页 有利于开发和维护,语义化更具可读性 ...

  10. NodeJs-promise和async_await语法

    Callback hell回调地域 当我们以同步的方式编写耗时的代码,那么就会阻塞JS的单线程,造成CPU一直等待IO完成才去执行后面的代码. 而CPU的执行速度是远远大于硬盘IO速度的,这样等待只会 ...