在 Jinja2 模板中更改 CSS

Question

在我渲染为 HTML 的 _layout.html 文件中，我有以下内容

<style type="text/css">
    .btn-primary { background: #cb6532; }
</style>

因为我想让颜色动态化，所以在 generator.py

template = self.env.get_template('_layout.html')
with open('public/index.html', 'w+', encoding='utf-8') as file:
    html_and_css = template.render(
        button_primary_color = "#cb6532"
    )
    file.write(html_and_css)

并将 _layout.html 更改为

<style type="text/css">
    .btn-primary { background: {{ button_primary_color }}; }
</style>

事实是，这种方式没有应用颜色，这是我在生成的文件中看到的

<style type="text/css">
    .btn-primary { background: ; }
</style>

如何做到？

编辑

如果我将 _layout.html 更改为

<style type="text/css">
    .btn-primary { background: "{{ button_primary_color }}"; }
</style>

那我就得到

<style type="text/css">
    .btn-primary { background: "#cb6532"; }
</style>

哪个 ofc 不应用该样式。

Answer 1

我使用的解决方法是基于 this answer。将以下脚本添加到 <head>

<script>
function addCss(rule) {
    let css = document.createElement('style');
    css.type = 'text/css';
    if (css.styleSheet) css.styleSheet.cssText = rule; // Support for IE
    else css.appendChild(document.createTextNode(rule)); // Support for the rest
    document.getElementsByTagName("head")[0].appendChild(css);
}

// CSS rules
let rule  = '.btn-primary { background: {{ button_primary_color }}; }';

// Load the rules and execute after the DOM loads
window.onload = function() {addCss(rule)};
</script>

这样就可以正常工作了。

Answer 2

这种问题最好用JS！如果你想生成随机颜色并使用它。这是代码。来自亚美尼亚的问候 :)

let chars = '0123456abcdef'.split('');

function gen(){
    let r = '';
    for(let i=0; i<6; i++){
        r += chars[Math.floor(Math.random() * chars.length)];
    }
    return r;
}


window.onload = () => {
    document.getElementsByClassName('btn-primary')[0].background = gen();
}

在 Jinja2 模板中更改 CSS

Change CSS in a Jinja2 template

css

python

jinja2

编辑