nunjucks模板设计一个页面

Posted 2021-03-14 跌倒的小黄瓜

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了nunjucks模板设计一个页面相关的知识，希望对你有一定的参考价值。

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

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

以上是关于nunjucks模板设计一个页面的主要内容，如果未能解决你的问题，请参考以下文章

Koa与Node.js开发实战——Nunjucks模板在Koa中的应用（视频演示）