Principais conclusões
- Os layouts Blade permitem-te reutilizar um modelo principal em várias páginas.
- Utiliza @extends, @section e @yield para gerir o conteúdo da página de forma limpa.
- O @include ajuda-te a dividir os layouts em componentes reutilizáveis.
- Transfere dados dinâmicos para visualizações de conteúdo personalizado.
- Um layout Blade estruturado mantém a tua aplicação Laravel escalável e organizada.
Os layouts são frequentemente o ponto de partida de muitos projectos de desenvolvimento Web.
Se és novo no Laravel, o Blade é a forma mais fácil de criar e gerir o layout HTML do teu site para produzir designs e temas elegantes. Em vez de escrever o mesmo código (como cabeçalhos e rodapés) em todas as páginas, o Blade ajuda-te a reutilizá-los – poupando tempo e mantendo as coisas organizadas.
Neste guia, abordaremos:
- Criar uma apresentação principal (para evitar a repetição de código)
- Separa as páginas em componentes (cabeçalhos, rodapés, etc.)
- Estender layouts em diferentes visualizações
- Renderização de vistas com percursos básicos
No final, saberás como estruturar o frontend de uma aplicação Laravel utilizando o Blade. Isto é ideal para iniciantes em Laravel que querem entender como as páginas web do mundo real são estruturadas em Laravel.
Vamos começar…
- Como é a estrutura básica de um modelo de lâmina
- Pré-requisitos
- Passo 1: Configura as tuas rotas
- Passo 2: Cria a estrutura do diretório de visualizações
- Etapa 3: Criar lâmina Inclui
- Passo 4: Cria o ficheiro da estrutura principal
- Passo 5: Cria as páginas inicial e de contacto
- Passo 6: Ver as tuas páginas no browser
- Conclusão
Como é a estrutura básica de um modelo de lâmina
Pensa nos modelos Blade como uma construção com blocos Lego. Começas com uma placa de base (o teu ficheiro de esquema) que mantém tudo junto e, em seguida, adicionas peças diferentes (as tuas vistas) por cima.
A Fundação (layout.blade.php):
<!DOCTYPE html>
<html>
<cabeça>
<título>@yield('título_da_página', 'Título por defeito')</title>
<!-- Ficheiros CSS/JS comuns vão aqui -->
</head>
<corpo>
<cabeçalho>@yield('header_content')</header>
<principal>
@yield('conteúdo_principal')
</main>
<rodapé>@yield('footer_content', 'Texto de rodapé predefinido')</footer>
</body>
</html>
Peças-chave:
- @yield() – Estes são marcadores de posição à espera de serem preenchidos
- Conteúdo predefinido (opcional) – Apresentado se não for fornecida uma secção
- Elementos comuns – Como ficheiros CSS/JS utilizados em todas as páginas
Pré-requisitos
Antes de começarmos, certifica-te de que tens o PHP 8.2+ e o Composer instalados:
1. Instala o projeto Laravel
Se ainda não o fizeste, podes criar um novo projeto Laravel executando:
compositor criar projeto laravel/laravel laravel-blade-layouts
Em seguida, navega para o teu diretório de projeto:
cd laravel-blade-layouts
2. Inicia o Servidor de Desenvolvimento Local
Quando o teu projeto estiver configurado, podes iniciar o servidor de desenvolvimento integrado do Laravel:
php artisan serve
Visita
http://127.0.0.1:8000
no teu browser. Deves ver o ecrã de boas-vindas do Laravel.
Passo 1: Configura as tuas rotas
Vamos definir as páginas que queremos criar: uma página inicial e uma página de contacto. Por padrão, o Laravel provavelmente tem uma rota padrão como esta:
Route::get('/', function () {
retorna view('welcome');
});
Vamos mudar isso.
Abre o ficheiro routes/web.php e substitui o seu conteúdo pelo seguinte:
<?php
usa Iluminate\Support\Facades\Route;
Route::get('/', function () {
retorna view('pages.home');
});
Route::get('/contacto', function () {
retorna view('pages.contact');
});
Essas rotas dizem ao Laravel para carregar resources/views/pages/home.blade.php quando alguém visita a página inicial (/) e resources/views/pages/contact.blade.php quando eles vão para /contact.
Mas antes de funcionarem, temos de criar essas vistas e o layout que vão utilizar.
Passo 2: Cria a estrutura do diretório de visualizações
Certifica-te de que as nossas opiniões estão organizadas de uma forma que faça sentido.
Dentro do diretório resources/views/, vamos criar três pastas:
- layouts → aqui guardas o nosso modelo principal
- includes → armazena partes reutilizáveis como cabeçalho, rodapé e metatags
- pages → guarda cada página individual, como a página inicial e a página de contactos
Por isso, vai a resources/views/ e cria estas três pastas:
Agora vamos começar a preencher estas pastas com os ficheiros de que precisamos.
Etapa 3: Cria a lâmina Inclui
O Blade inclui ajuda a dividir o teu layout em peças reutilizáveis. Isto é muito útil porque mantém o teu código limpo e DRY (Don’t Repeat Yourself – Não te repitas). Pensa nisto como construir com Legos – estes são os blocos.
Vamos criar uma secção de cabeçalho, uma barra de cabeçalho e um rodapé.
A) Cria a secção <head>
Isto incluirá metadados, um título e uma ligação CSS. Em resources/views/includes, cria um ficheiro chamado head.blade.php e cola isto:
<título>Layout do Laravel Blade</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<estilo>
corpo {
família de letra: sans-serif;
margem: 0;
acolchoamento: 0;
}
cabeçalho, rodapé {
Cor de fundo: #f4f4f4;
padding: 1em;
Alinha o texto: centro;
}
principal {
padding: 2em;
}
</style>
Este é o código padrão que vai na secção <head> de cada página Web. Faz coisas importantes como:
- Define a codificação de caracteres da página (para que as letras sejam apresentadas corretamente)
- Faz com que a página fique bem em telefones e computadores
- Adiciona um título que aparece no separador do browser
- Opcionalmente, adiciona CSS Bootstrap para estilizar
B) Cria o cabeçalho (barra de navegação)
Agora, na mesma pasta
<h2>Cabeçalho do meu sítio</h2> <navega> <a href="/">Casa</a> | <a href="/contacto">Contacto</a> </nav>
Agora temos uma barra de navegação Bootstrap simples que liga às nossas páginas Home e Contacto.
C) Cria o rodapé
Ainda em i ncludes/, cria footer.blade.php e cola o código mencionado abaixo:
<p>© 2025 Laravel Blade Example</p>
Passo 4: Cria o ficheiro da estrutura principal
Agora vamos juntar esses includes num ficheiro de layout principal. Pensa neste ficheiro como o esqueleto de cada página – uma estrutura comum que não queremos repetir.
Na pasta layouts/, cria um ficheiro chamado default.blade.php:
<!DOCTYPE html>
<html>
<cabeça>
@include('includes.head')
</head>
<corpo>
<cabeçalho>
@include('includes.header')
</header>
<principal>
@yield('content')
</main>
<rodapé>
@include('includes.footer')
</footer>
</body>
</html>
Deixa-me explicar:
- @include() é a forma como puxamos ficheiros parciais como o cabeçalho, o rodapé e a secção head.
- @yield(‘content’) é um marcador de posição. Cada página individual injectará o seu conteúdo único aqui utilizando @section(‘content’).
Agora vamos criar algumas páginas que utilizem este esquema.
Passo 5: Cria as páginas inicial e de contacto
Na pasta pages/, cria home.blade.php:
@extende('layouts.default')
@secção('conteúdo')
<h1>Bem-vindo à página inicial</h1>
<p>Este conteúdo é exclusivo da página inicial.</p>
@secção final
E agora cria contact.blade.php:
@extende('layouts.default')
@secção('conteúdo')
<h1>Esta é a página de contacto</h1>
Pára
Repara como ambas as páginas usam @extends(‘layouts.default’)? É assim que o Blade sabe que deve usar o layout que criámos.
Depois, o conteúdo dentro de @section(‘content’) é o que é inserido no espaço reservado @yield(‘content’) no layout.
Passo 6: Ver as tuas páginas no browser
Agora volta ao teu browser e actualiza a página inicial. Certifica-te de que o teu servidor de desenvolvimento está a funcionar:
php artisan serve
Então:
- Visita http://127.0.0.1:8000/ → Deves ver a tua página inicial personalizada com o cabeçalho e o rodapé.
- Visita http://127.0.0.1:8000/contact → Verás a página de contacto, novamente envolvida no mesmo esquema.
Técnicas avançadas de disposição de lâminas
Depois de teres o layout básico pronto e a funcionar, deves estar a pensar: “Ok, isto é porreiro… mas como é que o faço parecer um site real com conteúdo real?”
Boa pergunta.
Vamos agora explorar a passagem de dados dinâmicos para visualizações Blade (porque os sites reais não se limitam a ecoar “Bem-vindo à página inicial” para sempre)
Estás pronto para levar os teus projectos Laravel para o terreno?
Configura os layouts Blade e prepara a tua aplicação Laravel para um alojamento de elevado desempenho.
Passa dados para as tuas vistas Blade
Não queres que os teus modelos apresentem sempre o mesmo texto. Talvez queiras cumprimentar um utilizador pelo nome, mostrar a data de hoje ou carregar dados de uma base de dados. É aí que entram os dados de visualização.
Digamos que queres personalizar a página inicial com um nome.
Abre o ficheiro routes/web.php e actualiza a rota da página inicial da seguinte forma:
// routes/web.php
Route::get('/', function () {
retorna view('pages.home', ['name' => Abdul Rehman"]);
});
Agora actualiza o home.blade.php para utilizar esses dados:
@extende('layouts.default')
@secção('conteúdo')
<h1>Bem-vindo, {{nome}}!</h1>
<p>Este conteúdo é exclusivo da página inicial.</p>
@secção final
Actualiza a página no teu browser e boom – verás:
Bem-vindo, Abdul Rehman!
Isto é útil quando queres personalizar a experiência do utilizador ou preencher páginas com dados reais.
Queres testar isto ainda mais?
Tenta mudar Abdul Rehman para “Zara” ou “David” e actualiza a página novamente. Isto prova que a tua vista está a responder a uma entrada dinâmica.
Porque é que isto é importante:
A passagem de dados para as vistas é a base para dar vida à tua aplicação. Embora este exemplo tenha sido codificado, a mesma técnica funciona quando extrais dados de uma base de dados ou API mais tarde.
Conclusão
Com isso, encerramos nosso guia sobre como usar o Laravel Blade para criar layouts limpos e reutilizáveis. O Laravel Blade permite-te separar a estrutura do teu site do seu conteúdo, facilitando a gestão de cabeçalhos, rodapés e outros elementos partilhados sem te repetires em todas as páginas.
Eis o que analisámos neste blogue:
- Começámos com o básico: criar um layout principal utilizando @yield, dividir a página em includes como o cabeçalho, o rodapé e o cabeçalho, e estender layouts em vistas individuais com @extends e @section.
- Na parte avançada, explorámos como passar dados dinâmicos para visualizações Blade, tornando as tuas páginas mais personalizadas e preparadas para o mundo real.
Com esses fundamentos, agora tens um ponto de partida sólido para estruturar o código de front-end do Laravel da maneira certa.
Perguntas frequentes
Q) O que é um Blade em Laravel?
A) Blade é o mecanismo de modelos do Laravel que ajuda a separar o código PHP do HTML, tornando as visualizações dinâmicas e reutilizáveis. Simplifica a herança de modelos e a reutilização de componentes.
Q) Qual é o objetivo da utilização de layouts Blade em Laravel?
A) Os layouts Blade estruturam as tuas vistas Laravel, separando o conteúdo do design, garantindo a reutilização do código e uma manutenção fácil.
Q) Existem layouts de Blade predefinidos no Laravel?
A) Sim, o Laravel inclui um layout padrão, app.blade.phpem resources/views/layouts/e podes criar modelos personalizados para uma melhor organização do projeto.
P) Como é que defino e incluo secções reutilizáveis numa apresentação Blade?
A) Utiliza @yield para definir secções e @include para inserir componentes reutilizáveis nos modelos Blade, tornando-os modulares e fáceis de manter.
Q) Posso estender vários layouts Blade em Laravel?
A) Não, só podes estender um layout Blade utilizando @extendsmas podes incluir vários modelos utilizando @include para componentes reutilizáveis.
Q) Como é que eu crio um ficheiro Blade no Laravel?
A) Para criar um modelo Blade, adiciona um ficheiro .blade.php dentro de resources/views/ e estrutura seu conteúdo dinâmico usando as diretivas do Blade.
Q) O que é a diretiva @yield no Laravel?
A) O @yield define secções num layout Blade que as vistas secundárias podem preencher, permitindo a injeção flexível de conteúdo em modelos.
Q) Como posso criar uma diretiva Blade personalizada em Laravel?
A) Regista uma diretiva personalizada em AppServiceProvider usando Blade::directive()e depois utiliza-a nas vistas para uma lógica de código mais limpa e reutilizável.
Q) Como é que crio um layout Laravel 9 Blade?
A) Instala o Laravel, configura um controlador, define rotas, cria um layouts adicione partials, estruture seus arquivos Blade e use @extends e @section para gerenciar o conteúdo.
Abdul Rehman
O Abdul é um profissional de marketing experiente em tecnologia, movido a café e criativo, que adora manter-se a par das últimas actualizações de software e gadgets tecnológicos. É também um escritor técnico competente que consegue explicar conceitos complexos de forma simples para um público alargado. Abdul gosta de partilhar os seus conhecimentos sobre a indústria da nuvem através de manuais de utilizador, documentação e publicações em blogues.
