Nodejs Express模板引擎hbs的使用

Nodejs Express模板引擎hbs的使用
Handlebars（简称HBS）是一种流行的JavaScript模板引擎，它被广泛用于Node.js项目中，特别是在Express框架的应用里。下面是一个简单的教程，介绍如何在Express应用中设置和使用Handlebars作为模板引擎。

1. 安装必要的包

首先，你需要安装express、express-handlebars和handlebars。如果你还没有安装这些包，可以使用npm来安装：

npm install express express-handlebars handlebars

2. 创建一个基本的Express应用

接下来，创建一个基本的Express应用，并配置Handlebars作为模板引擎。这里是一个简单的例子：

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

const app = express();

// 设置Handlebars为模板引擎
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

// 示例路由
app.get('/', (req, res) => {
    res.render('home', { title: 'Home Page' });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

在这个例子中，我们首先引入了express和express-handlebars模块。然后，我们通过调用app.engine()方法将Handlebars设置为模板引擎，并通过app.set()方法指定.handlebars作为默认的视图文件扩展名。最后，我们定义了一个简单的路由处理函数，它会渲染名为home.handlebars的模板，并传递一个包含title属性的对象给模板。

3. 创建模板文件

在你的项目目录中创建一个名为views的文件夹，并在其中创建一个名为home.handlebars的文件。你可以在这个文件中编写你的HTML和Handlebars语法。

例如，home.handlebars可能看起来像这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
    <h1>Welcome to {{title}}</h1>
</body>
</html>

在这个模板中，{{title}}是一个Handlebars表达式，它会被传递给res.render()方法的对象中的title属性值替换。

4. 运行你的应用

现在你可以运行你的Express应用了：

node app.js

打开浏览器访问http://localhost:3000，你应该能看到渲染后的页面。

以上就是如何在Express应用中使用Handlebars作为模板引擎的基本步骤。你可以根据需要进一步探索和定制你的模板。


3 回复

当然！HBS（Handlebars）是Express应用中非常受欢迎的模板引擎之一。它让你能够创建可重用的HTML片段，并通过简单的语法插入动态内容。下面是如何在你的Node.js Express应用中设置和使用HBS的基本步骤：

  1. 安装HBS: 首先，你需要在你的项目中安装HBS。可以通过npm来安装：

    npm install express handlebars --save

  2. 配置Express使用HBS: 在你的Express应用中，你需要告诉Express使用HBS作为视图引擎。通常在你的应用入口文件（如app.js或index.js）中添加如下代码：

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

const app = express();

// 设置视图引擎为HBS
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

  3. 创建一个Handlebars视图: 在你的项目中创建一个views目录（如果还没有的话），然后在里面创建一个.handlebars文件，比如home.handlebars。在这个文件里，你可以开始编写你的HTML和Handlebars语法。

    <h1>欢迎来到{{title}}</h1>
<p>{{description}}</p>

  4. 渲染视图: 现在，你可以在你的路由处理函数中使用res.render()方法来渲染这个视图：

    app.get('/', (req, res) => {
  res.render('home', { title: '我的网站', description: '这是一个使用HBS的示例页面' });
});

这样，当你访问你的首页时，就会看到带有动态标题和描述的页面了。享受编程的乐趣吧！


好的，下面我将详细介绍如何在Node.js中使用Express框架和Handlebars（hbs）模板引擎。这包括安装必要的依赖、设置Express应用以及创建基本的路由和视图。

1. 安装依赖

首先，你需要确保你的项目中已经安装了express和hbs。如果你还没有初始化你的Node.js项目，可以先运行：

npm init -y

然后安装所需的包：

npm install express hbs

2. 创建基本的Express应用

接下来，我们创建一个简单的Express应用，并配置它来使用Handlebars作为模板引擎。

// 文件名：app.js 或 index.js

const express = require('express');
const hbs = require('hbs');

const app = express();
const port = process.env.PORT || 3000;

// 设置模板引擎
app.set('view engine', 'hbs');

// 配置handlebars部分
hbs.registerPartials(__dirname + '/views/partials'); // 如果需要使用部分（partials）

// 定义路由
app.get('/', (req, res) => {
    res.render('index', { title: '首页', message: '欢迎来到首页!' });
});

app.get('/about', (req, res) => {
    res.render('about', { title: '关于我们' });
});

// 启动服务器
app.listen(port, () => {
    console.log(`Server is up on port ${port}`);
});

3. 创建Handlebars视图文件

在项目的根目录下创建一个名为views的文件夹，在其中创建两个Handlebars模板文件：index.hbs 和 about.hbs。

  • views/index.hbs:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
    <h1>{{message}}</h1>
</body>
</html>
  • views/about.hbs:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
    <h1>这是一个关于我们页面的内容。</h1>
</body>
</html>

4. 运行应用

最后，只需在命令行中运行你的应用：

node app.js

现在，你可以通过访问http://localhost:3000/和http://localhost:3000/about来查看效果。

这就是在Node.js中使用Express和Handlebars的基本步骤。你可以根据需要添加更多的路由和视图文件。

使用Node.js和Express框架结合Handelbars（.hbs）模板引擎，首先安装express和hbs包。在你的Express应用中设置视图引擎：

const express = require('express');
const hbs = require('hbs');

const app = express();

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

app.get('/', (req, res) => {
    res.render('index', {title: '首页', message: '欢迎访问！'});
});

app.listen(3000, () => console.log('服务已启动于 http://localhost:3000'));

模板文件应存放在views目录下，如index.hbs。你可以使用Handlebars语法来渲染动态内容。

回到顶部