📅 最后修改于: 2023-12-03 15:08:36.670000 🧑 作者: Mango
在使用 Express 和 HBS （handlebars）模板引擎的过程中，我们经常需要将 CSS 和 JavaScript 文件引入到 HTML 中。这篇文章将会介绍如何在 Express 中设置 HBS 中的 CSS - JavaScript。
首先，我们需要确保我们已经在本地环境中安装了 Express 和 HBS 模板引擎。
npm install express hbs
在设置 Express 应用之前，我们需要在根目录下创建一个 public 文件夹，用于存放我们的 CSS 和 JavaScript 文件。
接下来，我们需要在 Express 应用中设置静态文件目录：
const express = require('express');
const app = express();
app.use(express.static('public'));
以上代码将会把 public 文件夹设置为 Express 应用的静态文件目录。这样，我们就可以访问所有存储在 public 文件夹中的文件了。
在设置 HBS 模板引擎之前，我们需要确保在根目录下有一个 views 文件夹，用于存放我们的模板文件。
接下来，我们需要在 Express 应用中设置 HBS 模板引擎：
const express = require('express');
const app = express();
const hbs = require('hbs');
app.set('view engine', 'hbs');
app.set('views', __dirname + '/views');
hbs.registerPartials(__dirname + '/views/partials');
以上代码将会把 views 文件夹设置为 Express 应用的模板文件目录，并注册一个名为 partials 的部分文件夹。现在我们就可以在模板中使用 {{> partials/filename}} 语法引入一个名为 filename 的部分文件了。
现在，我们已经设置好了 Express 应用和 HBS 模板引擎。接下来，我们需要在模板中引入 CSS 和 JavaScript 文件。
在 HBS 中，我们可以使用 link 标签和 script 标签导入 CSS 和 JavaScript 文件：
<head>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<script src="/js/script.js"></script>
</body>
以上代码将会在客户端引入一个名为 style.css 的 CSS 文件和一个名为 script.js 的 JavaScript 文件。在这里，我们使用的 href 和 src 的路径都是相对于 Express 应用的根目录的，所以这里的路径是 /css/style.css 和 /js/script.js。
注意，如果你的 CSS 或 JavaScript 文件存储在另一个目录中，你需要相应调整路径。
在本文中，我们介绍了如何在 Express 中设置 HBS 中的 CSS 和 JavaScript 文件。要实现这个目标，我们需要设置 Express 应用的静态文件目录，并在 HBS 模板中使用 link 和 script 标签来引入 CSS 和 JavaScript 文件。