我想将样式 和js 添加到我的 Handlebars 文件中。我尝试寻找不同的地方，但仍然找不到解决方案。我尝试使用 partials 来存储 stylesheet 标签 然后将这些 partials 添加到 handlebar 但这也没有用。 (或者如果有任何其他模板引擎提供更好的 css 支持，那对我来说也适用) 请帮忙!
styles.hbs(部分文件)
<link rel="stylesheet" href="./../css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./../css/main.css">
服务器.js
const express = require('express');
const hbs = require('hbs');
var app = express();
app.set('view engine', 'hbs');
hbs.registerPartials(__dirname + '/views/partials');
app.get('/', (req, res) => {
res.render('index.hbs');
});
app.listen(3000, ()=>{
console.log('Server is up at port 3000');
});
索引.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home Page</title>
{{> styles}}
</head>
<body>
...
</body>
</html>
最佳答案
这是一个老问题，但仍然令人困惑。这是在您的 View 中使用不同的 css 文件的最有效方法:
main.hbs(你的基本布局)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mainstyle.css">
<!-- mainstyle.css will be effective in all pages-->
{{{customstyle}}}
<title>{{title}}</title>
</head>
<body>
{{body}}
</body>
</html>
请注意main.hbs中的{{{customstyle}}}行
应用程序.js
...
app.use((req, res) => {
res.status(404).render("404page", {title:"404 not found",
customstyle: `<link rel="stylesheet" href="/css/customstyle.css">`});
});
...
就是这样。如您所知，{{{ }}} 呈现为 html 代码，但 {{ }} 仅呈现为 Handlebars 中的文本。 customstyle 作为参数传递给 main.hbs 布局文件。我们在 main.hbs 文件中使用了三个大括号，因为我们想处理我们作为 html 代码发送的参数。这样，customsytle.css文件只在404页面查看时添加。
关于javascript - 如何将样式(css)和js添加到 Handlebars 文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46116175/