在jinja中使用变量动态加载CSS

Question

我有一个变量UI_BRAND，它的值为blue

我有以下代码:

{% if UI_BRAND != 'default' %}
<link rel="stylesheet" href="{{ url_for('static', filename='UI_BRAND-styles.css') }}">
{% endif %}

我需要UI_BRAND-styles.css求值为blue-styles.css。我试过在已经存在的括号内使用{{}}，但我知道这是不允许的。

使用UI_BRAND的值动态加载这个CSS文件的最好方法是什么?

Answer 1

在前一行中分配文件名如何?我认为它也更容易阅读:

{% if UI_BRAND != 'default' %}
<% set style_filename = UI_BRAND + '-styles.css' %>
<link rel="stylesheet" href="{{ url_for('static', filename=style_filename) }}">
{% endif %}

或者您可以在变量和字符串的同一行中使用+。

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

Answer 2

如果我错了请纠正我，但这似乎是f字符串的一个很好的用例。也许是这样的?

filename=f'{UI_BRAND}-styles.css'

Answer 3

这一行的问题:

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

你可以试着这样做:

{% if UI_BRAND != 'default' %}
<style src="{{ UI_BRAND }}-styles.css"></style>
{% endif %}

希望它能解决你的问题。

---

N。B:

您可能需要在{{UI_BRAND}}之前添加静态根这样的

<style src="static_root/{{ UI_BRAND }}-styles.css"></style>

Answer 4

唐·艾特纳接近了。

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

jinja中的连接涉及到波浪(~)。

对于{"FOO": "a", "BAR": "b", "numbers": "1234" }

FOO ~ BAR

求值为"ab">

:

{{ numbers | join(BAR ~ FOO ~ "n" ~ FOO ~ "n" ~ FOO) }}

计算结果为"1banana2banana3banana4">

下面是我验证这个答案的一个有用工具:https://cryptic-cliffs-32040.herokuapp.com/

Answer 5

已更正并测试。在我的测试中，<link rel="stylesheet" href="/static/blue-styles.css">的结果如下:

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