nunjucks如何使用？

時間 2020-01-25

標籤 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.htmlcss

<!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遵循一個蘿蔔一個坑原則，本身寫特殊的部分。html

ok！使用這個模板引擎來寫一個頁面吧！java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。