Etapa 3: Fornecer arquivos estáticos, adicionar páginas e usar a herança do modelo com o aplicativo Django

Artigo
03/18/2023

Etapa anterior: Criar um aplicativo do Django com modos de exibição e modelos de página

Nas etapas anteriores deste tutorial, você aprendeu como criar um aplicativo mínimo em Django com uma única página HTML. Os aplicativos Web modernos, no entanto, contêm muitas páginas. As páginas dos aplicativos web modernos usam recursos compartilhados, como arquivos CSS e JavaScript, para fornecer comportamento e estilo consistentes.

Nesta etapa, você aprenderá a:

Usar modelos de item do Visual Studio para adicionar rapidamente novos arquivos de diferentes tipos com código clichê conveniente (etapa 3-1)
Configurar o projeto em Django para fornecer arquivos estáticos (etapa 3-2)
Adicionar mais páginas ao aplicativo (etapa 3-3)
Usar a herança do modelo para criar um cabeçalho e uma barra de navegação usados nas páginas (etapa 3-4)

Etapa 3-1: Familiarizar-se com os modelos de item

À medida que você desenvolve um aplicativo Django, normalmente adiciona vários outros arquivos Python, HTML, CSS e JavaScript. Para cada tipo de arquivo (arquivos como web.config, que podem ser necessários para a implantação), o Visual Studio fornece modelos de itens convenientes para você começar.

Para exibir os modelos disponíveis, vá para Gerenciador de Soluções, clique com o botão direito do mouse na pasta em que você deseja criar o item e, depois, selecione Adicionar>Novo Item.

Add new item dialog in Visual Studio.

Para usar um modelo, selecione o modelo desejado, especifique um nome para o arquivo e selecione Adicionar. A adição de um item dessa maneira adiciona automaticamente o arquivo ao projeto do Visual Studio e marca as alterações para controle do código-fonte.

Pergunta: Como o Visual Studio sabe quais modelos de item oferecer?

Resposta: O arquivo de projeto do Visual Studio (.pyproj) contém um identificador de tipo de projeto que o marca como um projeto do Python. O Visual Studio usa esse identificador de tipo para mostrar apenas os modelos de item que são adequados para o tipo de projeto. Dessa forma, o Visual Studio pode fornecer um conjunto avançado de modelos de item para muitos tipos de projeto sem solicitar que você os classifique toda vez.

Etapa 3-2: Fornecer arquivos estáticos do seu aplicativo

Em um aplicativo Web criado com Python (usando qualquer estrutura), seus arquivos em Python sempre são executados no servidor do host da Web. Os arquivos do Python também nunca são transmitidos para o computador de um usuário. Outros arquivos, no entanto, como CSS e JavaScript, são usados exclusivamente pelo navegador. Portanto, o servidor host simplesmente os entrega como estão sempre que são solicitados. Esses arquivos são chamados de "estáticos", e o Django pode fornecê-los automaticamente sem que você precise escrever algum código.

Um projeto Django é configurado por padrão para fornecer arquivos estáticos da pasta static do aplicativo, graças a estas linhas no arquivo settings.py do projeto Django:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/

STATIC_URL = '/static/'

STATIC_ROOT = posixpath.join(*(BASE_DIR.split(os.path.sep) + ['static']))

Você pode organizar os arquivos dentro de static usando qualquer estrutura de pastas desejada e, em seguida, usar caminhos relativos dentro dessa pasta para referenciar os arquivos. Para demonstrar o processo, as seguintes etapas adicionam um arquivo CSS ao aplicativo e, em seguida, usam essa folha de estilos no modelo index.html:

No Gerenciador de Soluções, clique com o botão direito do mouse na pasta HelloDjangoApp do projeto do Visual Studio, selecione Adicionar>Nova pasta e nomeie a pasta static.
Clique com o botão direito do mouse na pasta static e selecione Adicionar>Novo item. Na caixa de diálogo exibida, selecione o modelo Folha de estilos, nomeie o arquivo site.css e selecione Adicionar.

O arquivo site.css é exibido no projeto e aberto no editor. A estrutura de pastas deve ser semelhante à imagem abaixo:
Substitua o conteúdo do arquivo site.css pelo seguinte código e salve o arquivo:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Substitua o conteúdo do arquivo templates/HelloDjangoApp/index.html do aplicativo pelo código a seguir. O código substitui o elemento <strong> usado na etapa 2 por um <span> que faz referência à classe de estilo message. O uso de uma classe de estilo oferece mais flexibilidade ao estilo do elemento. (Se você ainda não moveu o index.html para uma subpasta nos modelos ao usar o VS 2017 15.7 e anteriores, veja Namespacing de modelo na etapa 2-4.)
```
<html>
    <head>
        <title>{{ title }}</title>
        {% load static %} 
        <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
    </head>
    <body>
        <span class="message">{{ message }}</span>{{ content }}
    </body>
</html>
```
Execute o projeto para observar os resultados. Quando estiver pronto, pare o servidor e confirme as alterações no controle do código-fonte se desejar (conforme explicado na etapa 2).

