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

随机推荐

WeChall_Training: Programming 1 (Training, Coding)
When you visit this link you receive a message.Submit the same message back to http://www.wechall.ne ...
Codeforces 1156E Special Segments of Permutation(启发式合并)
题意: 给一个n的排列,求满足a[l]+a[r]=max(l,r)的(l,r)对数,max(l,r)指的是l到r之间的最大a[p] n<=2e5 思路: 先用单调栈处理出每个点能扩展的l[i], ...
《Python学习手册第五版》 -第4章介绍Python对象类型
本章的内容主要是介绍了Python的核心对象类型,后续的5.6.7.8.9章针对这些核心类型分别展开详细的说明本章我认为重要的有几点 1.作者有谈到Python的知识结构,这个我感觉是一个大框架,可 ...
shellcode 反汇编，模拟运行以及调试方法
onlinedisassembler https://onlinedisassembler.com 在线反汇编工具,类似于lda.功能比较单一. Any.run 等平台在线分析将shellcode保 ...
Go语言实现：【剑指offer】翻转单词顺序列
该题目来源于牛客网<剑指offer>专题. 例如,"student. a am I",正确的句子应该是"I am a student." Go语言实 ...
Private Variable and Private Method - Python 私有变量和私有方法
Private Variable and Private Method Python 不象 Java 那样, 通过 private 关键字创建私有属性, python 通过更简洁的实现了'私有属性', ...
php curl 检测网页是否被百度收录
<?php /* * 检测百度是否收录网页 curl模式 * @ param string $url传入的url* return int (1 收录 0 不收录) */ function che ...
Spring源码阅读笔记01：源码阅读环境准备
1. 写在前面对于做Java开发的同学来说,Spring就像是一条绕不过去的路,但是大多数也只是停留在对Spring的简单使用层面上,对于其背后的原理所知不多也不愿深究,关于这个问题,我在平时的生活 ...
ELF文件之一——
ELF文件整体布局下图是后来例子中main.o和main.elf的布局. 其中,只有elf header的位置是固定的,固定在文件开始,其它部分的位置都不确定. 比如下面的main.o布局中,.te ...
docker集合
docker集合 docker(1):容器技术简介 docker(2):docker的“前身”—lxc docker(3):docker简介 docker(4):docker的安装(centos7)和 ...