CSS 未应用于 Flask 中的 HTML 页面

Question

我正在实现一个基于 flask 的网页，但我的 CSS 无法加载。当我启动 flask 程序并访问测试页面时，我可以看到 HTML 内容，但是 CSS 根本无法加载，并且在命令行中显示 404 错误。我正在使用推荐的文件结构来保存静态网页，并且我将所有 CSS 文件保存在静态文件夹中。我的 HTML 模板有效，而且我正在以同样的方式访问它们。我的烧瓶代码也包含在下面。

import os
import logging

from flask import Flask, render_template
from flask_caching import Cache


# Change the format of messages logged to Stackdriver
logging.basicConfig(format="%(message)s", level=logging.INFO)

config = {
    "DEBUG": True,  # some Flask specific configs
    "CACHE_TYPE": "SimpleCache",  # Flask-Caching related configs
    "CACHE_DEFAULT_TIMEOUT": 300,
}


TEMPLATE_DIR = os.path.abspath(
    "D:/User/Documents/GitHub/CSC 172/Dandyhacks2021/Flask/templates"
)
STATIC_DIR = os.path.abspath(
    "D:/User/Documents/GitHub/CSC 172/Dandyhacks2021/Flask/static"
)

print(STATIC_DIR)

app = Flask(__name__, template_folder=TEMPLATE_DIR, static_folder=STATIC_DIR)
app.config.from_mapping(config)
cache = Cache(app)


@app.route("/")
def home():
    return render_template("home.html")


@app.route("/homepage")
def homepage():
    return "Homepage placeholder or some shit"


@app.route("/cache")
@cache.cached(timeout=50)
def cachedpage():
    return "Cached for 50 seconds"


if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port=int(os.environ.get("PORT", 8080)))

这是HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Léelo</title>
    <link rel="stylesheet" href="/Flask/static/homepagestyle.css">
</head>
<img id="logo" src="Flask/images/Léelo.png" alt="Léelo"><br>
<nav class="menu">
    <ul>
        <li><a href="home.html" target="blank">HOME</a></li>
        <li><a href="libros.html" target="blank">LIBROS</a></li>
        <li><a href="..." target="blank">LITERATURA</a></li>
        <li><a href="..." target="blank">MARKET PLACE</a></li>
    </ul>
</nav>
<p></p>

<body div style="background-image: url(images/background.png);">
    <div class="container">

        <section class="lead">
            <h1>QUIÉNES SOMOS?</h1>
            <p><strong>Lorem Ipsum.</strong> El libro empieza con nuestro narrador contando que cuando tenia solo 6
                años, por algo que leyó en un libro, dibujó una boa comiéndose un elegante. Orgulloso de su dibujo,
                decide enseñárselo a las personas mayores, pero éstas piensan que es un sombrero. Al no entender su
                dibujó, ellos le dicen que deje de dibujar y mejor se dedique a las matemáticas o la gramática.
                Desilusionado, sigue su consejo.</p><br>
            <h1>CUÁL ES NUESTRA META?</h1>
            <p>El libro empieza con nuestro narrador contando que cuando tenia solo 6 años, por algo que leyó en un
                libro, dibujó una boa comiéndose un elegante. Orgulloso de su dibujo, decide enseñárselo a las personas
                mayores, pero éstas piensan que es un sombrero. Al no entender su dibujó, ellos le dicen que deje de
                dibujar y mejor se dedique a las matemáticas o la gramática. Desilusionado, sigue su consejo. </p>
        </section>
        <footer>
            <p>Made by: Team Goat</p><br>
        </footer>
    </div>
    <p></p>
</body>

</html>

Answer 1

我建议您暂时使用相对路径。在生产中，使用静态路径。

此外，请确保您从静态文件本身请求正确的网址。

Answer 2

尝试从 /Flask/static/homepagestyle 中移除 Flask。css 所以看起来像这样

 <link rel="stylesheet" href="/static/homepagestyle.css">

CSS 未应用于 Flask 中的 HTML 页面

CSS not being applied to HTML page in Flask

css

python

web-applications

flask