nunjucks模板設計一個頁面

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

使用nunjucks代替原來的ejs,因為這個更強大,是node中主流的模板引擎 "nunjucks官網" 配置使用 nunjucks 模板引擎 nunjucks 模板引擎沒有對模板文件名的尾碼名做特定限制 如果文件名是 a.html 則渲染的時候就需要傳遞 a.html 如果文件名是 b.nujs ...


使用nunjucks代替原來的ejs,因為這個更強大,是node中主流的模板引擎
nunjucks官網

配置使用 nunjucks 模板引擎

nunjucks 模板引擎沒有對模板文件名的尾碼名做特定限制
如果文件名是 a.html 則渲染的時候就需要傳遞 a.html
如果文件名是 b.nujs 則傳遞 b.nujs

import express from 'express'
import config from './config'
import nunjucks from 'nunjucks'
const app = express()
import router from './router'

nunjucks.configure(config.viewPath, {
  autoescape: true,
  express: app
})

app.use(router)


app.listen(3000, () => {
  console.log('server is running at port 3000...')
})

config.js

import { join } from 'path'

export default {
  viewPath: join(__dirname, '../views'),
  node_modules_path: join(__dirname, '../node_modules'),
  public_path: join(__dirname, '../public')
}

處理路由

import express from 'express'

// 創建一個路由容器,將所有的路由中間件掛載給路由容器
const router = express.Router()

router.get('/', (req, res, next) => {
  res.render('index.html')
})

// 通過 export default 暴露的介面成員不能定義的同時直接暴露
// 最好先定義,再暴露
// export default 可以直接暴露字面量 {} 123
export default router

以上是配置引擎模板,模板語法如下:

模板語法

{% extends "layout.html" %}表示繼承layout.html這個文件,可以使用公公的部分,然後自己加入特殊的部分,比如這裡的佈局頁面就是公共的

{% block style %}
  {% endblock %}

這個代表,蘿蔔填坑,一個落不一個坑,一個個文件寫這個,另一個文件記性填,也可以只引入不填,不過沒有什麼效果

{% include "header.html" %}這個表示引入文件代替這個位置

這裡header和sidebar都是佈局中公共的部分

具體看下麵的代碼吧!!!

index.html

{% extends "layout.html" %}

{% block style %}
{% endblock %}

{% block body %}
<!-- 其它頁面自已調整吧 -->
<div class="container-fluid">
  <!-- 個人資料 -->
  <div class="body teacher-profile">
    <div class="profile">
      <div class="row survey">
        <div class="col-md-3">
          <div class="cell money">
            <i class="fa fa-money"></i>
            <span>我的收入</span>
            <h5>¥11.11</h5>
          </div>
        </div>
        <div class="col-md-3">
          <div class="cell th">
            <i class="fa fa-th"></i>
            <span>課程數量</span>
            <h5>12</h5>
          </div>
        </div>
        <div class="col-md-3">
          <div class="cell user">
            <i class="fa fa-user"></i>
            <span>用戶數量</span>
            <h5>236</h5>
          </div>
        </div>
        <div class="col-md-3">
          <div class="cell eye">
            <i class="fa fa-eye"></i>
            <span>瀏覽量</span>
            <h5>22435</h5>
          </div>
        </div>
      </div>
      <div class="chart">
        <div id="main" style="width: 600px;height:400px;"></div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block script %}
<script src="node_modules/echarts/dist/echarts.js"></script>
  <script>
    // 基於準備好的dom,初始化echarts實例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定圖表的配置項和數據
    var option = {
      title: {
        text: 'ECharts 入門示例'
      },
      tooltip: {},
      legend: {
        data: ['銷量']
      },
      xAxis: {
        data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
      },
      yAxis: {},
      series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };

    // 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option);
  </script>
{% endblock %}

layout.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>學IT - 後臺管理系統</title>
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="node_modules/nprogress/nprogress.css">
  <link rel="stylesheet" href="public/less/index.css">
  {% block style %}
  {% endblock %}
</head>

<body>
  {% include "header.html" %}
  <!-- 主體 -->
  <div class="main">
    {% include "sidebar.html" %}
    {% block body %}
    {% endblock %}
  </div>
  <script src="node_modules/jquery/dist/jquery.js"></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
  <script src="node_modules/nprogress/nprogress.js"></script>
  <script src="public/js/common.js"></script>
  {% block script %}
  {% endblock %}
</body>

</html>

header.html

<!-- 頭部 -->
<div class="header">
  <nav class="navbar navbar-custom">
    <div class="navbar-header">
      <a href="javascript:;" class="navbar-brand">
        <i class="fa fa-navicon"></i>
      </a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li>
        <a href="javascript:;">
          <i class="fa fa-bell"></i>
          <span class="badge">8</span>
        </a>
      </li>
      <li>
        <a href="./settings.html">
          <i class="fa fa-user"></i> 個人中心
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <i class="fa fa-sign-out"></i> 退出
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <i class="fa fa-tasks"></i>
        </a>
      </li>
    </ul>
  </nav>
</div>

sidebar.html

<!-- 側邊欄 -->
<div class="aside">
  <!-- 個人資料 -->
  <div class="profile">
    <!-- 頭像 -->
    <div class="avatar img-circle">
      <img src="public/uploads/avatar.jpg">
    </div>
    <h4>布頭兒</h4>
  </div>
  <!-- 導航菜單 -->
  <div class="navs">
    <ul class="list-unstyled">
      <li>
        <a href="./index.html" class="active">
          <i class="fa fa-home"></i> 儀錶盤
        </a>
      </li>
      <li>
        <a href="./user_list.html">
          <i class="fa fa-bell"></i> 用戶管理
        </a>
      </li>
      <li>
        <a href="./teacher_list.html">
          <i class="fa fa-bell"></i> 講師管理
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <i class="fa fa-cog"></i> 課程管理
          <i class="arrow fa fa-angle-right"></i>
        </a>
        <ul class="list-unstyled">
          <li>
            <a href="./course_add.html">
                                     課程添加
                                </a>
          </li>
          <li>
            <a href="./course_list.html">
                                    課程列表
                                </a>
          </li>
          <li>
            <a href="./course_category.html">
                                    課程分類
                                </a>
          </li>
          <li>
            <a href="./course_topic.html">
                                    課程專題
                                </a>
          </li>
        </ul>
      </li>
      <li>
        <a href="./advert_list.html">
          <i class="fa fa-bell"></i> 廣告管理
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <i class="fa fa-cog"></i> 系統設置
          <i class="arrow fa fa-angle-right"></i>
        </a>
        <ul class="list-unstyled">
          <li>
            <a href="javascript:;">
                                    網站設置
                                </a>
          </li>
          <li>
            <a href="javascript:;">
                                     許可權管理
                                </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

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

更多相關文章
  • 想記錄一下最近解決的一些問題,發現還是博客最合適,雖然之前從來沒寫過,希望以後能養成這個好習慣。 家裡有一臺台式機裝著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,
  • 基本的使用 login.html layout.html 還有header和sidebar和foot都是屬於佈局里的公共樣式,block遵循一個蘿蔔一個坑原則,自己寫特殊的部分。 "ok!使用這個模板引擎來寫一個頁面吧!" ...
  • 寫一個小介面,用postman測試介面是否可行
一周排行
  • 本筆記摘抄自: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