在 jinja 模板中调整引导程序（Flask 框架）答案

【问题标题】：Adjust bootstrap within jinja template (Flask Framework)在 jinja 模板中调整引导程序（Flask 框架）
【发布时间】：2020-07-12 01:53:36
【问题描述】：

我想在 jinja 模板中调整默认引导类格式。我唯一想做的就是改变 h1 元素的颜色。但很遗憾，它仍然是黑色的。

我正在使用flask 和render_template 模块。

我在模板中有以下代码：

{% extends "bootstrap/base.html" %}
{% block head %}
{{ super() }}
<link rel="stylesheet" type="text/css" href="bootstrap_adjust.css">

{% endblock %}

{% block content %}
    <div class="container">
    <div class="page-header">
        <h1>Hello, Vaclav!</h1>
     </div>
</div>
{% endblock %}

boostrap_adjust.css 如下所示：

h1{
    color:blue;
}

感谢您的建议！

瓦茨拉夫

【问题讨论】：

一个技巧，如果这是你唯一想改变的，那就是<h1 style="color:blue;">Hello, Vaclav!</h1>
好的，谢谢您的评论。这就是我现在解决这个问题的方法，但我想学习如何使用外部 css 进行调整。
给h1元素一个id。然后使用该 ID 更改颜色。这样，您将覆盖引导程序的默认设置。你也可以使用!important

标签： flask jinja2 flask-bootstrap

【解决方案1】：

我将尝试回答“如何使用 .css 文件而不是直接设置样式来调整元素？”的问题

进入您的base.html 文件，即您扩展的文件，并在标头标记中，在所有其他样式表的末尾创建一个 Jinja2 块，如下所示

{% block stylesheets %}
{% endblock stylesheets %}

第二步是在你的子模板中调用这个块，并在其中传递你的 .css 文件，而不是在头块中传递它。

{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="bootstrap_adjust.css">
{% endblock stylesheets %}

试一试，让我们知道！

【讨论】：

您好，感谢您的建议。我完全按照你写的那样尝试了，但不幸的是它不起作用。我刚刚找到了这个线程并且它有效：stackoverflow.com/questions/34664156/…

【解决方案2】：

我终于在这里找到了可行的解决方案：

https://stackoverflow.com/questions/34664156/flask-bootstrap-custom-theme

所以在我的情况下这是可行的：

{% block styles %}
{{ super() }}

<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='bootstrap_adjust.css')}}">

{% endblock %}

.css 文件被放置在 static 文件夹中。但请注意，filename 参数中的静态不是路径的一部分，因为url_for('static') 会自动在此文件夹中查找。

感谢大家的热心帮助！

【讨论】：