我必须根据从数据库中获取的输入更改下面超大屏幕的背景图像。 这是代码:
housekeeping.html
<div class="jumbotron" style="background-image:url('{%block wallpaper%}{%endblock%}');padding-left:5%;width:100%;background-size: 100%; background-repeat: no-repeat;">
profile.html
{%extends 'housekeeping.html'%}
...
...
{%block wallpaper%}{{wallpaper}}{%endblock%}
应用.py
@app.route('/name/<b64>')
def profile_for_song(b64):
...
... #retrives the value of `wallpaper` form a row in the database.
...
wallpaper = '/static/wallpaper.jpg' #dummy value.
return render_template('profile.html', wallpaper=wallpaper)
但它不起作用，因为 background-image:url('') 的值仍然为空。
难道不能用 jinja block 更改 css 吗？
PS:我尝试使用 url_for 但仍然没有。
最佳答案
观看 whitespace 的使用在 profile.html 中的墙纸 block 中进行控制。
app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def hello_world():
wallpaper = '/static/wallpaper.jpg'
return render_template('profile.html', wallpaper=wallpaper)
if __name__ == '__main__':
app.run()
housekeeping.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
</head>
<body>
<div class="jumbotron" style="background-image:url('{% block wallpaper%}{% endblock %}');padding-left:5%;width:100%;background-size: 100%; background-repeat: no-repeat;">
</div>
</body>
</html>
profile.html
{%extends 'housekeeping.html'%}
{% block wallpaper -%}
{{ wallpaper }}
{%- endblock %}
示例输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
</head>
<body>
<div class="jumbotron" style="background-image:url('/static/wallpaper.jpg');padding-left:5%;width:100%;background-size: 100%; background-repeat: no-repeat;">
</div>
</body>
</html>
关于python - 无法使用 jinja 更改内联 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36691704/