nunjucks如何使用？

基本的使用

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)

{% 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如何使用？相关推荐

前端模板Nunjucks简介
参考资料: https://mozilla.github.io/nunjucks/ https://mozilla.github.io/nunjucks/templating.html https:/ ...
koa --- nunjucks在Koa中的使用、中间件的配置
Nunjucks在Koa中的应用 app.js const koa = require('koa'); const app = new koa(); const router = require('. ...
koa --- nunjucks
安装: npm install koa-nunjucks-2 --save 目录结构 |--- controller/ | |--- home.js |--- service/ | |--- home ...
nunjucks渲染富文本解析错误输出字符串而不是元素
今天遇到个坑,nunjucks 的插入变量{{}}输出的是字符串,而我用富文本编辑器插入数据库的是字符串,它不解析成元素(html),怎么办? 用什么方法引入它能成html? 网上查,没这个资料因为 ...
nunjucks.js模板渲染
直接用 script 引入文件: <script src="nunjucks.js"></script> 是使用 render 来直接渲染文件,这种方式支持 ...
小试牛刀之NunJucks模板引擎
NunJucks模板引擎 NunJucks中文文档模板引擎有很多,我之前就曾用过ejs,都是对页面进行渲染.接下来带大家简单体验一下Nunjucks.真别说,插值语法有点vue的那股味道了. 初试N ...
js模板引擎Nunjucks
js模板引擎Nunjucks Nunjucks中文文档
thinkjs能在浏览器html文件,thinkjs框架的默认模板引擎Nunjucks的中文文档
Node 端使用 $ npm install nunjucks 0 $npminstallnunjucks 下载后可直接 require('nunjucks') 使用浏览器端使用可直接使用 nun ...
Nunjucks Error: 解决方案
hexo d报错 FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/trouble ...
Nunjucks简介基本使用教程
Nunjucks简介: Nunjucks 是一个功能丰富.强大的 JavaScript 专用模板引擎.Nunjucks 提供丰富的语言特性和块继承.自动转移.宏和异步控制等等. 重点要关注的是,Nu ...

nunjucks如何使用？

基本的使用

nunjucks如何使用？相关推荐

最新文章

热门文章