在 jinja2 模板上使用 CSS 样式表答案

【问题标题】：use a css stylesheet on a jinja2 template在 jinja2 模板上使用 CSS 样式表
【发布时间】：2014-09-21 23:25:49
【问题描述】：

我正在使用 html、css、flask 和 jinja2 制作网站。

我有一个在烧瓶服务器上工作的页面，显示了按钮和标签等，但没有加载我拥有的 css 样式表。

如何将样式表链接到 jinja2 模板。我在互联网上四处寻找，但找不到方法。

这里是css样式表链接；我应该改变这个，还是python代码？

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

这是我的烧瓶代码：

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

这里是文件的位置：

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

【问题讨论】：

【解决方案1】：

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

{% block style %}

{{ super() }}

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

{% endblock %}

【讨论】：

【解决方案2】：

要补充这里所说的内容，请务必将 Jinja2 更新到 v2.10，因为较小的版本似乎会导致同样的错误。干杯！

【讨论】：

【解决方案3】：

在 Stack Overflow 上尝试了几乎所有解决方案。仅当我将 static 文件夹与我的 run.py 文件放在 same 目录中时，它才对我有用。我更改了我的文件夹结构：

app/
    views
    static
    templates
run.py

收件人：

app/
    views
    templates
static
run.py

我想移动 run.py 也可以。看看这个Jinja Templating Tutorial 了解更多信息。不知道为什么我必须改变结构才能让它工作。

【讨论】：

【解决方案4】：

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

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

将代替

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

【讨论】：

【解决方案5】：

所有公共文件（未处理的文件，如模板或 python 文件）都应放置在专用的静态文件夹中。默认情况下，Jinja2 有一个名为static 的静态文件夹。

这应该可以解决您的问题：

将/templates/styles.css移动到/static/styles.css
使用以下代码更新您的代码，该代码将被翻译成正确的文件位置：
```
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
```

更多关于 Jinja2 中静态文件的信息是here。

【讨论】：

【解决方案6】：

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

href 值必须在引号内。

确保文件名和路径正确或者试试下面的

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

【讨论】：