Pergunta: Qual é a finalidade da marcação {% load static %}?

Resposta: A linha {% load static %} é necessária antes da referência a arquivos estáticos em elementos como <head> e <body>. No exemplo mostrado nesta seção, "static files" se refere a um conjunto de marcações de modelo do Django personalizado, o que permite o uso da sintaxe {% static %} para se referir a arquivos estáticos. Sem {% load static %}, você verá uma exceção quando o aplicativo for executado.

Pergunta: Há convenções para organizar arquivos estáticos?

Resposta: Você pode adicionar outros arquivos CSS, JavaScript e HTML à sua pasta static como você quiser. Uma maneira comum de organizar arquivos estáticos é criar subpastas chamadas fonts, scripts e content (para folhas de estilo e outros arquivos). Em cada caso, lembre-se de incluir essas pastas no caminho relativo do arquivo nas referências {% static %}.

Pergunta: Posso concluir a mesma tarefa sem usar a marca {% load static %}?

Resposta: Sim, você pode.

<html>
    <head>
        <title>{{ title }}</title>
        <link rel="stylesheet" type="text/css" href="../../static/site.css" />
    </head>
    <body>
        <span class="message">{{ message }}</span>{{ content }}
    </body>
</html>

Etapa 3-3: Adicionar uma página ao aplicativo

A adição de outra página ao aplicativo fará com que:

Adicione uma função em Python que defina o modo de exibição.
Adicione um modelo para a marcação da página.
Adicione o roteamento necessário ao arquivo urls.py do projeto do Django.

As etapas a seguir adicionam uma página "Sobre" ao projeto "HelloDjangoApp" e links para essa página na página inicial:

No Gerenciador de Soluções, clique com o botão direito do mouse na pasta templates/HelloDjangoApp. Selecione Adicionar>Novo item e selecione o modelo de item de página HTML. Nomeie o arquivo about.html e selecione Adicionar.

Dica

Se o comando Novo Item não aparecer no menu Adicionar, verifique se você interrompeu o servidor para que o Visual Studio saia do modo de depuração.

Substitua o conteúdo de about.html pela marcação abaixo (substitua o link explícito para a página inicial por uma barra de navegação simples na etapa 3-4):

<html>
    <head>
        <title>{{ title }}</title>
        {% load static %}
        <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
    </head>
    <body>
        <div><a href="home">Home</a></div>
        {{ content }}
    </body>
</html>

Abra o arquivo views.py do aplicativo e adicione uma função chamada about que usa o modelo:

def about(request):
    return render(
        request,
        "HelloDjangoApp/about.html",
        {
            'title' : "About HelloDjangoApp",
            'content' : "Example app page for Django."
        }
    )

Abra o arquivo urls.py do projeto do Django e adicione a seguinte linha à matriz urlPatterns:
```
re_path(r'^about$', HelloDjangoApp.views.about, name='about'),
```
Abra o arquivo templates/HelloDjangoApp/index.html e adicione a seguinte linha abaixo do elemento <body> para criar um link para a página About (substitua novamente esse link por uma barra de navegação na etapa 3-4):
```
<div><a href="about">About</a></div>
```
Salve todos os arquivos usando o comando de menu Arquivo>Salvar Tudo ou apenas pressione Ctrl+Shift+S. (Tecnicamente, essa etapa não é necessária, pois a execução do projeto no Visual Studio salva os arquivos automaticamente. No entanto, é um bom comando para se saber!)
Execute o projeto para observar os resultados e verificar a navegação entre as páginas. Quando terminar, feche o navegador.

Pergunta: Tentei usar "index" no link para a página inicial, mas não funcionou. Por quê?

Resposta: Embora a função de exibição no arquivo views.py seja nomeada index, os padrões de roteamento de URL no arquivo urls.py do projeto do Django não contêm uma expressão regular que corresponda à cadeia de caracteres "index". Para fazer a correspondência com a cadeia de caracteres, você precisa adicionar outra entrada para o padrão ^index$.

Como mostrado na próxima seção, é melhor usar a marcação {% url '<pattern_name>' %} no modelo de página para se referir ao nome de um padrão. Nesse caso, o Django cria a URL adequada para você. Por exemplo, substitua <div><a href="home">Home</a></div> em about.html por <div><a href="{% url 'index' %}">Home</a></div>. O uso de 'index' funciona aqui porque o primeiro padrão de URL em urls.py é, na verdade, chamado de 'index' (em virtude do argumento name='index'). Você também pode usar "home" para se referir ao segundo padrão.

Etapa 3-4: Usar a herança do modelo para criar um cabeçalho e uma barra de navegação

