Flask Web应用的CSS问题

2024-03-28 17:12:54 发布

您现在位置:Python中文网/ 问答频道 /正文

我无法让CSS正确输出-我的网页都没有样式。

这是我所有模板中的链接。我做错什么了?

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

我有什么特别的东西要用烧瓶才能使它工作吗?

我已经试着改变了大约半个小时,但似乎做不好。

总结一下:如何使用Flask进行CSS-我需要什么特殊的python代码吗?


Tags: text模板网页烧瓶链接styletypelink
3条回答

完成此操作的4个步骤(根据这里的一些其他答案,假设您已经正确设置了烧瓶):

1)在app文件夹中创建一个静态文件夹:[root_folder]/app/static/

2)将所有静态内容(图像、JavaScript、CSS等)移动到这些文件夹中。将内容保存在各自的文件夹中(不是强制性的,只是更整洁和更有组织性)。

3)修改app文件夹中的__init__.py文件,使其具有以下行:

app.static_folder = 'static'

这将允许你的应用识别你的static文件夹并相应地读取它。

4)在HTML中,按如下方式设置文件链接:

<link ... href="{{ url_for('static', filename='[css_folder]/[css-file].css') }}" />

例如,如果将CSS文件夹称为“stylesheets”,将文件称为“styles”:

<link ... href="{{ url_for('static', filename='stylesheets/styles.css') }}" />

一切都应该安排妥当。祝你好运!

你需要在Flask应用程序中创建一个名为“static”的文件夹,然后将所有CSS文件放在其中。

http://flask.pocoo.org/docs/quickstart/#static-files

在生产环境中,您最好通过apache或nginx提供静态文件,但这对dev来说已经足够了

你不需要对Flask做任何特殊的事情来让CSS工作。也许你把style.css放进flask_project/stylesheets/?除非正确配置,否则应用程序将不会为此类目录提供服务。查看Flask QuickstartStatic Files部分,了解有关此的更多信息。但是,总而言之,这就是你想要做的:

  1. 移动需要project_root/static/的静态文件。假设您将stylesheets/style.css移动到project_root/static/stylesheets/style.css

  2. 改变

    <link ... href="/stylesheets/style.css" />
    

    <link ... href="{{ url_for('static', filename='stylesheets/style.css') }}" />
    

    这告诉模板解析器(Jinja2)告诉Flask在项目目录中找到配置的静态目录(默认情况下,static/),并返回文件的路径。

    • 如果您真的想要,可以将路径设置为/static/stylesheets/style.css。但是你真的不应该这么做-使用url_for可以让你切换静态目录,并且仍然可以工作,还有其他优点。

正如“雷切尔桑德斯”在回答中所说:

In a production setting, you'd ideally serve your static files via apache or nginx, but this is good enough for dev.

相关问题 更多 >