Nodejs Koa模板引擎koa-handlebars的使用

Nodejs Koa模板引擎koa-handlebars的使用
koa-handlebars 是一个用于 Koa 框架的 Handlebars 模板引擎。以下是如何在 Koa 项目中使用 koa-handlebars 的步骤：

  1. 安装必要的依赖： 首先，你需要安装 koa, koa-mount, koa-static, 和 koa-handlebars 以及 handlebars。

    npm install koa koa-mount koa-static koa-handlebars handlebars

  2. 创建基本的 Koa 应用： 创建一个基本的 Koa 应用，并配置静态文件服务和模板引擎。

    const Koa = require('koa');
const mount = require('koa-mount');
const staticServe = require('koa-static');
const handlebars = require('koa-handlebars');
const path = require('path');

const app = new Koa();

// 设置静态资源目录
app.use(mount('/public', staticServe(path.join(__dirname, 'public'))));

// 使用 koa-handlebars 中间件
app.use(handlebars({
  viewPath: path.join(__dirname, 'views'), // 设置视图路径
  extname: '.hbs', // 设置模板文件扩展名
  layoutsDir: path.join(__dirname, 'views/layouts'), // 设置布局目录
  defaultLayout: 'main' // 设置默认布局
}));

// 定义路由
app.use(async ctx => {
  ctx.body = await ctx.render('index', { title: 'Hello World' });
});

app.listen(3000);
console.log('Server is running on port 3000');

  3. 创建 Handlebars 视图： 在 views 目录下创建一个名为 index.hbs 的文件，内容如下：

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

  4. 创建布局文件（可选）： 如果你设置了默认布局，那么在 views/layouts 目录下创建一个 main.hbs 文件：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
    {{> @partial-block }}
</body>
</html>

  5. 运行应用： 现在你可以运行你的 Koa 应用并访问 http://localhost:3000 来查看结果。

通过以上步骤，你就可以在 Koa 应用中使用 koa-handlebars 模板引擎了。你可以根据需要调整配置和视图文件的内容。


3 回复

当然，没问题！想象一下，你正在烘焙一个超级美味的蛋糕（这就是你的网页），而koa-handlebars就像是那个神奇的食谱书。首先，你需要安装这个“食谱书”，也就是koa-handlebars：

npm install koa-handlebars --save

接着，在你的Koa项目中，就像在厨房里一样，你需要设置好所有的工具。创建一个中间件来告诉Koa如何读取和渲染你的handlebars模板：

const Koa = require('koa');
const handlebars = require('koa-handlebars');

const app = new Koa();

app.use(handlebars({
  viewPath: 'path/to/your/views', // 这是你的蛋糕食谱存放的地方
  defaultLayout: 'template', // 默认的布局文件名
  extName: '.hbs' // 你的食谱文件扩展名
}));

现在，你可以开始编写你的.hbs文件了，就像是在写食谱一样。比如，index.hbs可以这样写：

<!DOCTYPE html>
<html>
<head>
    <title>Welcome!</title>
</head>
<body>
    <h1>Hello, {{name}}!</h1> <!-- 这里{{name}}就是你要填入的材料 -->
</body>
</html>

最后，在你的路由中，就像在厨房里选择用哪种食材做菜，你可以这样：

app.use(async ctx => {
  ctx.body = await ctx.render('index', { name: 'Alice' }); // Alice就是你选的食材
});

就这样，你已经用koa-handlebars制作了一个简单的页面。是不是很简单呢？


koa-handlebars 是一个用于 Koa 框架的 Handlebars 模板引擎。下面是如何在 Koa 项目中安装和配置 koa-handlebars 的步骤。

安装依赖

首先，你需要安装 koa、koa-router 和 koa-handlebars：

npm install koa koa-router koa-handlebars handlebars

配置 Koa 应用

接下来，在你的 Koa 应用中进行相应的配置：

const Koa = require('koa');
const Router = require('koa-router');
const koaHandlebars = require('koa-handlebars');
const path = require('path');

const app = new Koa();
const router = new Router();

// 设置模板引擎中间件
app.use(koaHandlebars({
    viewPath: path.join(__dirname, 'views'), // 设置视图文件夹路径
    extname: '.hbs', // 设置模板后缀名
    layoutsDir: path.join(__dirname, 'views/layouts'), // 设置布局文件夹路径
    defaultLayout: 'main' // 设置默认布局
}));

// 路由定义
router.get('/', async ctx => {
    await ctx.render('index', { title: '欢迎来到首页' });
});

// 使用路由
app.use(router.routes()).use(router.allowedMethods());

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

在这个例子中，我们创建了一个简单的 Koa 应用，并添加了一个路由来渲染首页。koaHandlebars 中间件被用来处理 Handlebars 模板。

创建模板文件

确保在 views 文件夹下有一个 index.hbs 文件以及一个 layouts 文件夹，其中包含 main.hbs 布局文件。例如：

views/index.hbs

<h1>{{title}}</h1>
<p>这是一个简单的 Handlebars 模板示例。</p>

views/layouts/main.hbs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
</head>
<body>
    {{> @partial-block }}
</body>
</html>

这样就完成了基本的 Koa + koa-handlebars 配置。你可以根据需要进一步扩展和定制你的应用。

koa-handlebars 是一个用于 Koa 框架的 Handlebars 模板引擎。首先安装 koa-handlebars 和 handlebars：

npm install koa-handlebars handlebars

然后，在你的 Koa 应用中配置和使用它：

const Koa = require('koa');
const koaHandlebars = require('koa-handlebars');

const app = new Koa();

app.use(koaHandlebars({
  viewPath: 'views', // 设置视图文件路径
  extname: '.hbs' // 设置模板扩展名
}));

app.use(async ctx => {
  await ctx.render('index', { title: 'Hello Koa' }); // 渲染模板
});

app.listen(3000);

这样就可以在 views 文件夹中创建 .hbs 模板文件了。

回到顶部