Quando estamos desenvolvendo um sistema web, precisamos utilizar diversos arquivos css e js em toda aplicação. Porém, muitos desses arquivos são utilizados em mais de uma página, fazendo com que, caso não se utilize as melhores práticas, haja duplicação nestas importações. No Django é comum criar uma página com toda a estrutura base para que as outras páginas do sistema herdem e, com isso, não precisamos duplicar código na aplicação.
Sendo assim, veremos neste artigo como realizar este processo e, assim, otimizar o processo de desenvolvimento de aplicações Django.
Curso
Django - Fundamentos
Conhecer o curso
O problema
Como dito acima, muitas vezes precisamos utilizar um mesmo arquivo css ou js em diversas páginas de um sistema. Por isso, é comum vermos um mesmo import em vários arquivos html de aplicações, o que mais atrapalha do que ajuda, já que precisamos ter muita atenção nos arquivos que estamos importando. Sendo assim, é comum vermos a seguinte estrutura em páginas HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CADASTRO DE CLIENTES</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<main class="container">
CONTEÚDO DA PÁGINA
</main>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LISTAGEM DE CLIENTES</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<main class="container">
CONTEÚDO DA PÁGINA
</main>
</body>
</html>
Podemos notar que há várias tags sendo utilizadas no dois arquivos (a estrutura base é a mesma, alterando apenas o conteúdo das páginas). Em apenas duas páginas pode não parecer um grande problema, porém isso começa a se tornar uma pedra no sapato quando o sistema vai crescendo, mais arquivos para importar e mais páginas para criar.
A solução
O Django possui várias template tags que facilitam o desenvolvimento de páginas html em nossas aplicações. No caso citado acima, o mais comum é criarmos um arquivo base que comporte toda a estrutura comum das páginas e os outros arquivos precisarão apenas herdá-lo.
Sendo assim, o primeiro passo é definir o conteúdo do arquivo base.html e criar um bloco onde o código referente as outras páginas serão “encaixados”:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PÁGINA BASE</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<main class="container">
{% block conteudo %}
{% endblock conteudo %}
</main>
</body>
</html>
Este bloco é criado apartir da template tag block. Delimitamos onde as informações das outras páginas serão “encaixadas” quando a página base for herdada. Agora, precisamos definir que as páginas irão herdar do arquivo base.html e inserir as informações onde o bloco conteudo foi criado:
{% extends "base.html" %}
{% block conteudo %}
CONTEÚDO DA PÁGINA DE CADASTRO
{% endblock conteudo %}
{% extends "base.html" %}
{% block conteudo %}
CONTEÚDO DA PÁGINA DE LISTAGEM
{% endblock conteudo %}
Agora, para cada página nova, só precisamos utilizar a tag extends e, assim, herdar todo o código da página base.html. Após isso, criamos o bloco conteudo e inserimos as informações referentes a cada página. Isso facilita (e muito) a criação de páginas html em aplicações Django, otimizando todo o processo.
