gpt4 book ai didi

javascript - 如何将样式(css)和js添加到 Handlebars 文件?

转载 作者:行者123 更新时间:2023-12-05 08:08:44 25 4
gpt4 key购买 nike

我想将样式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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com