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

随机推荐

[python]locals内置函数
locals() Update and return a dictionary representing the current local symbol table. Free variables ...
计算机网络 & 网络编程期末总结与测评题
第一部分:网络编程部分的相关知识 Socket套接字定义: 套接字(socket)是一个抽象层,应用程序可以通过它发送或接收数据,可对其进行像对文件一样的打开.读写和关闭等操作.套接字允许应用程序 ...
socket实现文件上传（客户端向服务器端上传照片示例）
本示例在对socket有了基本了解之后,可以实现基本的文件上传.首先先介绍一下目录结构,server_data文件夹是用来存放客户端上传的文件,client_data是模拟客户端文件夹(目的是为了测试 ...
用赋值表达式作为bool值
enum Status { stOk, stQuit, stError }; int main() { Status status; int n; bool b1 = (status = stOk); ...
05-Spring02-AOP
今日知识 1. AOP 2. AspectJ 3. JdbcTemplate AOP 1. AOP :Aspect Oriented Programming,意为面向切面编程,通过预编译方式和运行期动 ...
《自拍教程5》Python自动化测试学习思路
前提:熟悉测试业务及流程任何Python自动化测试的前提,都是必须先熟悉实际测试业务. 任何脱离实际测试业务的自动化都是噱头且无实际意义! 测试的基本流程基本是: 测试需求分析,测试用例设计与评审, ...
php 安装扩展插件实例-ftp.so
工作记录一下 1.首先进入原始php包安装文件(不是安装后的文件,是下载php安装压缩包,解压后的那个文件)安装包里有个扩展文件夹ext,进入 #cd /home/php-5.3.3/ext/#l ...
[CentOS7]sed 指定字符前后添加内容
指定字符前面添加 sed -i 's/指定的字符/需要添加的字符&/' 文件名称修改Linux启动配置将 GRUB_CMDLINE_LINUX="rd.lvm.lv=centos ...
Xcode如何集成Pod教程
一般开发都会用到很多第三方的框架,利用好他们可以加快开发进度,为了更方便将第三方的框架集成到我们的项目中,Pod是个很好的选择,现在说一下该怎么将Pod集成到我们的Xcode中第一种方法命令行的方 ...
JavaScript——event事件详解
1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...