在 HBS 中设置 CSS 和 JavaScript

在 HBS 中设置 CSS 和 JavaScript，可以通过以下步骤完成：

1. 首先，在 HTML 中链接外部 CSS 和 JavaScript 文件

使用 <link> 标签链接 CSS 文件，可以将其放在 HTML 头部或者底部：

<!-- 在 header 部分链接 CSS 文件 -->
<link rel="stylesheet" href="style.css">

<!-- 在 body 底部部分链接 JavaScript 文件 -->
<script src="main.js"></script>

2. 在 HBS 中使用模板中间件

模板中间件可以帮助我们访问到模板中的 CSS 和 JavaScript。在 Express 框架中，我们可以使用 express-hbs 模板中间件：

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

const app = express();

app.engine('hbs', exhbs({
    defaultLayout: 'main',
    extname: '.hbs',
    // 添加自定义帮助器
    helpers: {
        css: (file) => `<link rel="stylesheet" href="${file}.css">`,
        js: (file) => `<script src="${file}.js"></script>`,
    },
}));

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

3. 在 HBS 视图中使用自定义帮助器

在 HBS 视图中使用自定义帮助器，我们就可以将 CSS 和 JavaScript 文件链接到 HTML 文件中。例如：

{{css 'style'}}  <!-- 链接 style.css 文件 -->
{{js 'main'}}    <!-- 链接 main.js 文件 -->

<h1>Hello World</h1>

经过以上步骤后，我们就可以在 HBS 中设置 CSS 和 JavaScript 了。