Understanding the Template Engine in Node (Getting Started)

Recommended tutorial: node js tutorial

In this article, we will introduce how to use Node. js and Express to use the Handlebars template engine. We will also introduce what a template engine is and how to use Handlebars to build server-side rendering (SSR) web applications.

We will also discuss how to configure Handlebars using the

Express.js framework, and how to create dynamic pages using the built-in helpers. Finally, we'll see how to develop a custom helper if needed.

What is a template engine

Back in the 1990s, when the Internet emerged, it was mainly used for scientific purposes, such as publishing research papers, and as a communication channel between universities and scientists . Most web pages at that time were static. Static web pages are the same for every user and do not change for every user. If you want to change anything on the page, you must do it manually.

In the modern world, things are more interactive and customized for each user. Today, almost everyone has access to the Internet. Most web applications today are dynamic. For example, on some shopping websites, the interfaces for different users to log in are displayed differently, so-called thousands of people have different views. The page will follow the same template for everyone (i.e. consecutive posts with the username on it), but the content will be different.

The work content of the template engine: Define the display content template, and then fill the template with the received content based on the current user and the query to the database.

We can use template engines in both backend and frontend. If we use a template engine on the backend to generate HTML, this method is called

Server Side Rendering (SSR).

Handlebars

Handlebars are popular in both backend and frontend templates. For example, the popular front-end framework Ember uses Handlebars as its template engine.

Handlebars is an extension of the Mustache template language, which focuses on simplicity and minimal templates.

Using Handlebars in Node.js

First, create an empty folder, then open the terminal, and then run

npm init -yCreate an empty folder with the default configuration Node.js project.

Before we begin, we need to install the required Node.js libraries. Install the

express and express-handlebars modules by running the following command:

npm install --save express express-handlebars

NOTE :When using Handlebars on the server side, you may use a helper module like express-handlebars which integrates Handlebars with the web framework together. In this article, we mainly focus on template syntax, which is why we use express-handlebars, but if you handle template compilation and rendering yourself, you also need to read the documentation corresponding to the compilation API reference.

Then, re-create the default Handlebars directory structure. The

views folder contains all Handlebars hand templates: The layouts

folder inside the

├── app.js
└── views
    ├── home.hbs
    └── layouts
        └── main.hbs

views folder will contain the layout or template wrapper. These layouts will contain HTML structures, stylesheets and scripts shared between templates. The

main.hbs file is the main layout and the home.hbs file is the sample Handlebars template we want to build.

In our example, we use a script to keep it simple. First, import the required libraries in the

app.js file:

const express = require('express');
const exphbs = require('express-handlebars');

Then, create an Express app

const app = express();

Now, we can configure

express- handlebarsAs our view engine:

const express = require('express');
const exphbs = require('express-handlebars');


const app = express();

app.engine('hbs', exphbs({
  defaultLayout: 'main',
  extname: '.hbs'
}))

app.set('view engine', 'hbs');

By default, the extension of the Handlebars template is

.handlebars. But in the settings here, we change it to .hbs via the extname flag because it is shorter.

Next, add the

Bootstrap script and style to the main.hbs layout:

Add the following content to

home.hb :

<h1 id="Hello-World-from-Handlebars">Hello World from Handlebars</h1>

Add the corresponding routing configuration in

app.js:

app.get('/', (req, res) => {
    res.render('home');
});

Then, add the listening port number:

app.listen(3000, () => {
    console.log('The web server has started on port 3000');
});

This way The application can be started by running

node app.js in the console.

But we can also choose to use tools such as nodemon. Using

nodemon, we don’t need to restart the server every time when changing the code, nodemon will automatically refresh the server.

Disk it:

 npm i -g nodemon

After installation, run:

 nodemon app.js

Open in browser

http://localhost:3000/:

Handlebars 更多功能

为了展示一些Handlebars功能，我们将构建一个社交媒体类的网站。 这里我们用一个简单的数组来模拟数据库。

将home.hbs内容更新成如下：

<nav>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  class="card-img-top lazy" src="/static/imghwm/default1.png" data-src="https://picsum.photos/500/500" alt="Understanding the Template Engine in Node (Getting Started)" >
                </p><p>
                    </p><h5 id="此文章由-前端小智-发布">此文章由 前端小智 发布</h5>

                    

                        
• 期待你们的留言/li>                         
• 期待你们的留言
                    

                                           

上面我们添加了一个 navbar 和一个帖子的展示内容 card，运行效果如下：

向模板传递参数

现在，让我们从页面本身中删除这些硬编码的值，这些值由路由传递进来， 在 app.js 中修改如下内容 ：

app.get('/', function (req, res) {
    res.render('home', {
        post: {
            author: '小智',
            image: 'https://picsum.photos/500/500',
            comments: []
        }
    });
});

