nunjucks a page template design

Use nunjucks replace the original ejs, because the more powerful, is in the mainstream of the node template engine
nunjucks official website

Nunjucks configured to use template engine

nunjucks template engine did not make specific limitations on the extension of the template file name
if the file name is a.html is rendered when you need to pass a.html
If the file name is b.nujs is passed 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')
}

Handles the routing

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

The above is the configuration template engine, template syntax is as follows:

Template syntax

{% extends "layout.html" %}Layout.html this document represents the inheritance, part of the father can be used, and then adding their own special part, such as a page layout here is public

{% block style %}
  {% endblock %}

The representatives, radish filled pit, a drop is not a pit, a file write this, another file memory to fill, you can not fill only introduced, but there is no effect

{% include "header.html" %}This file instead redistributes this location

Here header and sidebar layout are part of the public

Specific look at the code below it! ! !

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>