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>

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>

nunjucks模板设计一个页面的更多相关文章

19 01 17 Django 模板返回一个页面
模板问题如何向请求者返回一个漂亮的页面呢? 肯定需要用到html.css,如果想要更炫的效果还要加入js,问题来了,这么一堆字段串全都写到视图中,作为HttpResponse()的参数吗?这样定义 ...
在APP开发中，如何优雅的设计APP页面
1.明确页面设计在整个产品设计中的位置互联网产品设计的流程大致是:产品定位——需求分析——信息架构设计——流程设计——页面框架设计——设计说明——输出设计文档.可以看到页面设计是处于整个流程的后期, ...
如何优雅的设计APP页面？
页面框架设计只是整个产品设计中的一环,不要把眼界局限在这一环,也不要只站需求.只站在交互.只站在视觉上思考问题,从多个角度看问题,你才会学会成长. 产品设计是一个系统工程,单独拧出来其中一个流程来讲, ...
JavaWeb页面静态化之使用freemarker模板生成一个html静态页面
题外话: 页面静态化(展示数据从JSP页面变成HTML页面)实现方式-->模板技术从本质上来讲,模板技术是一个占位符动态替换技术.一个完整的模板技术需要四个元素:①模板语言(使 ...
JavaScript网站设计实践（七）编写最后一个页面改进表单
一.最后一个页面 contact.html.改进表单在该页面实现的功能: 几乎所有的网站都会有表单填写,对于用户输入和填写的数据,首先我们一般现在前台验证,然后再去后台验证. 在前台最简单的验证:检 ...
Div里面载入另一个页面的实现(取代框架)（AJax）（转）
随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便今天突然遇到一个问题,那就是需要导入另一个页 ...
如何设计一个RPC系统
版权声明:本文由韩伟原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/162 来源:腾云阁 https://www.qclou ...
Div里面载入另一个页面的实现(取代框架)（AJax）
随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便今天突然遇到一个问题,那就是需要导入另一个页 ...
为 .NET Core 设计一个 3D 图形渲染库
原文地址:https://mellinoe.wordpress.com/2017/02/08/designing-a-3d-rendering-library-for-net-core/ 作者:ERI ...

随机推荐

Comb结合android开发
https://blog.csdn.net/qq_29665509/article/details/79272441 参考comb官方文档 https://blog.csdn.net/qq_29665 ...
（五）myBatis架构以及SQlSessionFactory，SqlSession，通过代理执行crud源码分析---待更
MyBatis架构首先MyBatis大致上可以分为四层: 1.接口层:这个比较容易理解,就是指MyBatis暴露给我们的各种方法,配置,可以理解为你import进来的各种类.,告诉用户你可以干什么 ...
JavaWeb前置知识 : 动态和静态的区别、两种架构、常见状态码
JavaWeb程序设计(一) : 前置知识 1.动态网页与静态网页的区别: a.不要和是否有"动感"混为一谈. b.是否随着时间.地点.用户操作的改变而改变 (例如 : 在百度上搜 ...
[教程分享]锐族MP3刷固件教程
转载自我的博客:https://blog.ljyngup.com/archives/163.html/ (废话较多见谅) 在到学校前发现几个月前锐族mp3的固件更新了,赶紧刷了一个,发现网上关于这个售 ...
使用Unicode(宽字节字符集)；多字节字符集中定义宽字节变量
2012-03-25 14:54 (分类:计算机程序) 2.2 宽字符和C 宽字符不一定是Unicode.Unicode是宽字符集的一种.然而,因为本书的焦点是Windows而不是C执行的理论,所以书 ...
HSRP 详解
简介 HSRP(Hot Standby Router Protocol 热备份路由器协议)是Cisco的专有协议.HSRP把多台路由器组成一个“热备份组”,形成一个虚拟路由器.这个组内只有一个路由器是 ...
light oj 1095 - Arrange the Numbers排列组合（错排列）
1095 - Arrange the Numbers Consider this sequence {1, 2, 3 ... N}, as an initial sequence of first N ...
使用Vue.prototype在vue中注册和使用全局变量
在main.js中添加一个变量到Vue.prototype Vue.prototype.$appName = 'My App' 这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创 ...
Leetcode：96. 不同的二叉搜索树
Leetcode:96. 不同的二叉搜索树 Leetcode:96. 不同的二叉搜索树题目在链接中,点进去看看吧! 先介绍一个名词:卡特兰数卡特兰数卡特兰数Cn满足以下递推关系: \[ C_{n ...
Hibernate入门之创建数据库表
前言 Hibernate 5.1和更早版本至少需要Java 1.6和JDBC 4.0,Hibernate 5.2和更高版本至少需要Java 1.8和JDBC 4.2,从本节开始我们正式进入Hibern ...