如何更改 Jinja 子模板的背景颜色？

Question

我有以下 layout.html 文件，它是主要模板。

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
   
</head>
<body class="d-flex vh-100 text-center text-white bg-dark">

    <div class="container d-flex w-100 h-100 p-3 mx-auto flex-column">
    <header class="mb-auto">   
    <nav class="navbar navbar-dark bg-dark justify-content-center">
        <a class="nav-link active link-light" aria-current="page" href="/">Home</a>
          <a class="nav-link link-light" href="/products">Products</a>
          <a class="nav-link link-light" href="/contact">Contact</a>
      </nav>
    </header>

    <main class="px-3">
    {% block body %}{% endblock %}
    </main>

    <footer class="mt-auto text-white-50">
        <p>Template</p>
      </footer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>

正文 class 使用 bg-dark 但对于其中一个页面，我需要为正文使用 bg-red class。我该如何改变它？例如，我使用 extends layout.html.

创建了另一个页面

{% extends "layout.html" %}


{% block body %}


<h1>Some text here</h1>

<h2>Some text here also</h2>
  
      

{% endblock %}

html 文件或 .css 文件中应该有新的背景色吗？如果我将它放在 .css 文件中，如何仅针对一个特定页面指示正文 class？可能是为正文 class 提供一个 id 并更改 css 文件中的颜色的解决方案，但是如何为每个单独的页面提供一个 id？当使用扩展时 layout.html 将为所有页面导入相同的 ID。

Answer 1

1- 您可以创建 macro 允许您创建自定义主体，将样式传递到宏参数以便将其应用到内联样式中。

2 - 您可以在 layout.html 中创建 CSS 变量，然后在 style.css > body class 中应用它，其中样式的值将从端点 [=51] 传递=]，例如，如果主页将采用 'bg-red':

全局主体背景色 app.py

@application.before_request
def before_request_func():
    g.BODY_COLOR = "bg-red"

layout.html

<style>
  :root {
    --body-color: {{g.BODY_COLOR}};
  }
</style>

style.css

body {
  font-family: "Montserrat", sans-serif;
  background-color: --body-color;
}

模板背景颜色

app.py

@application.route('/')
def index():
    b_c = "bg-red"
    retun render_template('index.html',b_c=b_c)

layout.html

<style>
  :root {
{%if b_c %}
    --body-color: {{b_c}};
{%endif%}
  }
</style>

style.css

body {
  font-family: "Montserrat", sans-serif;
  background-color: --body-color;
}

如何更改 Jinja 子模板的背景颜色？

How to change background colors for child templates in Jinja?

css

python

jinja2

flask

twitter-bootstrap