Express新手入坑笔记之Handlebars模板继承

2018-12-13 本文已影响10人 zhaoolee

模板继承,同样的圆盘, 不同的色彩~

续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,有兴趣可以自己了解下,或者等我后续的更新

Express新手入坑笔记之Handlebars模板继承

模板布局的继承

引入代码块

小结:

猜你喜欢

热点阅读