问题
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