在Jinja2模板中使用CSS样式表

Question

我正在用 HTML、CSS、Flask 和 Jinja2 制作一个网站。

我有一个在 Flask 服务器上运行的页面，按钮和标签等都能正常显示，但我用的 CSS 样式表没有加载进来。

我该如何把样式表链接到 Jinja2 模板呢？我在网上找了很多资料，但还是没找到方法。

这是我的 CSS 样式表链接；我应该改这个，还是改 Python 代码呢？

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

这是我的 Flask 代码：

@app.route('/')
def resultstemplate():
    return render_template('questions.html', head='Welcome!')

这是文件的位置：

/python-code.py /templates/template.html /templates/styles.css

Answer 1

我试过几乎所有在Stack Overflow上的解决方案。只有当我把static文件夹放在和我的run.py文件同一个目录下时，它才有效。我的文件夹结构从：

app/
    views
    static
    templates
run.py

改成了：

app/
    views
    templates
static
run.py

我想把run.py移动到其他地方也可能有效。你可以看看这个Jinja模板教程，里面有更多信息。不过，我不太明白为什么我必须改变结构才能让它工作。

Answer 2

你应该使用super()这种块样式。
看看下面的代码：

{% block style %}

{{ super() }}

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

{% endblock %}

Answer 3

处理程序的顺序可能会导致问题：

url: /stylesheets static_dir: stylesheets
url: /.* script: helloworld.application

这样会正常工作，而不是

url: /.* script: helloworld.application
url: /stylesheets static_dir: stylesheets

Answer 4

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

链接的值必须用引号括起来。

确保文件名和路径是正确的，或者可以试试下面的内容。

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

Answer 5

所有公共文件（那些不需要处理的文件，比如模板文件或Python文件）应该放在专门的静态文件夹里。默认情况下，Jinja2有一个叫做 static 的静态文件夹。

这样做可以解决你的问题：

1. 把 /templates/styles.css 移动到 /static/styles.css

2. 用下面的代码更新你的代码，这样它就会指向正确的文件位置：

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

关于Jinja2中静态文件的更多信息可以在 这里 找到。