Use nunjucks instead of ejs, because this is a more powerful template engine in node
nunjucks official website

Configure to use the nunjucks template engine

The nunjuks template engine does not have specific restrictions on the suffix of template file names
If the file name is a.html, you need to pass in a.html when rendering
Pass b.nujs if the filename is 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')
}

Processing routing

import express from 'express'

// Create a routing container and mount all routing middleware to the routing container
const router = express.Router()

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

// Interface members exposed through export default cannot be defined and exposed directly at the same time
// It's better to define it before exposing it
// export default can directly expose the literal amount {} 123
export default router

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

Template grammar

{% extends "layout.html"%} means inheriting the layout.html file. You can use the public part, and then add special parts yourself. For example, the layout page here is public

{% block style %}
  {% endblock %}

This representative, radish fill in the hole, one by one, one file write this, another file fill in the memory, you can also only import not fill in, but it has no effect

{% include "header.html"%} means to import files instead of this location

Here, the header and sidebar are the common parts of the layout

See the code below!!!

index.html

{% extends "layout.html" %}

{% block style %}
{% endblock %}

{% block body %}
<!-- Adjust other pages -->
<div class="container-fluid">
  <!-- personal data -->
  <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>My income</span>
            <h5>￥11.11</h5>
          </div>
        </div>
        <div class="col-md-3">
          <div class="cell th">
            <i class="fa fa-th"></i>
            <span>Number of courses</span>
            <h5>12</h5>
          </div>
        </div>
        <div class="col-md-3">
          <div class="cell user">
            <i class="fa fa-user"></i>
            <span>Number of users</span>
            <h5>236</h5>
          </div>
        </div>
        <div class="col-md-3">
          <div class="cell eye">
            <i class="fa fa-eye"></i>
            <span>Browse volume</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>
    // Initialize the echarts instance based on the prepared dom
    var myChart = echarts.init(document.getElementById('main'));

    // Specify configuration items and data for the chart
    var option = {
      title: {
        text: 'ECharts Introductory example'
      },
      tooltip: {},
      legend: {
        data: ['Sales volume']
      },
      xAxis: {
        data: ["shirt", "Cardigan", "Chiffon shirt", "trousers", "High-heeled shoes", "Socks"]
      },
      yAxis: {},
      series: [{
        name: 'Sales volume',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };

    // Use the configuration items and data you just specified to display the chart.
    myChart.setOption(option);
  </script>
{% endblock %}

layout.html

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

<head>
  <meta charset="UTF-8">
  <title>learn IT - Background management system</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" %}
  <!-- subject -->
  <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

<!-- head -->
<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> Personal Center
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <i class="fa fa-sign-out"></i> Sign out
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <i class="fa fa-tasks"></i>
        </a>
      </li>
    </ul>
  </nav>
</div>

sidebar.html

<!-- sidebar -->
<div class="aside">
  <!-- personal data -->
  <div class="profile">
    <!-- Head portrait -->
    <div class="avatar img-circle">
      <img src="public/uploads/avatar.jpg">
    </div>
    <h4>Cloth head</h4>
  </div>
  <!-- Navigation menu -->
  <div class="navs">
    <ul class="list-unstyled">
      <li>
        <a href="./index.html" class="active">
          <i class="fa fa-home"></i> Dashboard
        </a>
      </li>
      <li>
        <a href="./user_list.html">
          <i class="fa fa-bell"></i> user management
        </a>
      </li>
      <li>
        <a href="./teacher_list.html">
          <i class="fa fa-bell"></i> Lecturer management
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <i class="fa fa-cog"></i> course management
          <i class="arrow fa fa-angle-right"></i>
        </a>
        <ul class="list-unstyled">
          <li>
            <a href="./course_add.html">
                                     Curriculum additions
                                </a>
          </li>
          <li>
            <a href="./course_list.html">
                                    Course list
                                </a>
          </li>
          <li>
            <a href="./course_category.html">
                                    Curriculum classification
                                </a>
          </li>
          <li>
            <a href="./course_topic.html">
                                    Course topics
                                </a>
          </li>
        </ul>
      </li>
      <li>
        <a href="./advert_list.html">
          <i class="fa fa-bell"></i> Advertising management
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <i class="fa fa-cog"></i> System setup
          <i class="arrow fa fa-angle-right"></i>
        </a>
        <ul class="list-unstyled">
          <li>
            <a href="javascript:;">
                                    Website setup
                                </a>
          </li>
          <li>
            <a href="javascript:;">
                                     Privilege management
                                </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>