我有以下 layout.html 檔案，它是主模板。
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
body 類使用 bg-dark 但對于其中一個頁面，我需要將 bg-red 用于 body 類。我怎樣才能改變它？例如，我使用 extends layout.html 創建了另一個頁面。
{% extends "layout.html" %}
{% block body %}
<h1>Some text here</h1>
<h2>Some text here also</h2>
{% endblock %}
html 檔案或 .css 檔案中應該有新的背景顏色嗎？如果我把它放在 .css 檔案中，如何只為一個特定頁面指示 body 類？可能是為 body 類提供 id 并更改 css 檔案中的顏色的解決方案，但如何為每個單獨的頁面提供 id？使用 extends layout.html 時，將為所有頁面匯入相同的 id。
uj5u.com熱心網友回復：
1-您可以創建macro允許您創建自定義主體的內容，將樣式傳遞給宏引數以將其應用到行內樣式中。
2 - 您可以在 中創建 CSS 變數layout.html，然后將其應用到您的 中style.css > body class，樣式的值將從端點回傳傳遞，例如，如果主頁將采用'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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/320877.html