Отрегулируйте bootstrap в шаблоне jinja (Flask Framework)

Question

Я хотел бы настроить форматирование класса bootstrap по умолчанию в шаблоне 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;
}

Спасибо за любой совет!

Вацлав

Answer 1

Я наконец нашел здесь рабочее решение:

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 файл помещается в папку stati c. Но будьте осторожны, stati c не является частью пути в параметре filename, потому что url_for('static') автоматически просматривается в этой папке.

Спасибо всем за вашу готовность помочь!

Answer 2

Я попытаюсь ответить на вопрос «как настроить элемент с помощью файла. css вместо того, чтобы стилизовать его напрямую?»

Go в вашем base.html файле, т.е. простираться из тега заголовка и в конце всех остальных таблиц стилей создать блок Jinja2, например,

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

Второй шаг - вызвать этот блок в ваших дочерних шаблонах и передать ваш. css файлы там, а не в блоке заголовка.

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

Попробуйте и дайте нам знать!