What is the proper way of referencing css and js files with handlebars?

问题

I am currently using express and handlebars for my project. It is my first time of using handlebars and I cannot figure out how to properly reference the position of my css and js files

My current project structure is like below

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

so I did following in my main.handlebars layout file

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

And inside {{this}}, index.css goes in for css and index.js goes in for js.

But this gave Cannot GET 404 http://localhost:8000/js/index.js error. So I thought maybe handlebars look from the root somehow. so I tried

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

But this gave Cannot GET 404 http://localhost:8000/views/js/index.js error when it looks to be the correct position of the file.

What is the correct way of referencing the js and css file in handlebars?

回答1:

You should create the public directory and in the server, you can serve static files such as images, fonts, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.

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

Now, you can load the files that are in the public directory:

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

来源：https://stackoverflow.com/questions/45395947/what-is-the-proper-way-of-referencing-css-and-js-files-with-handlebars

标签

javascript

html

css

node.js

handlebars.js