nunjucks模板設計一個頁面

時間 2020-01-25

標籤 nunjucks 模板設計一個頁面简体版

原文原文鏈接

使用nunjucks代替原來的ejs，由於這個更強大，是node中主流的模板引擎
nunjucks官網javascript

配置使用 nunjucks 模板引擎

nunjucks 模板引擎沒有對模板文件名的後綴名作特定限制
若是文件名是 a.html 則渲染的時候就須要傳遞 a.html
若是文件名是 b.nujs 則傳遞 b.nujscss

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

以上是配置引擎模板，模板語法以下：html

模板語法

{% extends "layout.html" %}表示繼承layout.html這個文件，能夠使用公公的部分，而後本身加入特殊的部分，好比這裏的佈局頁面就是公共的java

{% block style %}
  {% endblock %}

這個表明，蘿蔔填坑，一個落不一個坑，一個個文件寫這個，另外一個文件記性填，也能夠只引入不填，不過沒有什麼效果node

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

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

具體看下面的代碼吧！！！bootstrap

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>

<!-- 頭部 -->
<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>

<!-- 側邊欄 -->
<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>

相關標籤/搜索

每日一句

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