O autor selecionou o Free and Open Source Fund para receber uma doação como parte do programa Write for DOnations.
Introdução
Flask é um framework web leve em Python que fornece ferramentas e recursos úteis para criar aplicações web na linguagem Python.
Ao desenvolver uma aplicação web, é importante separar a lógica de negócios da lógica de apresentação. A lógica de negócios é responsável por lidar com as requisições dos usuários e conversar com o banco de dados para construir uma resposta apropriada. A lógica de apresentação é como os dados são apresentados ao usuário, geralmente usando arquivos HTML para construir a estrutura básica da página de resposta web e estilos CSS para estilizar os componentes HTML. Por exemplo, em uma aplicação de redes sociais, você pode ter um campo de nome de usuário e um campo de senha que são exibidos apenas quando o usuário não está logado. Se o usuário estiver logado, você exibe um botão de logout. Isso é a lógica de apresentação. Se um usuário digitar seu nome de usuário e senha, você pode usar o Flask para realizar a lógica de negócios: extrair os dados (o nome de usuário e senha) da requisição, logar o usuário se as credenciais estiverem corretas ou responder com uma mensagem de erro. Como a mensagem de erro é exibida será tratado pela lógica de apresentação.
No Flask, você pode utilizar a linguagem de modelagem Jinja para renderizar templates HTML. Um template é um arquivo que pode conter conteúdo fixo e dinâmico. Quando um usuário solicita algo de sua aplicação (como uma página inicial, ou uma página de login), Jinja permite que você responda com um template HTML onde pode usar diversas funcionalidades que não estão disponíveis no HTML padrão, como variáveis, instruções if, laços for, filtros e herança de templates. Essas funcionalidades permitem que você escreva páginas HTML de fácil manutenção de maneira eficiente. Jinja também escapa automaticamente o HTML para prevenir ataques de Cross-Site Scripting (XSS).
Neste tutorial, você construirá uma pequena aplicação web que renderiza vários arquivos HTML. Você usará variáveis para passar dados do servidor para os templates. A herança de templates ajudará você a evitar repetições. Você utilizará lógica em templates, como condicionais e loops, usará filtros para modificar texto e utilizará o conjunto de ferramentas Bootstrap para estilizar sua aplicação.
Pré-requisitos
-
Um ambiente de programação local em Python 3. Siga o tutorial para sua distribuição na série Como Instalar e Configurar um Ambiente de Programação Local para Python 3. Neste tutorial, chamaremos nosso diretório de projeto de
flask_app. -
Flask instalado no seu ambiente de programação, conforme abordado na Etapa 1 de Como Criar Sua Primeira Aplicação Web Usando Flask e Python.
-
Uma compreensão dos conceitos básicos do Flask, como rotas e funções de visualização. Se você não está familiarizado com Flask, confira Como Criar Sua Primeira Aplicação Web Usando Flask e Python.
-
Uma compreensão dos conceitos básicos de HTML. Você pode revisar nossa série de tutoriais Como Construir um Site com HTML para conhecimento de fundo.
Passo 1 — Renderizando um Modelo e Usando Variáveis
Certifique-se de que você ativou seu ambiente e tem o Flask instalado, e então você pode começar a construir sua aplicação. O primeiro passo é exibir uma mensagem que cumprimenta os visitantes na página inicial. Você usará a função auxiliar render_template() do Flask para servir um modelo HTML como resposta. Você também verá como passar variáveis do lado da sua aplicação para seus modelos.
Primeiro, no diretório flask_app, abra um arquivo chamado app.py para edição. Use nano ou seu editor de texto favorito:
Adicione o seguinte código dentro do arquivo app.py:
Salve e feche o arquivo.
Neste bloco de código, você importa a classe Flask e a função render_template() do pacote flask. Você usa a classe Flask para criar uma instância de aplicação Flask chamada app. Então você define uma função de visualização (que é uma função Python que retorna uma resposta HTTP) chamada hello() usando o decorador app.route(), que converte uma função regular em uma função de visualização. Esta função de visualização usa a função render_template() para renderizar um arquivo de modelo chamado index.html.
Em seguida, você precisará criar o arquivo de modelo index.html em um diretório chamado templates dentro do seu diretório flask_app. O Flask procura por modelos no diretório de templates, que é chamado templates, então o nome é importante. Certifique-se de estar dentro do diretório flask_app e execute o seguinte comando para criar o diretório templates:
Em seguida, abra um arquivo chamado index.html dentro do diretório templates para edição. O nome index.html aqui não é um nome padrão obrigatório; você pode chamá-lo de home.html ou homepage.html ou qualquer outro nome que desejar:
Adicione o seguinte código HTML dentro do arquivo index.html:
Aqui, você definiu um título, adicionou uma mensagem Hello World! como um cabeçalho H1 e criou uma mensagem Welcome to FlaskApp! como um cabeçalho H2.
Salve e feche o arquivo.
Enquanto estiver no diretório flask_app com seu ambiente virtual ativado, informe ao Flask sobre o aplicativo (app.py no seu caso) usando a variável de ambiente FLASK_APP, e defina a variável de ambiente FLASK_ENV como development para executar o aplicativo no modo de desenvolvimento e obter acesso ao depurador. Use os seguintes comandos para fazer isso (no Windows, use set em vez de export):
Então, execute o aplicativo usando o comando flask run:
Com o servidor de desenvolvimento em execução, visite a seguinte URL usando seu navegador:
http://127.0.0.1:5000/
Você verá que o título da página está definido como FlaskApp, e os dois títulos são renderizados em HTML.
Em aplicações web, frequentemente é necessário passar dados dos arquivos Python da sua aplicação para os templates HTML. Para demonstrar como fazer isso nesta aplicação, você passará uma variável contendo a data e hora UTC atuais para o template index, e exibirá o valor da variável no template.
Deixe o servidor em execução e abra o arquivo app.py para edição em um novo terminal:
Importe o módulo datetime da biblioteca padrão do Python e edite a função index() para que o arquivo fique assim:
import datetime
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def hello():
return render_template('index.html', utc_dt=datetime.datetime.utcnow())
Salve e feche o arquivo.
Aqui, você importou o módulo datetime e passou uma variável chamada utc_dt para o template index.html com o valor de datetime.datetime.utcnow(), que é a data e hora UTC atuais.
Em seguida, para exibir o valor da variável na página index, abra o arquivo index.html para edição:
Edite o arquivo para ficar assim:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FlaskApp</title>
</head>
<body>
<h1>Hello World!</h1>
<h2>Welcome to FlaskApp!</h2>
<h3>{{ utc_dt }}</h3>
</body>
</html>
Salve e feche o arquivo.
Você adicionou um título H3 com o delimitador especial {{ ... }} para imprimir o valor da variável utc_dt.
Abra seu navegador e visite a página index:
http://127.0.0.1:5000/
Você verá uma página semelhante à seguinte imagem:
Agora você criou uma página de índice com um modelo HTML em sua aplicação Flask, renderizou um modelo e passou e exibiu um valor variável. A seguir, você evitará repetição de código usando a herança de templates.
Passo 2 — Usando Herança de Templates
Neste passo, você criará um template base com conteúdo que pode ser compartilhado com seus outros templates. Você editará seu template de índice para herdar do template base. Então, você criará uma nova página que servirá como a página Sobre da sua aplicação, onde os usuários podem encontrar mais informações sobre sua aplicação.
Um template base contém componentes HTML que geralmente são compartilhados entre todos os outros templates, como o título da aplicação, barras de navegação e rodapés.
Primeiro, abra um novo arquivo chamado base.html para edição dentro do diretório de templates:
Escreva o seguinte código dentro do seu arquivo base.html:
Salve e feche o arquivo.
A maior parte do código neste arquivo é HTML padrão, um título, algum estilo para os links de navegação, uma barra de navegação com dois links, um para a página de índice e outro para a página Sobre ainda não criada, e um <div> para o conteúdo da página. (Os links ainda não funcionam; o próximo passo demonstrará como vincular entre páginas).
No entanto, as seguintes partes destacadas são específicas para o motor de template Jinja:
-
{% block title %} {% endblock %}: Um bloco que serve como um espaço reservado para um título. Mais tarde, você o utilizará em outros templates para fornecer um título personalizado para cada página em sua aplicação sem reescrever toda a seção<head>cada vez. -
{% block content %} {% endblock %}: Outro bloco que será substituído por conteúdo dependendo do template filho (um template que herda debase.html) que o substituirá.
Agora que você tem um template base, pode aproveitá-lo usando a herança. Abra o arquivo index.html:
Em seguida, substitua seu conteúdo pelo seguinte:
Aqui, você usa a tag {% extends %} para herdar do template base.html. Em seguida, estende-o substituindo o bloco content no template base pelo que está dentro do bloco content no bloco de código anterior.
Este bloco de conteúdo contém uma tag <h1> com o texto Index dentro de um bloco de título, que por sua vez substitui o bloco title original no template base.html pelo texto Index, de modo que o título completo se torna Index - FlaskApp. Dessa forma, você pode evitar repetir o mesmo texto duas vezes, pois ele funciona tanto como título da página quanto como um cabeçalho que aparece abaixo da barra de navegação herdada do template base.
Depois, você tem mais alguns cabeçalhos: um cabeçalho <h1> com o texto Hello World!, um cabeçalho <h2> e um cabeçalho <h3> contendo o valor da variável utc_dt.
A herança de templates permite que você reutilize o código HTML que tem em outros templates (base.html neste caso) sem ter que repeti-lo cada vez que for necessário.
Salve e feche o arquivo e atualize a página index no seu navegador. A página ficará assim:
Em seguida, você criará a página About. Abra o arquivo app.py para adicionar uma nova rota:
Adicione a seguinte rota no final do arquivo:
Aqui, você usa o decorador app.route() para criar uma função de visualização chamada about(). Nela, você retorna o resultado de chamar a função render_template() com o nome do arquivo de modelo about.html como argumento.
Salve e feche o arquivo.
Abra um arquivo de modelo chamado about.html para edição:
Adicione o seguinte código ao arquivo:
Aqui, você herda do modelo base usando a tag extends, substitui o bloco content do modelo base com uma tag <h1> que também serve como título da página, e adiciona uma tag <h3> com algumas informações sobre o aplicativo.
Salve e feche o arquivo.
Com o servidor de desenvolvimento em execução, visite a seguinte URL usando seu navegador:
http://127.0.0.1:5000/about
Você verá uma página semelhante à seguinte:
Observe como a barra de navegação e parte do título são herdados do modelo base.
Agora você criou um modelo base e o utilizou em sua página inicial e na página sobre para evitar repetição de código. Os links na barra de navegação não fazem nada neste momento. No próximo passo, você aprenderá como vincular entre rotas em seus modelos corrigindo os links da barra de navegação.
Passo 3 — Vinculando entre Páginas
Neste passo, você aprenderá a vincular entre páginas em seus templates usando a função auxiliar url_for(). Você adicionará dois links à barra de navegação em seu template base, um para a página inicial e um para a página Sobre.
Primeiro, abra seu template base para edição:
Edite o arquivo para ficar da seguinte forma:
Aqui, você usa a função especial url_for() que retornará a URL para a função de visualização que você fornecer. O primeiro link leva à rota da função de visualização hello() (que é a página inicial). O segundo link leva à rota da função de visualização about(). Note que você passa o nome da função de visualização, não a rota (/ ou /about).
Usar a função url_for() para construir URLs ajuda a gerenciar URLs de forma mais eficiente. Se você codificar URLs de forma rígida, seus links quebrarão se você editar as rotas. Com url_for(), você pode editar rotas e garantir que os links ainda funcionem como esperado. A função url_for() também cuida de outras coisas, como escapar caracteres especiais.
Salve e feche o arquivo.
Agora vá para a página inicial e teste os links na barra de navegação. Você verá que eles funcionam conforme esperado.
Você aprendeu a usar a função url_for() para criar links para outras rotas em seus templates. Em seguida, você adicionará algumas instruções condicionais para controlar o que é exibido em seus templates dependendo das condições que você definir, e usará loops for em seus templates para exibir itens de lista.
Passo 4 — Usando Condicionais e Loops
Neste passo, você usará instruções if em seus templates para controlar o que exibir dependendo de certas condições. Você também usará loops for para percorrer listas em Python e exibir cada item na lista. Você adicionará uma nova página que exibe comentários em uma lista. Comentários com um número de índice par terão um fundo azul, e comentários com um número de índice ímpar serão exibidos com um fundo cinza.
Primeiro, você criará uma rota para a página de comentários. Abra seu arquivo app.py para edição:
Adicione a seguinte rota no final do arquivo:
Na rota acima, você tem uma lista em Python chamada comments que contém quatro itens. (Esses comentários normalmente viriam de um banco de dados em um cenário do mundo real, em vez de serem codificados como você fez aqui.) Você retorna um arquivo de template chamado comments.html na última linha, passando uma variável chamada comments contendo a lista para o arquivo de template.
Salve e feche o arquivo.
Em seguida, abra um novo arquivo comments.html dentro do diretório templates para edição:
Adicione o seguinte código ao arquivo:
Aqui, você estende o modelo base.html e substitui o conteúdo do bloco content. Primeiro, você usa um cabeçalho <h1> que também serve como título da página.
Você usa um loop for do Jinja na linha {% for comment in comments %} para percorrer cada comentário na lista comments (que é armazenada na variável comment). Você exibe o comentário na tag <p style="font-size: 24px">{{ comment }}</p> da mesma maneira que normalmente exibiria uma variável no Jinja. Você sinaliza o fim do loop for usando a palavra-chave {% endfor %}. Isso é diferente da forma como os loops for do Python são construídos, pois não há indentação especial nos modelos Jinja.
Salve e feche o arquivo.
Com o servidor de desenvolvimento em execução, abra seu navegador e visite a página de comentários:
http://127.0.0.1:5000/comments
Você verá uma página semelhante à seguinte:
Agora, você usará a instrução condicional if em seus modelos, exibindo comentários com um número de índice ímpar com um fundo cinza e comentários com um número de índice par com um fundo azul.
Abra seu arquivo de modelo comments.html para edição:
Edite-o para ficar da seguinte forma:
Com esta nova edição, você adicionou uma instrução if na linha {% if loop.index % 2 == 0 %}. A variável loop é uma variável especial do Jinja que fornece acesso a informações sobre o loop atual. Aqui, você usa loop.index para obter o índice do item atual, que começa em 1, e não em 0 como nas listas do Python.
A instrução if aqui verifica se o índice é par usando o operador %. Ela verifica o resto da divisão do número do índice por 2; se o resto for 0, significa que o número do índice é par, caso contrário, o número do índice é ímpar. Você usa a tag {% set %} para declarar uma variável chamada bg_color. Se o número do índice for par, você define como uma cor azulada, caso contrário, se o número do índice for ímpar, define a variável bg_color como cinza. Em seguida, você usa a variável bg_color para definir uma cor de fundo para a tag <div> que contém o comentário. Acima do texto do comentário, você usa loop.index para exibir o número do índice atual em uma tag <p>.
Salve e feche o arquivo.
Abra seu navegador e visite a página de comentários:
http://127.0.0.1:5000/comments
Você verá sua nova página de Comentários:
Esta foi uma demonstração de como usar a instrução if. Mas você também pode obter o mesmo efeito usando o auxiliar especial loop.cycle() do Jinja. Para demonstrar isso, abra o arquivo comments.html:
Edite-o para ficar da seguinte forma:
{% extends 'base.html' %}
{% block content %}
<h1>{% block title %} Comments {% endblock %}</h1>
<div style="width: 50%; margin: auto">
{% for comment in comments %}
<div style="padding: 10px;
background-color: {{ loop.cycle('#EEE', '#e6f9ff') }};
margin: 20px">
<p>#{{ loop.index }}</p>
<p style="font-size: 24px">{{ comment }}</p>
</div>
{% endfor %}
</div>
{% endblock %}
Aqui, você removeu a instrução if/else e utilizou o auxiliar loop.cycle('#EEE', '#e6f9ff') para alternar entre as duas cores. O valor de background-color será #EEE uma vez e #e6f9ff outra.
Salve e feche o arquivo.
Abra a página de comentários no seu navegador, atualize-a e verá que isso tem o mesmo efeito que a instrução if.
Você pode usar instruções if para diversos propósitos, incluindo controlar o que é exibido na página. Por exemplo, para exibir todos os comentários, exceto o segundo, você pode usar uma instrução if com a condição loop.index != 2 para filtrar o segundo comentário.
Abra o modelo de comentários:
E edite-o para ficar da seguinte forma:
{% extends 'base.html' %}
{% block content %}
<h1>{% block title %} Comments {% endblock %}</h1>
<div style="width: 50%; margin: auto">
{% for comment in comments %}
{% if loop.index != 2 %}
<div style="padding: 10px;
background-color: #EEE;
margin: 20px">
<p>#{{ loop.index }}</p>
<p style="font-size: 24px">{{ comment }}</p>
</div>
{% endif %}
{% endfor %}
</div>
{% endblock %}
Aqui, você usa {% if loop.index != 2 %} para mostrar apenas os comentários que não têm o índice 2, o que significa todos os comentários, exceto o segundo. Você também usa um valor codificado para a cor de fundo em vez do auxiliar loop.cycle() para simplificar, e o resto não é alterado. Você encerra a instrução if usando {% endif %}.
Salve e feche o arquivo.
Atualize a página de comentários e verá que o segundo comentário não é exibido.
Agora, você precisa adicionar um link que leve os usuários à página de Comentários na barra de navegação. Abra o modelo base para edição:
Edite o conteúdo da tag `<nav>` adicionando um novo link `<a>` a ela:
Aqui, você usa o auxiliar `url_for()` para vincular à função de visualização `comments()`.
Salve e feche o arquivo.
A barra de navegação agora terá um novo link que leva à página de comentários.
Você usou instruções `if` em seus templates para controlar o que exibir dependendo de certas condições. Você usou loops `for` para percorrer listas em Python e exibir cada item na lista, e aprendeu sobre a variável especial `loop` no Jinja. Em seguida, você usará filtros Jinja para controlar como os dados variáveis são exibidos.
Passo 5 — Usando Filtros
Neste passo, você aprenderá como usar filtros Jinja em seus templates. Você usará o filtro `upper` para converter os comentários adicionados no passo anterior para maiúsculas, usará o filtro `join` para unir uma sequência de strings em uma única string e aprenderá como renderizar código HTML confiável sem escapá-lo usando o filtro `safe`.
Primeiro, você converterá os comentários na página de comentários para maiúsculas. Abra o template `comments.html` para edição:
Edite-o para ficar da seguinte forma:
Aqui, você adicionou o upper filtro usando o símbolo de pipe (|). Isso modificará o valor da variável comment para maiúsculas.
Salve e feche o arquivo.
Com o servidor de desenvolvimento em execução, abra a página de comentários com seu navegador:
http://127.0.0.1:5000/comments
Você pode ver que os comentários estão todos em maiúsculas após a aplicação do filtro.
Os filtros também podem receber argumentos entre parênteses. Para demonstrar isso, você usará o filtro join para unir todos os comentários na lista comments.
Abra o template de comentários:
Edite-o para ficar assim:
Aqui, você adicionou uma tag <hr> e uma tag <div> onde une todos os comentários na lista comments usando o filtro join().
Salve e feche o arquivo.
Atualize a página de comentários e você verá uma página semelhante à seguinte:
Como você pode ver, a lista comments é exibida com os comentários separados por um símbolo de pipe, que é o que você passou para o filtro join().
Outro filtro importante é o filtro safe, que permite renderizar HTML confiável no navegador. Para ilustrar isso, você adicionará algum texto contendo uma tag HTML ao seu modelo de comentários usando o delimitador {{ }} do Jinja. Em um cenário do mundo real, isso viria como uma variável do servidor. Então, você editará o argumento join() para ser a tag <hr> em vez do símbolo de pipe.
Abra o modelo de comentários:
Edite-o para ficar assim:
Aqui, você adicionou o valor "<h1>COMENTÁRIOS</h1>" e alterou o argumento de junção para a tag <hr>.
Salve e feche o arquivo.
Atualize a página de comentários e você verá uma página semelhante à seguinte:
Como você pode ver, as tags HTML não foram renderizadas. Esta é uma característica de segurança no Jinja, porque algumas tags HTML podem ser prejudiciais e resultar em um ataque de Cross Site Scripting (XSS). Você deve permitir que apenas HTML confiável seja renderizado no navegador.
Para renderizar as tags HTML acima, abra o arquivo do modelo de comentários:
Edite-o adicionando o filtro safe:
Você pode ver que também pode encadear filtros como na linha <p>{{ comments | join(" <hr> ") | safe }}</p>. Cada filtro é aplicado ao resultado do filtro anterior.
Salve e feche o arquivo.
Atualize a página de comentários e você verá que as tags HTML agora são renderizadas conforme o esperado:
Aviso: Usar o filtro safe em HTML proveniente de fontes desconhecidas pode expor sua aplicação a ataques XSS. Não o utilize a menos que o HTML que você está renderizando seja de uma fonte confiável.
Para mais informações, consulte a lista de filtros integrados do Jinja.
Você aprendeu agora como usar filtros em seus templates Jinja para modificar valores de variáveis. Em seguida, você integrará o kit de ferramentas Bootstrap para estilizar sua aplicação.
Passo 6 — Integrando Bootstrap
Neste passo, você aprenderá a usar o kit de ferramentas Bootstrap para estilizar sua aplicação. Você adicionará uma barra de navegação Bootstrap no template base que aparecerá em todas as páginas que herdam do template base.
O kit de ferramentas Bootstrap ajuda a estilizar sua aplicação para que seja mais visualmente atraente. Ele também ajudará a incorporar páginas web responsivas em sua aplicação web para que funcione bem em navegadores móveis sem precisar escrever seu próprio código HTML, CSS e JavaScript para alcançar esses objetivos.
Para usar o Bootstrap, você precisará adicioná-lo ao template base para que possa usá-lo em todos os outros templates.
Abra o seu modelo base.html para edição:
Edite-o para ficar como segue:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>{% block title %} {% endblock %} - FlaskApp</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="{{ url_for('hello') }}">FlaskApp</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('comments') }}">Comments</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('about') }}">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
{% block content %} {% endblock %}
</div>
<!-- Optional JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>
A maior parte do código acima é boilerplate do Bootstrap necessário para usá-lo. Você tem algumas tags meta, um link para o arquivo CSS do Bootstrap na seção <head>, e no final tem um link para JavaScript opcional. As partes destacadas do código contêm código Jinja explicado nas etapas anteriores. Observe como você usa tags específicas e classes CSS para dizer ao Bootstrap como exibir cada elemento.
Na tag <nav> acima, você tem uma tag <a> com a classe navbar-brand, que determina o link da marca na barra de navegação. Dentro da tag <ul class="navbar-nav">, você tem itens regulares da barra de navegação dentro de uma tag <a> em uma tag <li>.
Para aprender mais sobre essas tags e classes CSS, consulte os componentes do Bootstrap.
Salve e feche o arquivo.
Com o servidor de desenvolvimento em execução, abra a página inicial com o seu navegador:
http://127.0.0.1:5000/
Você verá uma página semelhante à seguinte:
Agora você pode usar componentes do Bootstrap para estilizar itens em sua aplicação Flask em todos os seus modelos.
Conclusão
Agora você sabe como usar templates HTML em sua aplicação web Flask. Você usou variáveis para passar dados do servidor para os templates, empregou herança de templates para evitar repetições, incorporou elementos como condicionais if e loops for, e linkou entre diferentes páginas. Você aprendeu sobre filtros para modificar texto e exibir HTML confiável, e integrou o Bootstrap em sua aplicação.
Se quiser ler mais sobre Flask, confira a página de tópico do Flask.
Source:
https://www.digitalocean.com/community/tutorials/how-to-use-templates-in-a-flask-application