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 ...
随机推荐
- java13人机猜拳
public class Demo01 { public static void main(String[] args) { /* * 你同桌和你要玩游戏. * 1 剪刀,2 石头,3 布 */ // ...
- js 浏览器兼容问题及解决办法
JS中出现的兼容性问题的总结 1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题 我们都知道js通过style不可以获取行外样式,当我们需要获取行 ...
- 《C# 爬虫 破境之道》:第二境 爬虫应用 — 第七节:并发控制与策略
我们在第五节中提到一个问题,任务队列增长速度太快,与之对应的采集.分析.处理速度远远跟不上,造成内存快速增长,带宽占用过高,CPU使用率过高,这样是极度有害系统健康的. 我们在开发采集程序的时候,总是 ...
- FFmpeg命令读取RTMP流如何设置超时时间
子标题:FFmpeg命令录制RTMP流为FLV文件时如何设置超时时间 | FFmpeg命令如何解决录制产生阻塞的问题0x001: 前言 今天在测试程序时遇到两个问题.Q1:ffmpeg录制RTMP流并 ...
- JAVA中voltatile关键字的使用
1.首先要明白一个概念 JAVA中主内存和线程工作内存的概念. 如果有一个static的变量,值会存储在主内存.如果多个线程访问这个变量,每个线程都会将变量的值拷贝到自己的工作内存,之后的操作就是针对 ...
- docker device or resource busy
docker-compose -f docker-compose.yml up -d 时候报错 device or resource busy 使用 docker-compose down 会导致一 ...
- 字符编码及字节串bytes类型
1 字符编码简介 ASCII码:美国人发明并使用,用1个字节(8位二进制)代表一个字符,ASCII码是其他任意编码表的子集(utf-16除外). Unicode:包含和兼容全世界的语言,与全世界的语言 ...
- Mysql性能优化全揭秘-庖丁解牛
「为什么写」 一直想写数据库相关的文章,最直接的原因是数据库这块我们工作中每天都会用到,也是面试求职绕不开的话题,无论你是何种测试,优秀的数据库能力都会非常加分,最近我在总结数据库性能优化这块内容,性 ...
- mac下搭建http服务器(apache+php),使用homebrew升级php
新版mac依旧预装了 Apache ,但是已经不能在 「系统偏好设置」中的「Web 共享」来开启了,需要手动通过命令行开启. 启动Apache 启动:sudo apachectl start 停止:s ...
- JavaScript Math方法的基本使用
1.Math.sin()方法 定义:返回一个数的正弦. 语法:Math.sin(x),x必须是一个数值. 实例: <!DOCTYPE html> <html lang="e ...