如何从静态文件夹加载css文件?

vltsax25  于 2023-06-25  发布在  其他
关注(0)|答案(1)|浏览(213)

我不能在我的home.hsb(Handlebars)模板的头加载css文件。我使用node.js和express作为后端。也许我把路开错了,但我不知道失败是什么。
有人能说我哪里做错了吗?
我的文件夹结构:

public
  -> home.css
  -> login.css
  -> signup.css

src
  -> index.js

templates
  -> home.hbs
  -> login.hbs
  -> signup.hbs
  -> user.hbs

index.js:

const express=require("express")
const app=express()
const PORT = 80;
const path=require("path")
const hbs=require("hbs")
const collection=require("./mongodb")
const templatePath=path.join(__dirname, '../templates')

const cookieParser = require("cookie-parser");
const sessions = require('express-session');

//serving public file
app.use(express.static(__dirname + 'public'));

app.use(express.json())
app.set("view engine","hbs")
app.set("views",templatePath)
//app.use(express.urlencoded({extended:false}))

// creating 24 hours from milliseconds
const oneDay = 1000 * 60 * 60 * 24;

//session middleware
app.use(sessions({
    secret: "thisismysecrctekeyfhrgfgrfrty84fwir767",
    saveUninitialized:true,
    cookie: { maxAge: oneDay },
    resave: false
}));

// parsing the incoming data
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// cookie parser middleware
app.use(cookieParser());

//username and password
const myusername = 'user1'
const mypassword = 'mypassword' 

// a variable to save a session
var session;

app.get("/",(req,res) => {
//    session=req.session;
//    if(session.userid){
//        res.send("Welcome User <a href=\'/logout'>click to logout</a>");
//    }else
 res.render("home")
});

home.hbs文件:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="home.css">
    <title>my travel</title>
</head>
<body>

<!-- Hamburger Menue-->
<div id="hamburger" class="hamburger-icon-container">
  <span class="hamburger-icon">hgfhgf</span>
</div> 
<p>Test</p>
<div id="test"></div>

<h1>Seite wo alle Bilder angezeigt werden</h1>

</body>
</html>

我的路径静态文件夹“public”似乎错误,但我不知道为什么?

lnvxswe2

lnvxswe21#

您应该在href中的home.css之前添加前导斜杠

<link rel="stylesheet" href="/home.css">

前面的斜杠/表示路径应该从应用程序的根目录开始。这样,浏览器将直接在public目录中查找home.css文件。
@76484是正确的大约path.join
你应该这样做

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

为了确保在使用Express提供静态文件时使用正确的路径,建议使用path.join()函数连接目录路径。path.join()确保根据操作系统使用正确的路径分隔符。通过使用path.join(),您可以避免与目录路径串联相关的潜在问题,并确保为静态文件提供一致和准确的路径。

相关问题