如何在handlebars中正确引用css和js文件？

Question

如何在handlebars中正确引用css和js文件？

javascripthtmlcssnode.jshandlebars.js

17

我目前正在使用Express和Handlebars完成我的项目。这是我第一次使用Handlebars，我无法确定如何正确引用我的CSS和JS文件的位置。

我的当前项目结构如下所示。

- test (root)
  -views
    -js
      -some JS files
    -css
      -some css files
    -layout
      -main.handlebars
  - servers.js (my server)

因此，我在我的main.handlebars布局文件中进行了如下操作

<!Doctype html>
<html>
<head>
    <title></title>
    {{#each css}}
        <link rel="stylesheet" href="../css/{{this}}">
    {{/each}}
</head>
<body>
    {{{body}}}
    {{#each js}}
        <script src="../js/{{this}}"></script>
    {{/each}}
</body>
</html>

在{{this}}里面，index.css用于css，index.js用于js。

但是这会导致Cannot GET 404 http://localhost:8000/js/index.js错误。所以我想或许handlebars从根目录开始查找。于是我尝试了

<!Doctype html>
<html>
<head>
    <title></title>
    {{#each css}}
        <link rel="stylesheet" href="views/css/{{this}}">
    {{/each}}
</head>
<body>
    {{{body}}}
    {{#each js}}
        <script src="views/js/{{this}}"></script>
    {{/each}}
</body>
</html>

但在看起来是正确的文件位置时，使用Cannot GET 404 http://localhost:8000/views/js/index.js出现了错误。

在handlebars中引用js和css文件的正确方法是什么？

- forJ

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Burdy · Accepted Answer

你需要创建public目录，并在服务器上使用express.static内置的中间件函数来服务静态文件，如images，fonts，CSS文件和JavaScript文件。

app.use(express.static(path.join(__dirname, '/public')));

现在，您可以加载位于公共目录中的文件：

<!Doctype html>
<html>
<head>
    <title></title>
    {{#each css}}
        <link rel="stylesheet" href="/css/{{this}}">
    {{/each}}
</head>
<body>
    {{{body}}}
    {{#each js}}
        <script src="/js/{{this}}"></script>
    {{/each}}
</body>
</html>