nunjucks如何使用？
Posted ygjzs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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)
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遵循一个萝卜一个坑原则，自己写特殊的部分。
以上是关于nunjucks如何使用？的主要内容，如果未能解决你的问题，请参考以下文章
您如何按包含标签的帖子数量对博客帖子标签列表进行排序（在 Eleventy 中使用 Nunjucks）？