Como estender e importar layouts no Laravel

Além de toda a grandiosidade do Laravel para atuação no back-end, temos um incrível template engine que nos auxilia em inúmeras tarefas do dia a dia. Com o Blade conseguimos otimizar muitos processos, deixar o desenvolvimento mais rápido, tornar as páginas mais flexíveis, dinâmicas, entre muitos outros ganhos.

Vamos criar nesse artigo um exemplo para importar duas páginas e estender outras três. Note a imagem abaixo, temos a página final que o usuário visualiza destacado por um retângulo cinza escuro, dentro dele temos um box azul que indica uma página de header, um box vermelho indicando o conteúdo variável e um box rosa indicando um rodapé.

Independente da página que o usuário vá carregar, vamos entregar o mesmo corpo, ou seja, mesmo header e footer. Nesse contexto, uma vez que a gente fizer qualquer alteração no header/footer, todas as páginas do site serão imediatamente afetadas.

Para esse exemplo vamos utilizar a versão 8 do Laravel de acordo com a documentação Extending Layouts.

Como estender e importar layouts no Laravel

Iniciamos com um projeto padrão, cuja instalação pode ser vista no código abaixo.

composer create-project laravel/laravel blades-layouts

Criando as Blades

Dentro do diretório resources\views, vamos criar alguns arquivos e uma pasta, conforme a estrutura abaixo.

layout/
---------master.blade.php
---------header.blade.php
---------footer.blade.php
home.blade.php
contact.blade.php
about.blade.php

Na imagem abaixo conseguimos ver como essa estrutura ficará.

Estrutura de pastas da camada de visão no Laravel

Criando a Controller

Vamos criar uma controladora bem simples, chama de LayoutController, você pode ver o comando artisan utilizado abaixo.

php artisan make:controller LayoutController

Com a controladora criada, vamos seguir com os métodos abaixo, cada um retornando apenas a sua página principal, ou seja, o método home retorna uma view referente a home. Vamos configurar a seguir como isso vai se comportar nas rotas.

Caminho da controladora: app\Http\Controllers\LayoutController.php

     /**
     * Retorna a página principal
     *
     * @return void
     */
    public function index()
    {
        return view('home');
    }
    
    /**
     * Retorna a página de contato
     *
     * @return void
     */
    public function contact()
    {
        return view('contact');
    }
    
    /**
     * Retorna a página sobre nós
     *
     * @return void
     */
    public function about()
    {
        return view('about');
    }

Criando as rotas

Acessando o arquivo routes\web.php, vamos incluir as rotas para acessar a nossa controladora e respectivos métodos.

Veja abaixo as nossas rotas, não esqueça de dar o USE na controladora.

use App\Http\Controllers\LayoutController;

Route::get('/', [LayoutController::class, 'index']);
Route::get('/about', [LayoutController::class, 'about']);
Route::get('/contact', [LayoutController::class, 'contact']);

Rodando o código abaixo vamos iniciar nosso servidor e rodar a aplicação atual.

php artisan serve

Agora temos acesso a três rotas, sendo elas:

http://localhost:8000 - acesso a página principal;
http://localhost:8000/contact - acesso a página de contato;
http://localhost:8000/about - acesso a página sobre nós.

Estendendo as Blades

Até aqui temos nossa aplicação rodando com todas as rotas e métodos devidamente criados, vamos agora nas páginas home, contact e about, incluir o código abaixo, mudando apenas o título das páginas em questão.

<section>
    <h1>Bem-vindo a página principal</h1>
</section>

Note que para a página contact, você pode utilizar o texto “Fale com a gente”, enquanto para a página about você pode utilizar “Saiba mais sobre nós”.

Temos cada página com nosso código individual, mas a partir de agora vamos começar a estruturar melhor nossas páginas. Imagine que as páginas home, contact e about são apenas o miolo, o conteúdo do centro. Vamos pegar esse miolo e inserir no centro de uma página mestre.

Agora altere seu código para ficar como a estrutura abaixo, faça isso para os três arquivos criado.

@extends('layouts.master')

@section('title', 'Página inicial')

@section('body')

    <section>
        <h1>Bem-vindo a página principal</h1>
    </section>

@endsection

Vamos entender cada linha, note que em um primeiro momento pode parecer confuso e até desmotivador, mas continue lendo, você entenderá o quão fácil e simples as instruções abaixo são.

Linha 1 - Aqui estendemos de fato nosso layout, isso faz com que a gente traga todo o conteúdo da master.blade.php para dentro da página atual.
Linha 2 - Na master.blade.php, vamos ter um trecho de código que espera por um valor chamado title, assim dentro de cada miolo de página, podemos definir o título que vai aparecer no title do navegador.
Linha 5 - Bem parecido e utiliza até o mesmo mecanismo do que foi citado na linha 2, porém temos na linha 11 o encerramento desse bloco. Dentro da seção body, definimos todo o conteúdo que será impresso dentro da seção body do arquivo master.blade.php, em outras palavras, tudo que está dentro dessa seção é o que é considerado miolo.

Se nesse momento você abrir a sua página principal, por exemplo, vai perceber que nenhum conteúdo será impresso, isso por que no arquivo master.blade.php, não temos nenhuma seção chamada body.

Agora vamos finalizar com algumas importações, mas para isso, abra o arquivo layouts/footer.blade.php e insira o código abaixo.

<footer>
    <p>&copy; Meu site - Todos os direitos reservados</p>
</footer>

Agora abra o arquivo layouts/header.blade.php e insira o código abaixo. Note que temos alguns links apontando para as páginas que a gente criou.

<header>
    <a href="http://localhost:8000">Home</a>
    <a href="http://localhost:8000/about">Sobre</a>
    <a href="http://localhost:8000/contact">Contato</a>
</header>

Dentro de onde acharmos melhor, vamos usar a instrução @include passando o caminho da página que queremos importar para a master.blade.php. Vamos fazer isso para a header e footer.

Já para o título, dentro da tag title, vamos usar a instrução @yield('title'), assim nesse espaço será substituído pelo conteúdo existente dentro da seção title de cada página miolo.

Veja o código completo da página master.blade.php. Perceba que nela fica todas as tags de marcação do corpo html, tags de importação de css, entre outros.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>@yield('title')</title>
</head>

<body>
    @include('layouts/header')

    <section>
        @yield('body')
    </section>
    
    @include('layouts/footer')
</body>

</html>

Na linha 13 e 19 temos os includes dos pedaços das nossas páginas, enquanto na linha 9 temos a seção de título definida.

Por fim, na linha 16 informamos onde será impresso o conteúdo da seção body, assim estando dentro de uma tag section, ou seja, todas as páginas que estendem a master estarão com todo o conteúdo existente da página pai.

Conclusão

Os exemplos acima te mostra muito pouco sobre a estrutura de importação e de estender páginas, mas não se deixe enganar, o Blade é muito rico em conteúdos e dinamismo.

Resultado final dos layouts em blade no Laravel

Criamos uma página bem crua e sem muitos elementos com estilos CSS, assim você acompanhou de forma crua como é possível trabalhar com os layouts. A ideia é que cada arquivo tenha uma única responsabilidade, deixando fácil a troca das partes do site e também permitindo um reaproveitamento.

Fechamos esse artigo por aqui, espero que ele tenha sido muito útil para você.

Até a próxima ^^