前言

在刚开始接触这个express框架的时候,利用其脚手架命令,来创建项目的过程中,发现其中 🈶 一种渲染引擎: handlebars,这种引擎在之前的学习文档中 handlebars的学习与使用用 已经有具体提及到,本章节主要想将自己在使用express + hbs搭建这个SSR渲染页面的过程给记录下来,方便后续自己 🈶 来及时查阅!

一、express项目初始化

借助于express应用程序生成器,进行项目的初始化工作

1
express --view=hbs express-hbs-demo

命令则在当前目录中创建了一个名为express-hbs-demo的express项目,进入该目录,并安装相应的依赖,然后执行对应的脚本程序,将程序运行起来:

1
npm install && npm run start

运行结果如下:
初次运行起来的express
👾 与此相对应的生成的文件目录结构如下:
express的目录结构

二、追加express-hbs库的支持

要让程序能够支持handlebars的相关特性(比如helper、partials),那么我们可以是借助于 express-hbs 三方库,通过在应用程序入口app.js中对其进行相关的配置,可实满足与handlebars在日常研发中的特性配置!

1
2
3
4
5
6
7
8
9
10
11
12
13
//  ...此处隐藏其他无关的代码
function relative(rPath) {
return path.join(__dirname, rPath);
}
const hbs = require('express-hbs');
app.engine('hbs', hbs.express4({
partialsDir: relative("views/partials"),
layoutsDir: relative("views/layouts"),
defaultLayout: relative("views/layouts/default.hbs"),
beautify: true
}));
app.set('views', relative('views'));
app.set('view engine', 'hbs');

:thinking_face: 上述这里使用了express-hbs库,进行了相关的配置,比如设置partials目录、设置layout目录等等!

🌠 关于express-hbs的其他相关配置如下表所示:

express-hbs属性 数据类型 描述
partialsDir `String Array`
以下是非必填属性 - -
blockHelperName String 提供的覆盖block的helper的名称
contentHelperName String 提供的覆盖helper的contentFor
defaultLayout String 默认layout模版的绝对路径地址(一般可借助于path.join()来定义)
extname String layout以及partials的文件扩展名,默认是.hbs
handlebars Module 使用额外的handlebars来替代express-hbs这所依赖的handlebars
i18n Object i18n 对象
layoutsDir String layout模版所在的路径
templateOptions Object 传递给Handlebars.template()方法的对象(统一配置)
beautify boolean 是否格式化输出HTML
onCompile function 重载默认的Handlebars.compile()方法,可自定义或者追加额外的操作

上面的例子中定义了defaultLayout作为默认的模版,那么,只要在路由中没有特殊说明的话,都默认用的这个模版:
制定不同的layout
不同的layout对应的运行效果

😕 而关于这个layout的使用,则仅仅需要在其body标签中定义好”三箭头包裹的body”占位符即可
layout模版中的占位符

而关于这个partial模版的使用,则与官网所描述的一致,可以认为是一静态的html标签内容,也可以是动态的可接收参数进行配置化使用的标签节点!
partial的内容

关于这个helper的配置

express-hbs中并没有提供针对helper统一配置(像partialsDir那样搬来配置使用的方式),这边模仿了它的一个机制,通过提供的统一的对外入口,直接实现一键式配置接入helpers,如下代码所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//调用的方式
const injectHelper = require('./views/helpers/index');
injectHelper(hbs);
// ******* 以下是定义的内容,在对应的helpers/index.js中*******
const { readdir } = require('fs');
const path = require('path');
//自定义的动态注册当前的modules目录下的
module.exports = function(hbs){
readdir(path.join(process.cwd(), "views", "helpers", "modules"), (err, files) => {
if(err){
console.error(err);
}else{
files.forEach(item => {
const key = item.replace(/.js/g, '');
console.info(key);
hbs.registerHelper(key, require(path.join(process.cwd(), "views", "helpers", "modules", item)));
});
}
})
}

🌠 通过上述的方式,可实现将helpers/modules目录下的’*.js’文件,以其文件作为helper的key,而以其内容来作为对各个helper内容的定义,对于需要往项目中追加的helper,都只需要在modules中新增对应的js文件即可!然后,就可以在对应的.hbs文件中直接使用对应的helper了

1
{{test '我是被测试的字符串~~'}}

:thinking_face: 如果我们要使用的官方的 handlebars-helper
通过阅读官方的源码,我们可以采用 👇 的方式来接入这个handlebars-helper

1
2
3
// 由于安装不了,升级了一下相关的库
const { help } = require('c-handlebars-helper');
help(hbs.handlebars);

🌠 这里通过help()方式实现的批量对helper的注册,实现我们所想要的一键注册!
添加注册成功后,我们就可以直接的.hbs文件中注册

1
2
<p>以下是三方的helper</p>
{{lowercase "LIQUID!"}}

三、接入bootstrap库支持

要让自己所编写出来的站点能够美观而且支持响应式,可借助于bootstrap三方css库来辅助开发,满足平日的研发的同时,又可以提升研发效率!
简单的方式就是直接在模版layout.hbs文档中加入bootstrap的css库地址,然后便可以在项目中直接使用到了,这里我们分享另外一种方式:采用npm的方式来引用

👉 首先,可以选择安装一三方库node-sass-middleware

1
npm install node-sass-middleware

👉 然后在对应的入口文件app.js在注册相关的静态目录之前,进行该中间件的配置使用:

1
2
3
4
5
6
7
8
9
const sassMiddleware = require('node-sass-middleware');
app.use(sassMiddleware({
src: relative('scss'),
dest: relative('public'),
debug: true,
outputStyle: 'compressed'
}));
// 这里必须在这静态化目录配置之前!
app.use(express.static(relative('public')));

👉 然后对应的在src所配置的目录中声明定义好对应的scss/stylesheets/style.scss即可,并在这个style.scss文件中引用相关的bootstrap库,这里可根据实际情况进行对应引用!

1
@import "../../node_modules/bootstrap/scss/bootstrap.scss";