Em vez de ter links de navegação explícitos em cada página, os aplicativos Web modernos usam um cabeçalho de identidade visual e uma barra de navegação. Uma barra de navegação fornece os links de página mais importantes, menus pop-up e assim por diante. Para garantir que o cabeçalho e a barra de navegação sejam os mesmos em todas as páginas, não repita o mesmo código em todos os modelos de página. Em vez disso, defina as partes comuns de todas as páginas em um único local.

O sistema de modelos do Django fornece dois meios para reutilização de elementos específicos em vários modelos: includes e inheritance.

Includes corresponde a outros modelos de página que você insere em um local específico no modelo de referência usando a sintaxe {% include <template_path> %}. Se você quiser alterar o caminho dinamicamente no código, você pode também pode usar uma variável. Includes são usados no corpo de uma página para extrair o modelo compartilhado em um local específico na página.
Inheritance usa o {% extends <template_path> %} no início de um modelo de página para especificar um modelo de base compartilhado no qual o modelo de referência se baseará. O elemento Inheritance costuma ser usado para definir um layout compartilhado, uma barra de navegação e outras estruturas para as páginas de um aplicativo, de modo que os modelos de referência possam apenas adicionar ou modificar áreas específicas do modelo de base chamadas blocks.

Em ambos os casos, <template_path> é relativo à pasta templates do aplicativo (../ ou ./ também é permitido).

Um modelo de base delineia blocos usando as marcas {% block <block_name> %} e {% endblock %}. Se um modelo de referência usar marcações com o mesmo nome de bloco, o conteúdo do bloco substituirá o do modelo de base.

As etapas a seguir demonstram a herança:

Na pasta templates/HelloDjangoApp do aplicativo, crie um novo arquivo HTML. Clique com o botão direito do mouse na pasta templates/HelloDjangoApp, selecione Adicionar>Novo item e, em seguida, selecione o modelo de item página HTML. Nomeie o arquivo layout.html e selecione Adicionar.

Substitua o conteúdo do arquivo layout.html pela marcação abaixo. Veja que esse modelo contém um bloco chamado "conteúdo", que representa tudo o que as páginas de referência precisam substituir:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{ title }}</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
</head>

<body>
    <div class="navbar">
       <a href="/" class="navbar-brand">Hello Django</a>
       <a href="{% url 'home' %}" class="navbar-item">Home</a>
       <a href="{% url 'about' %}" class="navbar-item">About</a>
    </div>

    <div class="body-content">
{% block content %}{% endblock %}
        <hr/>
        <footer>
            <p>&copy; 2018</p>
        </footer>
    </div>
</body>
</html>

Adicione os seguintes estilos ao arquivo static/site.css do aplicativo (este passo a passo não está tentando demonstrar o design responsivo; esses estilos servem apenas para gerar um resultado interessante):

.navbar {
    background-color: lightslategray;
    font-size: 1em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    padding: 8px 5px 8px 5px;
}

.navbar a {
    text-decoration: none;
    color: inherit;
}

.navbar-brand {
    font-size: 1.2em;
    font-weight: 600;
}

.navbar-item {
    font-variant: small-caps;
    margin-left: 30px;
}

.body-content {
    padding: 5px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Modifique o arquivo templates/HelloDjangoApp/index.html para se referir ao modelo base e torná-lo utilizável na página. Adicione a seguinte linha como linha 1 na página HTML (acima da marca html):
```
{% extends "HelloDjangoApp/layout.html" %}
```
Você pode ver que, usando a herança, esse modelo se torna simples de implementar dentro da marca body para substituir o bloco de conteúdo:
```
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Modifique o arquivo templates/HelloDjangoApp/about.html da mesma maneira para disponibilizar o modelo de layout. Adicione a mesma linha da etapa 1 na página HTML (acima da marca html):
```
{% extends "HelloDjangoApp/layout.html" %}
```
Em seguida, usando herança, implemente o modelo dentro da marca body para substituir o bloco de conteúdo:
```
{% block content %}
{{ content }}
{% endblock %}
```
Execute o servidor para observar os resultados. Quando terminar, feche o navegador.
Como você fez alterações significativas no aplicativo, é novamente um bom momento para confirmar suas alterações no controle do código-fonte.

Próximas etapas

Usar o modelo Projeto Web Django completo

Aprofunde-se um pouco mais

Como gravar seu primeiro aplicativo do Django, parte 3 (modos de exibição) (docs.djangoproject.com)
Para conhecer mais recursos de modelos do Django, como o fluxo de controle, confira A linguagem de modelos do Django (docs.djangoproject.com)
Para obter detalhes completos sobre como usar a marcação {% url %}, confira url dentro de Referência de marcações de modelo internas e filtros para modelos do Django (docs.djangoproject.com)
Código-fonte do tutorial no GitHub: Microsoft/python-sample-vs-learning-django

Compartilhar via