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 ...

随机推荐

[terminal]终端仿真程序
char * szCommAry[COMM_NUM]={ //屏幕属性命令,23 "\x1b[12h",//禁止本端回显,键盘数据仅送给主机 "\x1b[12l" ...
HDU_4734_数位dp
http://acm.hdu.edu.cn/showproblem.php?pid=4734 模版题. #include<iostream> #include<cstdio> ...
Codeforces_713_A
http://codeforces.com/problemset/problem/713/A 将读入的数全都存为二进制,用map保存对应的个数. #include<iostream> #i ...
BZOJ 2733 [HNOI2012]永无乡 (权值线段树启发式合并+并查集)
题意: n<=1e5的图里,在线连边.查询某连通块第k大思路: 练习线段树合并的好题,因为依然记得上一次启发式合并trie的时候内存爆炸的恐怖,所以这次还是用了动态开点.回收听说启发式合并s ...
tomcat-windows10环境搭建
1.进入Tomcat官网Apache Tomcat® - Welcome! 2.根据操作系统选择合适的版本下载 zip用于windows操作系统, tar.gz用于unix和linux操作系统 Bin ...
centos 7 设置本地更新源
#yum-config-manager --disable \*--屏弊所有更新源#mkdir /r7iso# cd /run/media/{用户名}/CentOS\ 7\ x86_64/ #cp - ...
在React中使用WebUploader实现大文件分片上传的踩坑日记！
前段时间公司项目有个大文件分片上传的需求,项目是用React写的,大文件分片上传这个功能使用了WebUploader这个组件. 具体交互是: 1. 点击上传文件button后出现弹窗,弹窗内有选择文件 ...
Java的异常处理机制
异常异常指的是,程序在执行过程中,出现的非正常的情况,最终会导致JVM的非正常停止. 由图可知,异常的根类是throwable.其下有两个子类 Error:严重错误Error,无法通过处理的错误,只 ...
Gong服务实现平滑重启分析
平滑重启是指能让我们的程序在重启的过程不中断服务,新老进程无缝衔接,实现零停机时间(Zero-Downtime)部署: 平滑重启是建立在优雅退出的基础之上的,之前一篇文章介绍了相关实现:Golang中 ...
不会用数据可视化大屏？一招教你轻松使用数据可视化BI软件创建农业公司运营数据分析大屏
灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件. 本文以农业公司运营数据分析大屏 ...