Nodejs 新手求教handlebars 模板应用

Nodejs 新手求教handlebars 模板应用

“dependencies”: { “express”: “3.2.6”, “express3-handlebars”:"", “mongoose”:"",

本人新手，请教express3-handlebars下web模板的应用。网上查的基本上都是jade和ejs的用法。
现在我每个网页最上面部分都一样，想做一个模板，直接调用，省去重复内容
5 回复

当然可以！Handlebars 是一个非常强大的模板引擎，适用于 Node.js 应用程序。以下是如何在 Express 3 中使用 Handlebars 的步骤和示例代码。

安装依赖

首先，你需要安装必要的依赖包。你可以通过 npm 来安装它们：

npm install express express3-handlebars mongoose --save

初始化项目

创建一个新的项目文件夹，并在其中初始化 package.json 文件：

mkdir handlebars-demo
cd handlebars-demo
npm init -y

然后安装上面提到的依赖包。

配置 Express 应用

接下来，我们需要配置 Express 应用以使用 Handlebars 作为模板引擎。编辑你的 index.js 文件（或任何你用来启动服务器的文件）：

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

const app = express();

// 设置 Handlebars 为默认模板引擎
app.engine('handlebars', exphbs({ defaultLayout: 'main' }));
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');
});

创建模板文件

在项目中创建一个名为 views 的文件夹，并在其中创建两个文件：main.handlebars 和 home.handlebars。

main.handlebars

这是你的主模板文件，包含每个页面共享的部分（例如头部、导航栏等）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <!-- 其他共享的头部内容 -->
    </header>

    <div class="content">
        {{> body}}
    </div>

    <footer>
        <!-- 共享的页脚内容 -->
    </footer>
</body>
</html>

home.handlebars

这是你的主页模板，只包含主页特有的内容：

{{!< main}}

<div class="home-content">
    <h2>Welcome to the Home Page!</h2>
    <p>This is some content specific to the home page.</p>
</div>

运行应用

最后，运行你的应用：

node index.js

现在，当你访问 http://localhost:3000 时，你应该能看到渲染出来的页面，其中包含了共享的头部和页脚，以及主页特有的内容。

希望这对你有所帮助！如果你有任何问题，请随时提问。


github 上 有应用的例子：

https://github.com/ericf/express3-handlebars/tree/master/examples

Handlebars 不适合模板的嵌套和代码的重复使用, 换个吧 ejs 不错

谢谢楼上两位 ， 两是也是学习学习，都试一下。

针对你的问题，你需要使用 express3-handlebars 来创建一个 Handlebars 模板引擎，并且将一些共用的部分抽象成一个部分，这样可以避免重复代码。以下是如何设置 Handlebars 并创建共享头部模板的一个示例。

首先确保你的 package.json 文件中包含正确的依赖项：

"dependencies": {
    "express": "3.2.6",
    "express3-handlebars": "^1.0.4",
    "mongoose": "^5.0.0"
}

然后在你的 Node.js 服务器文件（例如 app.js 或 server.js）中设置 Handlebars：

var express = require('express');
var exphbs = require('express3-handlebars');

var app = express();

// 设置模板引擎
app.set('view engine', 'handlebars');
app.engine('handlebars', exphbs({ defaultLayout: 'main' }));

// 定义路由
app.get('/', function (req, res) {
    res.render('home', { title: '主页' });
});

app.listen(3000);

在这个例子中，我们定义了一个默认布局 main.handlebars，你可以将所有页面都会使用的头部代码放在里面：

views/layouts/main.handlebars

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
    <header>
        <!-- 这里是共用的头部代码 -->
        <nav>
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/about">关于我们</a></li>
            </ul>
        </nav>
    </header>
    {{> body}}
</body>
</html>

同时创建一个 home.handlebars 文件来显示主页的内容：

views/home.handlebars

<h1>{{title}}</h1>
<p>这是首页内容。</p>

这样当用户访问首页时，将会渲染 home.handlebars 模板，并且将头部代码从 main.handlebars 中继承过来，从而避免了重复代码。

以上就是一个简单的示例，展示了如何使用 Handlebars 在 Express 中创建共享模板。

回到顶部