Template HTML

Vamos usar o recurso de "templates" HTML que é muito mais eficiente do que escrever código HTML nas views.

• • Crie a seguinte estrutura de pastas e arquivo dentro do app blog:

blog/

└── templates/        ← Crie a pasta "templates". Todos os templates HTML ficam aqui!

    └── home.html     ← Crie o primeiro template.

• Abra blog/templates/home.html e adicione:

<!DOCTYPE html>

<html lang="pt-br">

<head>

    <meta charset="UTF-8">

    <title>Blog</title>

</head>

<body>

    <h1>Olá, Django com Template!</h1>

</body>

</html>

Conectar o Template à View

• • Abra blog/views/home.py e substitua o conteúdo por:

from django.shortcuts import render

def home(request):

    return render(request, 'home.html')

Trocamos o HttpResponse pela função render(), que carrega o template HTML, processa e entrega ao navegador do usuário que solicitou a rota.

• • Acesse novamente http://localhost:8000 para ver o resultado!

luxo de Criação

Daqui para frente, para criar cada nova página para o aplicativo precisamos, pelo menos:

• Criar a rota para a página em blog/urls.py → Isso é o caminho para chegar até a página;

• Criar a view da rota na pasta 📂 blog/views → A lógica para gerar a página fica aqui;

• Importar a view em blog/views/__init__.py → Isso torna a view da página global;

• Criar o template HTML na pasta 📂 bloc/templates → O código HTML, mas com alguma lógica, quando necessário.

A ordem em que isso é feito não importa. A página só funciona após a conclusão das etapas acima. Conforme novos recursos são implementados, precisaremos interagir com outras partes do projeto além dessas...

Para testar, vamos criar uma página para a rota http://localhost:8000/contacts, nossa página de contatos:

1. Crie o template HTML no arquivo blog/templates/contacts.html:

<!DOCTYPE html>

<html lang="pt-br">

<head>

    <meta charset="UTF-8">

    <title>Blog - Faça Contato</title>

</head>

<body>

    <h1>Faça Contato</h1>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum minus dignissimos neque cumque ipsa similique, repellendus consectetur sunt commodi earum quis? Perferendis quam odit, doloribus minima ab fugit nobis. In.</p>

</body>

</html>

2. Crie a view no arquivo blog/views/contacts.py, para adicionar uma função e a lógica da página:

from django.shortcuts import render

def contacts(request):

    return render(request, 'contacts.html')

3. Edite blog/views/__init__.py e adicione o import da view:

from .home import home           # ← Já existe

from .contacts import contacts   # ← Adicione

4. Edite a variável urlpatterns em blog\urls.py para adicionar a rota para a nova página:

urlpatterns = [

    path('', views.home, name='home'),                   # ← Rota da página inicial que já existe

    path('contacts/', views.contacts, name='contacts'),  # ← Nova rota para `contacts` aqui

]

Testa a nova rota, acessando http://localhost:8000/contacts...