Question

我是网络编程和Flask的新手。我正在尝试将.css文件链接到我的base.html文件的头部。我可以呈现网站的内容，但不能呈现.css文件中的样式。这是我的目录：

应用


模板


base.html文件

的index.html


views.py


静态


的style.css

在base.html的头部我写道：

<head>
    ...
    <link rel="stylesheet" type="text/css" href="/static/style.css">
</head>

我也试过这个：

<head>
    ...
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
</head>

还有一些变体在我的目录周围复制.css文件。网站上仍然没有格式化。

一些进一步的信息：通过运行views.py，我渲染了扩展base.html的index.html - 我不知道这是否相关。

Answer 1

请试试这个。它可能会有所帮助 在.py文件中

   from flask import Flask, request, send_from_directory

    # set the project root directory as the static folder, you can set others.
    app = Flask(__name__, static_url_path='')

    @app.route('/static/<path:path>')
    def send_css(path):
        return send_from_directory('static', path)

<。>在.html文件中 **

<head>
    ...
    <link rel="stylesheet" type="text/css" href="../../../static/style.css">
</head>

**

编辑

<head>
        ...
        <link rel="stylesheet" type="text/css" href="../../../static/style.css">
    </head>

Answer 2

请尝试此操作并请提供static_folder的路径正确意味着它必须指向'静态'目录。

import os
from flask import Flask, request, send_from_directory

app = Flask(__name__, static_folder = 'path/to/folder/of/staticfiles')
#in your case it is 'static' directory.
@app.route('/static/<path:path>/<filename>')
@app.route('/static/<filename>')
def send_css(**kwargs):
    filename = kwargs.get('filename')
    path = kwargs.get('path')
    if path:
        return send_from_directory(os.path.join(static_folder,path), filename)
    else:
        return send_from_directory(static_folder, filename)

这也会从'static'目录的任何子目录中读取.css文件。

将其保留在index.html中。

<head>
    ...
    <link rel="stylesheet" type="text/css" href="/static/style.css">
</head>

我希望您在index.html中扩展base.html

从flask中渲染index.html。

并且您是否了解了static_folder app = Flask(__name__, static_folder = 'path/to/folder/of/staticfiles')中您必须提供的路径？您必须添加目录的路径，其中保存.css文件意味着您的“静态”文件夹的路径。

Answer 3

我明白了！我的目录分区错了。我把静态文件夹放在app文件夹之外 - 我不知道为什么但Python无法链接到app文件夹之外。感谢大家的帮助！

链接到style.css无法正常工作

3 个答案: