在 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

我使用的解决方法是基于这个答案。 将以下脚本添加到<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 是最好的。 如果要生成随机 colors 并使用它。 这是代码：来自亚美尼亚的你好 :)

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

问题描述

编辑

2 个解决方案

解决方案1
1 已采纳 2021-01-28 10:37:43

解决方案2
0 2021-01-28 10:39:41

在 Jinja2 模板中更改 CSS

问题描述

编辑

2 个解决方案

解决方案1 1 已采纳 2021-01-28 10:37:43

解决方案2 0 2021-01-28 10:39:41

解决方案1
1 已采纳 2021-01-28 10:37:43

解决方案2
0 2021-01-28 10:39:41