Jinja中如何使用变量实现CSS文件的动态加载

最佳实现代码 #

直接在{{ }}内部用Jinja的字符串拼接运算符~拼接变量和固定后缀即可，不需要嵌套模板标记：

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

原理解释 #

• Jinja语法中，{{ }}内部的作用域已经可以直接识别上下文变量，无需额外嵌套{{ }}标记
• ~是Jinja内置的字符串拼接运算符，会自动把两侧的内容转成字符串后拼接，你传入的UI_BRAND值为blue时，拼接结果就是blue-styles.css，会直接作为filename参数传入url_for生成正确的静态资源路径

可选优化写法 #

如果后续需要多处引用该品牌样式文件名，可以提前用set定义变量，提升代码可读性：

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

内容的提问来源于stack exchange，提问作者Fredy