无法将 css 样式附加到子 jinja 模板中的 html 文件答案

【问题标题】：Can't attach css styles to html file in child jinja template无法将 css 样式附加到子 jinja 模板中的 html 文件
【发布时间】：2020-08-23 08:09:11
【问题描述】：

我有一个基本模板 html 文件和一个“登录”html 文件，它继承自基本文件。仅当我没有将这些样式完全写入此文件时，我才能将 css 样式附加到此子模板。子 html 文件看起来像这样，我想在单独的 styles.css 文件中编写这些样式，但我不知道该怎么做。

% block head %}

    {{ super() }}
    <style>
        body:not(#login-page){
            filter: blur(1px);
                }
        .login-page {
            display: inline-block;
            margin: 300px 0 0 700px;
            background-color: #c0c0c0;
        }
        label {
            font-size: 24px;
        }
        .username {
            width: 200px;
            margin-left: 50px;
            height: 24px;
        }
        .password {
            width: 200px;
            margin-left: 197px;
            margin-top: 15px;
            height: 24px;
        }
        .remember-me {
            margin-top: 20px;
        }
        .remember-me_label {
            font-size: 15px;
        }
        .login-submit {
            margin-top: 20px;
            margin-left: 150px;
        }
    </style>

{% endblock %}

这就是基本模板头标签的样子：

{% block head %}
        <link rel="stylesheet" href="{{ url_for("static", filename="styles.css") }}">
        <link rel="stylesheet" href="{{ url_for("static", filename="reset.css") }}">
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    {% endblock %}

任何帮助将不胜感激

【问题讨论】：

标签： python-3.x flask jinja2

【解决方案1】：

让我澄清一下。

首先，基础模板在子模板中完全加载；我的意思是如果基本模板是：

<html>
<head>
<title>Your title here</title>
</head>

<body>
...
</body>
</html>

登录页面只有：

{% extends "base.html" %}

然后，如果您检查登录页面，您将看到与 base.html 中相同的 html 代码

现在，如果您想在每个页面中添加一些通用内容（例如页眉、页脚、...），您可以将其放在 base.html 中；即使您希望在每个页面中加载一个 css 或 javascript 文件（如 jquery.js 或 main_style.css），您也可以将它们放在 base.html 中

所以 base.html 将是：

<html>
<head>
<title>Your title here</title>
<link rel="stylesheet" href="main_style.css">
</head>

<body>
...
<script src="jQuery.js"></script>
</body>
</html>

main_styles.css 和 jQuery.js 都将加载到包含 base.html 的每个页面中

现在，如果您想为特定页面添加内容（例如在 login.html 中您想要登录表单），那么您在 base.html 中放置一个块并将其填充到子模板中（即使您想添加特定页面的特定样式）。

最后 base.html 将是：

<html>
<head>
<title>Your title here</title>
<link rel="stylesheet" href="main_style.css">

{% block more_css %}
{% endblock %}

</head>

<body>
{% block content %}
{% endblock %}



{% block more_js %}
{% endblock %}
<script src="jQuery.js"></script>
</body>
</html>

注意基本 html 中的空块（内容、more_css、more_js），如果它们不为空，它们将被替换为您的代码中的内容

您的登录页面将是：

{% extends "base.html" %}

{% block content %}
<form id="loginform" method="">
...
</form>
{% endblock %}

{% block more_css %}
<link rel="stylesheet" href="login_page_style.css">
{% endblock %}

{% block more_js %}
<script src="login_page_js.js"></script>
{% endblock %}

现在，login_page_style.css 和 login_page_js.js 将只加载到 login.html 中，而不是在每个子页面中。

因此，在您的情况下，您应该将特定的 css 放在不同的文件中（比如说 login_style.css），并将基本模板包含在子文件中。

base.html

<!DOCTYPE html>
<html>
<head>
{% block head %}
    <link rel="stylesheet" href="{{ url_for("static", filename="styles.css") }}">
    <link rel="stylesheet" href="{{ url_for("static", filename="reset.css") }}">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}

{% block more_js %}
{% endblock %}
</body>
</html>

login.html

{% extends "base.html" %}

{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for("static", filename="login_style.css") }}">
{% endblock %}

{% block content %}
<p>Anything you want to put in the login page</p>
{% endblock %}

login_style.css：

body:not(#login-page){
    filter: blur(1px);
}
.login-page {
    display: inline-block;
    margin: 300px 0 0 700px;
    background-color: #c0c0c0;
}
label {
    font-size: 24px;
}
.username {
    width: 200px;
    margin-left: 50px;
    height: 24px;
}
.password {
    width: 200px;
    margin-left: 197px;
    margin-top: 15px;
    height: 24px;
}
.remember-me {
    margin-top: 20px;
}
.remember-me_label {
    font-size: 15px;
}
.login-submit {
    margin-top: 20px;
    margin-left: 150px;
}

【讨论】：

啊，伙计，感谢您的帮助，但我发现了问题所在。问题是我的 css 文件正在被浏览器缓存。

【解决方案2】：

浏览器缓存了我的 css 文件，这就是样式不起作用的原因。

【讨论】：