作者：JanithKasun译者：前端小智来源：stackabusewisdom。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。简介在本文中，我们将介绍如何在Node.js和Express中使用Handlebars模板引擎。它还解释了模板引擎是什么以及如何使用Handlebars构建服务器端渲染(SSR)Web应用程序。我们还将讨论如何使用Express.js框架配置Handlebars，以及如何使用内置帮助程序创建动态页面。最后，我们将了解如何在需要时开发自定义助手。什么是模板引擎？早在90年代，当互联网出现时，它主要用于科学目的，例如发表研究论文，以及作为大学与科学家之间的沟通渠道。当时的大多数网页都是静态的。静态网页对每个用户都是一样的，不会因用户而异，如果您想更改页面上的任何内容，则必须手动完成。在现代世界中，事物更具交互性，并且为每个用户量身定制。今天，几乎每个人都可以访问Internet。今天的大多数Web应用程序都是动态的。例如，在某些购物网站上，不同的用户登录界面显示不同，即所谓的千面。对于每个人，该页面将遵循相同的模板（即带有用户名的连续帖子），但内容会有所不同？。模板引擎的工作内容：定义显示内容模板，然后根据当前用户和对数据库的查询，将接收到的内容填充到模板中。我们可以在后端和前端使用模板引擎。如果我们使用模板引擎在后端生成HTML，这种方法称为服务器端渲染（SSR）？。HandlebarsHandlebars在后端和前端模板中都很流行。例如，流行的前端框架Ember使用Handlebars作为其模板引擎。Handlebars是Mustache模板语言的扩展，主要关注简单性和最小模板。在Node.js中使用Handlebars首先，创建一个空文件夹，然后打开一个终端，运行npminit-y以使用默认配置创建一个空的Node.js项目。在开始之前，我们需要安装所需的Node.js库。通过运行安装express和express-handlebars模块：npminstall--saveexpressexpress-handlebars注意：在服务器端使用Handlebars时，您可以使用像express-handlebars这样的帮助模块，它集成了Handlebars和Web框架。在本文中，我们主要关注模板语法，这就是我们使用express-handlebars的原因，但是如果您自己处理模板编译和渲染，您还需要查看编译API参考对应的文档。然后，重新创建默认的Handlebars目录结构。views文件夹包含所有Handlebars手模板：├──app.js└──views├──home.hbs└──layouts└──main.hbsviews文件夹内的layouts文件夹将包含布局或模板包装器。这些布局将包含模板之间共享的HTML结构、样式表和脚本。main.hbs文件是主要布局，home.hbs文件是我们要构建的示例Handlebars模板。在我们的示例中，我们使用脚本来简化操作。首先，在app.js文件中导入所需的库：constexpress=require('express');constexphbs=require('express-handlebars');然后，创建一个Express应用程序constapp=express();现在，我们可以将express-handlebars配置为我们的视图引擎：constexpress=require('express');constexphbs=require('express-handlebars');constapp=express();app.engine('hbs',exphbs({defaultLayout:'main',extname:'.hbs'}))app.set('viewengine','hbs');默认情况下，Handlebars模板的扩展名为.handlebars。但是在此处的设置中，我们通过extname标志将其更改为.hbs，因为它更短。接下来，在main.hbs布局中添加Bootstrap脚本和样式：在home.hb中添加如下内容：