post 对象包含author,image和comments等字段。 我们可以在 Handlebars模板使用{{post}}来引用这些值：

<nav>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  class="card-img-top lazy" src="/static/imghwm/default1.png" data-src="https://picsum.photos/500/500" alt="Understanding the Template Engine in Node (Getting Started)" >
                </p><p>
                    </p><h5 id="此文章由-post-author-发布">此文章由 {{post.author}} 发布</h5>

                    

                        
• 期待你们的留言/li>                         
• 期待你们的留言
                    

                                           

效果如下：

使用条件

由于这里需要一些逻辑判断，即 comments 没数据不显示，我们看看如何在Handlebars 模板中使用条件：

<nav>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  class="card-img-top lazy" src="/static/imghwm/default1.png" data-src="https://picsum.photos/500/500" alt="Understanding the Template Engine in Node (Getting Started)" >
                </p><p>
                    </p><h5 id="此文章由-post-author-发布">此文章由 {{post.author}} 发布</h5>
                    {{#if post.comments}}
                    

                    

                    {{else}}                     

                        
• 期待你们的留言
                    

                    {{/if}}                                            

这里我们的 comments 为空，所以显示了 期待你们的留言。

#if是把 Handlebars 的内置帮助器。 如果if语句返回true，则将渲染#if块内部的块。 如果返回false，undefined，null，""，0或[]，则不会渲染该块。

#if仅接受一个条件，并且不能使用 JS 比较语法（===）。 如果需要使用多个条件或其他语法，则可以在代码中创建一个变量，然后将其传递给模板。 另外，你可以定义自己的 helper ，我们将在上一节中进行操作。

使用循环

由于帖子可以包含多个评论，因此我们需要一个循环渲染它们。 首先，我们先添加一些数据：

app.get('/', function (req, res) {
  res.render('home', {
      post: {
          author: '小智',
          image: 'https://picsum.photos/500/500',
          comments: [
            '前端小智终身学习者',
            '前端小智持续分享者',
            '虽然没啥流量，但也希望你也能坚持分享下去，帮助更多的初学者'
          ]
      }
  });
});

现在，在我们的模板中，使用#each循环遍历它们：

<nav>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  class="card-img-top lazy" src="/static/imghwm/default1.png" data-src="https://picsum.photos/500/500" alt="Understanding the Template Engine in Node (Getting Started)" >
                </p><p>
                    </p><h5 id="此文章由-post-author-发布">此文章由 {{post.author}} 发布</h5>
                    {{#if post.comments}}
                    

                      {{#each post.comments}}                       
• {{this}}
                      {{/each}}                     

                    {{else}}                     

                        
• 期待你们的留言
                    

                    {{/if}}                                            

在#each循环中，可以使用this来引用当前迭代中的元素。在我们的示例中，它引用了一个随后被渲染的字符串

如果posts是一个对象数组，你也可以访问该对象的任何属性。例如，如果有一个人员数组，你可以简单地使用this.name来访问name字段。

现在，为我们的 posts 添加多个数据:

app.get('/', function (req, res) {
  res.render('home', {
      posts: [
        {
          author: '小智',
          image: 'https://picsum.photos/500/500',
          comments: [
            '前端小智终身学习者',
            '前端小智持续分享者',
            '虽然没啥流量，但也希望你也能坚持分享下去，帮助更多的初学者'
          ]
        },
        {
          author: '前端大智',
          image: 'https://picsum.photos/500/500?2',
          comments: []
        }
      ]
  });
});

然后，使用#each来遍历 posts：

<p>
    </p><p>
      {{#each posts}}
        </p><p>
            </p><p>
                <img  class="card-img-top lazy" src="/static/imghwm/default1.png" data-src="{{this.image}}" alt="Understanding the Template Engine in Node (Getting Started)" >
                </p><p>
                    </p><h5 id="此文章由-post-author-发布">此文章由 {{post.author}} 发布</h5>
                    {{#if this.comments}}
                    

                      {{#each this.comments}}                       
• {{this}}
                      {{/each}}                     

                    {{else}}                     

                        
• 期待你们的留言
                    

                    {{/if}}                                              {{/each}}     

总结

在本文中，我们介绍了Handlebars的基础知识，Handlebars 是Node.js 和前端JavaScript 的模板引擎。 使用 Handlebars，我们可以创建在服务器端或客户端渲染的动态网页。 使用 Handlebars 的条件，循环，局部和自定义帮助器功能，我们的网页将不仅仅是静态HTML。

原文地址：https://stackabuse.com/guide-to-handlebars-engine-for-node/

作者：Janith Kasun

译者：前端小智

更多编程相关知识，请访问：编程入门！！

The above is the detailed content of Understanding the Template Engine in Node (Getting Started). For more information, please follow other related articles on the PHP Chinese website!