在 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

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

<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

Don Eitner 很接近。

<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

在上一行分配文件名如何。我认为它也更容易阅读：

{% 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') }}">

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

Dynamic CSS loading using variable in jinja

html

python

jinja2

N.B: