Javascript 如何将样式（css）和js添加到把手文件？_Javascript_Node.js_Express_Handlebars.js_Partials

Javascript 如何将样式（css）和js添加到把手文件？

javascript node.js express

Javascript 如何将样式（css）和js添加到把手文件？,javascript,node.js,express,handlebars.js,partials,Javascript,Node.js,Express,Handlebars.js,Partials,我想将样式和js添加到我的把手文件中。我试着寻找不同的地方，但仍然找不到解决办法。我尝试使用partials来存储样式表标签，然后将这些partials添加到handlebar中，但也没有成功。（或者，如果有任何其他模板引擎提供更好的css支持，这对我也适用）请帮忙 styles.hbs（部分文件） index.hbs <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta t

我想将样式和js添加到我的把手文件中。我试着寻找不同的地方，但仍然找不到解决办法。我尝试使用partials来存储样式表标签，然后将这些partials添加到handlebar中，但也没有成功。（或者，如果有任何其他模板引擎提供更好的css支持，这对我也适用）请帮忙

styles.hbs（部分文件）

index.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>


主页
{{>样式}
...

这是一个老问题，但仍然令人困惑。以下是在视图中使用不同css文件的最有效方法：

main.hbs（您的基本布局）

就这样。如您所知，{{}}呈现为html代码，但{{}呈现为把手中的唯一文本。

customstyle

将参数传递给

main.hbs

layout文件。我们在main.hbs文件中使用了三个花括号，因为我们希望处理作为html代码发送的参数。这样，customsytle.css文件仅在查看404页时添加。

这是一个老问题，但仍然令人困惑。以下是在视图中使用不同css文件的最有效方法：

main.hbs（您的基本布局）

就这样。如您所知，{{}}呈现为html代码，但{{}呈现为把手中的唯一文本。

customstyle

将参数传递给

main.hbs

layout文件。我们在main.hbs文件中使用了三个花括号，因为我们希望处理作为html代码发送的参数。这样，customsytle.css文件仅在查看404页时添加。

阅读此内容我的部分已经显示在我的模板中，因此配置没有问题。这就是我要问的，只是页面上没有应用的样式。嘿@MohamedNadeem，你找到解决方案了吗？我也有同样的问题..读这篇文章，我的部分已经显示在我的模板中了，所以配置没有问题。这就是我要问的，只是页面上没有应用的样式。嘿@MohamedNadeem，你找到解决方案了吗？我也有同样的问题。。

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');
});

<!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>

<!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>

...
app.use((req, res) => {
    res.status(404).render("404page", {title:"404 not found",
    customstyle: `<link rel="stylesheet" href="/css/customstyle.css">`});
});
...