Grandes Melhorias na Home

Sei que, provavelmente, a "ansiedade" está dominando sua mente com reclamações de que a apresentação da página inicial está "feia". Confessa! 🤣

Vamos fazer vários ajustes, não só na página inicial, mas no aplicativo inteiro, relacionados ao conteúdo e ao visual.

Contexto Global

Para que o rodapé (<footer>) funcione, precisamos adicionar em cada view o contexto 'ownername': 'Joca da Silva',. Como é sempre o mesmo contexto, vamos torná-lo "global", ou seja, será aplicado automaticamente em todos os templates.

Vamos criar um context_processor para nosso aplicativo:

• •  Crie blog/context_processors.py:

def site_globals(request):

    return {

        'ownername': 'Joca da Silva',   # ← Nome do proprietário(a) do site

        'show_aside': True,             # ← Se `False`, `<aside>` é ocultado

    }

• •  Registre em core/settings.py, na variável TEMPLATES, chave OPTIONS → context_processors:

TEMPLATES = [

    {

        'BACKEND': 'django.template.backends.django.DjangoTemplates',

        'DIRS': [],

        'APP_DIRS': True,

        'OPTIONS': {

            'context_processors': [

                'django.template.context_processors.request',

                'django.contrib.auth.context_processors.auth',

                'django.contrib.messages.context_processors.messages',

                'blog.context_processors.site_globals',     # ← Adicionamos isso...

            ],

        },

    },

]

Vamos aproveitar e simplificar ainda mais as views:

• •  Edite blog/views/home.py para ficar assim:

from django.shortcuts import render

from blog.models import Post

def home(request):

    # Obtém todos os `post` usando filtros e ordenamento

    posts = Post.objects.filter(

        is_active=True,             # Só posts ativos

        is_deleted=False            # Nunca posts apagados

    ).order_by('-created_at')       # Ordenados pela data mais recente

    return render(

        request,

        'home.html',

        {

            'posts': posts,                 # ← Recebe todos os posts válidos

            'total_posts': posts.count(),   # ← Conta o total de posts válidos

            'show_aside': False,            # ← Oculta <aside> nesta página

        }

    )

• • Revisa a view dos contatos em blog/views/contacts.py que deve ser:

from django.shortcuts import render

def contacts(request):

    return render(

        request,

        'contacts.html'

    )

Não temos contexto em blog/views/contacts.py ainda!

O que mudou

Estude bem o código para perceber as mudanças:

• Escrevemos os contextos diretamente nos argumentos de render(), eliminando o dicionário context;

• Adicionamos 'total_posts': posts.count(),, onde posts.count(), retorna o total de postagens obtidas;

• Adicionamos 'show_aside': False, nos contextos. É um boolean que, quando False, desliga o <aside> da página.
  Definimos o valor padrão True em blog/context_processors.py, lembra?

Vamos ajustar blog/templates/home.html para usar total_posts e também mostrar as postagens de forma mais organizada e responsiva (Eba!), usando as classes do Bootstrap. Substitua os códigos de blog/templates/home.html pelo conteúdo abaixo:

Teste tudo...

😂 Eeeee! Mais feliz agora?

Template Base

Vamos ajustar blog/templates/_base.html para permitir ligar e desligar a <aside> usando o contexto show_aside que criamos.

A ideia aqui é que, sempre que não queremos usar o <aside> em uma página, como no caso da Home, basta setar 'show_aside': False, no contexto, na função render() na view da página.

• Abra blog/templates/_base.html;

• Localize a tag <main> que está assim:

<main class="container d-flex flex-column flex-md-row p-0 flex-grow-1">

    <div class="main-article-section bg-light p-3 flex-fill flex-grow-1">

        {% block content %}{% endblock %}

    </div>

    <div class="main-aside p-3 bg-dark-subtle">

        {% block aside %}{% endblock %}

    </div>

</main>

• Edite para:

<main class="container d-flex flex-column flex-md-row p-0 flex-grow-1">

    <div class="main-article-section bg-light p-3 flex-fill flex-grow-1">

        {% block content %}{% endblock %}

    </div>

    {# Esse trecho não funciona de `'show_aside': False` na view #}

    {% if show_aside %}

    <div class="main-aside p-3 bg-dark-subtle">

        {% block aside %}{% endblock %}

    </div>

    {% endif %}

</main>

Agora, nos template das páginas cujo contexto da view tem 'show_aside': False,, o {% block aside %}...{% endblock %} é irrelevante e pode ser omitido.