gpt4 book ai didi

javascript - 使用 Handlebars 引用 css 和 js 文件的正确方法是什么?

转载 作者:太空狗 更新时间:2023-10-29 15:53:44 27 4
gpt4 key购买 nike

我目前正在为我的元素使用 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 文件的正确方法是什么?

最佳答案

您应该创建公共(public)目录,并在服务器中提供静态文件,例如 imagesfontsCSS 文件,以及JavaScript文件,使用Express中的express.static内置中间件函数。

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>

关于javascript - 使用 Handlebars 引用 css 和 js 文件的正确方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45395947/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com