web-dev-qa-db-ja.com

ハンドルバーでCSSとJSファイルを参照する適切な方法は何ですか？

私のプロジェクトでは現在、エクスプレスとハンドルバーを使用しています。ハンドルバーを使用するのは初めてで、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}}、cssにはindex.css、jsにはindex.jsが入ります。

しかし、これはCannot GET 404 http://localhost:8000/js/index.jsエラー。ハンドルバーはどうやらルートから見えるのではないかと思いました。だから私は試した

<!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ファイルの正しい位置と思われる場合のエラー。

ハンドルバーのjsおよびcssファイルを参照する正しい方法は何ですか？

javascripthtmlcssnode.jshandlebars.js
10
forJ

パブリックディレクトリを作成する必要があります。サーバーでは、images、fonts、CSSファイル、などの静的ファイルを提供できますJavaScriptファイル、express.static Expressの組み込みミドルウェア機能。

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

enter image description here

これで、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>
10
Burdy