nunjucks如何使用?

来源:https://www.cnblogs.com/ygjzs/archive/2020/01/24/12232159.html

基本的使用 login.html layout.html 還有header和sidebar和foot都是屬於佈局里的公共樣式,block遵循一個蘿蔔一個坑原則,自己寫特殊的部分。 "ok!使用這個模板引擎來寫一個頁面吧!" ...


基本的使用

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!使用這個模板引擎來寫一個頁面吧!


您的分享是我們最大的動力!

更多相關文章
  • 1. HttpRequest對象 伺服器接收到http協議的請求後,會根據報文創建HttpRequest對象,這個對象不需要我們創建,直接使用伺服器構造好的對象就可以。視圖的第一個參數必須是HttpRequest對象,在django.http模塊中定義了HttpRequest對象的API。 1.1 ...
  • 微信公眾號: "Dotnet9" ,網站: "Dotnet9" ,問題或建議: "請網站留言" , 如果對您有所幫助: "歡迎贊賞" 。 .NET CORE(C ) WPF 值得推薦的動畫菜單設計 閱讀導航 1. 本文背景 2. 代碼實現 3. 本文參考 4. 源碼 1. 本文背景 YouTube上 ...
  • 想記錄一下最近解決的一些問題,發現還是博客最合適,雖然之前從來沒寫過,希望以後能養成這個好習慣。 家裡有一臺台式機裝著Win10,還有一臺macbook,平時遇到需要用Win系統又不想坐在書桌前時,我通常是用macbook遠程連接到台式機上操作。但女票同時也要用台式機時,這麼操作顯然是行不通的。這時 ...
  • redis中動態字元串sds相關的文件為:sds.h與sds.c 一、數據結構 redis中定義了自己的數據類型"sds",用於描述 char*,與一些數據結構 1 typedef char *sds; 2 3 /* Note: sdshdr5 is never used, we just acce ...
  • 定義數據模型 使用mongoose操作資料庫 "可參考文檔進行使用" ...
  • "mongodb參考" "mongoose官網" mongoose用起來更便捷,更方便些
  • nvm Node Version Management nvm list 查看所有已安裝的 node 版本 nvm install 版本號 安裝指定版本的 node nvm use 版本號 切換到指定版本號 nvm proxy 代理地址 配置代理進行下載 nrm(node registry mana ...
  • jsonp 以前學過,當時就挺懵的,還全忘了,這次就當複習了一遍jsonp,
一周排行
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/8135083.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講行為型設計模式的第九個模式--訪問者模式。如果按老規矩,先從名稱上來看這個模式,我根本不能獲得任何對理解該模式有用的信息, 而且這個 ...
  • 微信公眾號:【 "Dotnet9的博客" 】,網站:【 "Dotnet9" 】,問題或建議:【 "請網站留言" 】, 如果對您有所幫助:【 "歡迎贊賞" 】。 開源C WPF控制項庫系列: "(一)開源C WPF控制項庫《MaterialDesignInXAML》" "(二)開源C WPF控制項庫《Pan ...
  • 如今,當談到 WPF 時,我們言必稱 MVVM、框架(如 Prism)等,似乎已經忘了不用這些的話該怎麼使用 WPF 了。當然,這裡說的不用框架和 MVVM,並不是說像使用 Winform 那樣使用 WPF,而是追本溯源,重識 WPF 與生俱來的綁定和命令的風采。 ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/8176974.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講行為型設計模式的第十個模式--備忘錄模式,先從名稱上來看。備忘錄模式可以理解為對某個對象的狀態進行保存,等到需要恢復的時 候,可以從 ...
  • 前言 在兩年多以前就聽聞 Blazor 框架,是 .Net 之父的業餘實驗性項目,其目的是探索 .Net 與 WebAssembly 的相容性和應用前景。現在這個項目已經正式成為 Asp.Net Core 框架的一部分,公開了預覽版,官方教程也基本寫好上線了。就著這個機會,順便體驗一下這個框架用起來 ...
  • .NET web開發者在開發過程中,一定都踩過的坑,明明修改了js文件,可是部署到生產環境,客戶反饋說:“還是報錯啊”。。然後一臉懵逼的去伺服器上看文件,確實已經更新了。有經驗的coder可能就想到了,肯定是客戶端瀏覽器緩存搞的鬼。 此時會告訴客戶,請Crtl+F5刷新一下,這時,客戶會說:“Ctr ...
  • 哈嘍..大家好 很久沒有更新了,今天就來一篇最近開發用到的功能,那就是中英文切換,這個實際上也不是高大上,先說一下原理,在.NET Core框架中給我們提供了全球化的類,叫做Localization,其官方的文檔地址傳送門。 在我的項目中,我是這樣操作的,你想用別的方式,也可以看文檔自己去搞。這個已 ...
  • WPF允許使用Image元素顯示點陣圖。然而,按這種方法顯示圖片的方法完全是單向的。應用程式使用現成的點陣圖,讀取問題,併在視窗中顯示點陣圖。就其本身而言,Image元素沒有提供創建和編輯點陣圖信息的方法。 這正是WriteableBitmap類的用武之地。該類繼承自BitmapSource,BitmapS ...
  • 記錄LINQ學習過程。 概要 LINQ是一種“語言集成”的查詢表達式,使用LINQ可以智能提示和進行類型檢查。C#里可以編寫的LINQ查詢有SQL資料庫、XML文檔、ADO.NET數據集、支持IEnumerable和IEnumerable的對象。使用LINQ,可以簡單對數據源進行分組、排序、篩選。有 ...
  • 這兩天複習了下Request以及Response部分的內容。 主要內容 1. HTTP協議:響應消息 2. Request對象 3. Response對象 4. ServletContext對象 HTTP: 概念:Hyper Text Transfer Protocol 超文本傳輸協議 傳輸協議:定 ...
x