Wil*_*een 1 javascript ejs node.js express
使用 EJS 时链接 css 文件时遇到困难。已经研究过其他答案,但无法弄清楚这是我用作 css 文件参考的代码。
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title></title>
</head>
<body>
<header>
<% include header %>
</header>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
css 文件与 ejs 文件位于同一目录(views 目录)中。这会导致任何问题吗?标头只是另一个带有一些静态 html 的 ejs 文件。
const express = require("express");
const path = require('path');
const app = express();
app.set("views", path.resolve(__dirname, "views"));
app.set("view engine", "ejs");
app.use(express.static(__dirname + 'public'));
app.get('/', (req, res) => {
res.render("index");
})
app.listen(3000);
Run Code Online (Sandbox Code Playgroud)
我最终想将我的 css 文件移动到另一个文件夹中,但我真的想知道为什么这不起作用。由于这些文件位于同一文件夹中,我希望相对路径<link rel="stylesheet" href="index.css">能够工作。
您指定静态文件(css、图像等)位于文件夹“public”中:
app.use(express.static(__dirname + 'public'));
Run Code Online (Sandbox Code Playgroud)
阅读: http: //expressjs.com/en/starter/static-files.html
只需将您的 css 移至此文件夹即可;)
编辑 :
您可以指定多个静态文件夹:
app.use("/public1", express.static(__dirname + "/public1"));
app.use("/public2", express.static(__dirname + "/public2"));
Run Code Online (Sandbox Code Playgroud)
但您可以在静态文件夹中添加文件夹:
并在您的 ejs 文件中使用它:
<link rel="stylesheet" href="/public1/css/index.css">
Run Code Online (Sandbox Code Playgroud)