Express新手入坑笔记之Handlebars模板继承
模板继承,同样的圆盘, 不同的色彩~
- 续Express新手入坑笔记之动态渲染HTML,上一篇只是初步实现了html的动态渲染,但不够灵活, 假如写一个动态网站, 会遇到大量模板复用的场景, 为每个url写一个单独的html文件是非常耗时耗力的, 而且可维护性也不好, Handlebars(以下简称hbs)为我们提供了继承模板(相似django的extend)和插入代码块(相似django的include)的方法,下面我来做一个演示
模板布局的继承
网站有多个网页, 网页的布局大致相同, 头部和底部可能是通用的,我们可以为所有网页设置一个默认的布局
// 配置模板引擎,设置默认的模板布局app.engine('html', exphbs({ layoutsDir: "views/layouts/", defaultLayout: 'layout-header-footer.html', extname: '.html'}));// 根路由对应的页面, 启用默认模板布局app.get('/', function(req, res) { res.render('index', { title: "首页", personInfoList: [{ name: "王炮儿(一拳超人)", age: 20 }, { name: "炮姐(御坂美琴)", age: 15 }] });});在views文件夹下新建layouts文件夹,在layouts文件夹新建
layout-header-footer.html作为模板,在layout-header-footer.html内写入以下代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>{{title}}</title></head><body> <style> body{ margin: 0; padding: 0; } </style> <header style="width: 100%; height: 80px; text-align: center; line-height: 80px; background-color: #44A1F8; color: #ffffff;">这是头部</header> {{{body}}} <footer style="position: fixed; bottom:0; width: 100%; height: 80px; text-align: center; line-height: 80px; background-color: #64B587; color: #ffffff;">这是底部</footer></body></html>
将views文件夹下, index.html内的内容精简(只保留关键内容body)
<h1 style="color: #64B587">人物详情</h1>{{#each personInfoList}} <h2>昵称:{{this.name}}</h2> <h2>年龄:{{this.age}}</h2> <hr>{{/each}}- 重新访问根路由
有些网页可能比较特别, 只要要显示通用的底部
- 在layouts文件夹内,新建
layout-footer.html作为模板(顾名思义, 与上面的通用模板,layout-header-footer.html相比,layout-footer.html只有底部内容),layout-footer.html内的内容为:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>{{title}}</title></head><body> <style> body{ margin: 0; padding: 0; } </style> {{{body}}} <footer style="position: fixed; bottom:0; width: 100%; height: 80px; text-align: center; line-height: 80px; background-color: #64B587; color: #ffffff;">只有底部</footer></body></html>
- 编写
/about路径的解决函数, 让/about对应的网页套用layout-footer.html模板
// 匹配/about路由app.get('/about', function(req, res) { res.render('about', { layout: "layout-footer.html" });});- 在views下,编写
about.html文件
<h1>关于</h1>
- 访问
http://localhost:3000/about, 效果如图所示
以上, 我们已经实现了默认模板布局和个性化模板布局的编写和使用, 但在实际开发中, 我可能会遇到在某个页面内,引入代码块的需求, 比方插入广告位! 下面我们来完成引入广告位的实例~
引入代码块
需求: 引入广告位
- 在
views文件夹下新建partials文件夹,在partials内新建ad.html,在ad.html内编写广告代码
<div style="width: 100%; height: 20px; text-align: center; font-size: 12px; line-height: 20px; color: #413F43; background-color: #F0BB40;">这是一段广告</div>- 在express-simple-server.js中配置
广告代码所在的目录
// 配置模板引擎app.engine('html', exphbs({+ partialsDir: 'views/partials/', layoutsDir: "views/layouts/", defaultLayout: 'layout-header-footer.html', extname: '.html'}));- 修改abou.html,插入广告代码
<h1>关于</h1>{{>ad}}- 查看插入效果
- express-simple-server.js最终代码
const express = require('express');const exphbs = require('express-handlebars');const app = express();// 配置模板引擎app.engine('html', exphbs({ partialsDir: 'views/partials/', layoutsDir: "views/layouts/", defaultLayout: 'layout-header-footer.html', extname: '.html'}));app.set('view engine', 'html');// 假如在环境变量内, 设定了程序运行端口，则使用环境变量设定的端口号, 否则使用3000端口app.set('port', process.env.PORT || 3000);// 匹配静态文件目录app.use(express.static(__dirname + '/public'));// 匹配根路由 / (假如不特别指明返回的状态码, 则默认返回200)app.get('/', function(req, res) { res.render('index', { title: "首页", personInfoList: [{ name: "王炮儿(一拳超人)", age: 20 }, { name: "炮姐(御坂美琴)", age: 15 }] });});// 匹配/about路由app.get('/about', function(req, res) { res.render('about', { layout: "layout-footer.html" });});// 定制 404 页面 (返回404状态码)app.use(function(req, res) { let currentTime = new Date(); res.type('text/plain'); res.status(404); res.send('404 - 你访问的页面可能去了火星\n' + currentTime);});//定制 500 页面 (返回500状态码)app.use(function(err, req, res, next) { let currentTime = new Date(); let errInfo = err.stack; res.type('text/plain'); res.status(500); res.send('500 - 服务器发生错误\n' + 'errInfo:' + errInfo + '\n' + 'currentTime:' + currentTime);});// 监听服务端口, 保证程序不会退出app.listen(app.get('port'), function() { console.log('Express 服务正在运行在 http://localhost:' + app.get('port') + '; 按 Ctrl-C 关闭服务.');})小结:
假如你理解django的模板继承(extend)和代码插入(include)的规则,会发现hbs也是相似的, 其实hbs还有名为helper的玩法, 可以更加灵活插入css, js, html,有兴趣可以自己理解下,或者者等我后续的升级
上一篇 目录 已是最后
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Express新手入坑笔记之Handlebars模板继承
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Express新手入坑笔记之Handlebars模板继承
