nunjucks模板設計一個頁面

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

使用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>

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

-Advertisement-
Play Games
更多相關文章
  • 想記錄一下最近解決的一些問題,發現還是博客最合適,雖然之前從來沒寫過,希望以後能養成這個好習慣。 家裡有一臺台式機裝著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測試介面是否可行
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...