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

随机推荐

关于线段树的感悟(Segment Tree)
线段树的感悟 : 学过的东西一定要多回头看看,不然真的会忘个干干净净. 线段树的 Introduction : English Name : Segment Tree 顾名思义 : 该数据结构由两个重 ...
JAVA 调用控件开发
最近homoloCzh有个小伙伴接到一个需求说是把一个c# 写的具备扫描.调阅等功能 winfrom 影像控件嵌入到java Swing当中,让小伙伴很苦恼啊,从年前一直研究到年后,期间用了很多种方法 ...
python学习（8）实例：写一个简单商城购物车的代码
要求: 1.写一段商城程购物车序的代码2.用列表把商城的商品清单存储下来,存到列表 shopping_mail3.购物车的列表为shopping_cart4.用户首先输入工资金额,判断输入为数字5.用 ...
Nginx之美多商城前台部署
这里我们采用动静分离的方式来部署美多商城项目. 动态请求:采用uwsgi与Django进行通信处理动态业务. 静态请求:采用Ngins通过socket与uwsgi进行通信处理静态业务. 第一步:实现u ...
idea快速创建一个类实现一个接口
一创建一个接口类二点击接口名称按alt + ent 三选择implement interface 选项完美!!!!!!!
Shell脚本一键重启
有个程序必须用 kill -9 pid号关闭后,才能重新启动,每次都要手动查找pid号,麻烦容易出错,写个shell脚本就三行很方便,自动查找pid号-关闭程序-重启程序 #!/bin/bas ...
CentOS7下部署rsync服务
说明: 在CentOS7下部署rsync服务和在CentOS6上部署基本上是一样的,只是CentOS7自带了rsyncd启动脚本,由systemd管理而已. rsync服务端配置 [root@SERV ...
注销Apache
到D:\phpTools\Apache24\bin下运行cmd 输入httpd.exe -k uninstall -n apache24 回车后提示注销完成接着把Apache的文件删了即可
vue路由--静态路由
vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是 ...
C#后台异步消息队列实现
简介基于生产者消费者模式,我们可以开发出线程安全的异步消息队列. 知识储备什么是生产者消费者模式? 为了方便理解,我们暂时将它理解为垃圾的产生到结束的过程. 简单来说,多住户产生垃圾(生产者)将垃 ...