close

Construindo Layouts com Laravel- Criando Interfaces Flexíveis e Sustentáveis

Em Laravel, o layout desempenha um papel significativo na construção da interface do usuário para um aplicativo da web. Um layout representa a estrutura geral de uma página da Web, incluindo seções comuns como header, footer  e sidebar. Neste artigo, exploraremos como criar layouts Laravel para criar interfaces flexíveis e sustentáveis.

Primeiramente, vamos criar um layout básico para nosso site. Comece criando um arquivo nomeado app.blade.php no diretório. Este arquivo servirá como o layout principal de todo o site. resources/views/layouts

Aqui está um exemplo de conteúdo para o app.blade.php arquivo:

<!DOCTYPE html>  
<html>  
<head>  
    <title>@yield('title')</title>  
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">  
</head>  
<body>  
    <header>  
        <h1>Header</h1>  
    </header>  
  
    <nav>  
        <ul>  
            <li><a href="/">Home</a></li>  
            <li><a href="/about">About</a></li>  
            <li><a href="/contact">Contact</a></li>  
        </ul>  
    </nav>  
  
    <main>  
        @yield('content')  
    </main>  
  
    <footer>  
        <p>Footer</p>  
    </footer>  
  
    <script src="{{ asset('js/app.js') }}"></script>  
</body>  
</html>

Neste layout, usamos as @yield diretivas para definir seções dinâmicas dentro do layout. Por exemplo, @yield('title') permite que a criança substitua e defina o título da página. Da mesma forma, permite que a criança insira o conteúdo principal da página. views @yield('content') views

Depois que o layout é criado, podemos criar filhos que utilizam esse layout. Por exemplo, para criar uma página com layout semelhante, crie um arquivo nomeado no diretório. Este arquivo estenderá o  layout e definirá o conteúdo específico da página: views about about.blade.php resources/views app.blade.php about 

@extends('layouts.app')  
  
@section('title', 'About')  
  
@section('content')  
    <h2>About Page</h2>  
    <p>This is the about us page.</p>  
@endsection

No exemplo acima, usamos a @extends diretiva para herdar o app.blade.php  layout. Em seguida, usamos a @section diretiva para definir o conteúdo específico para as seções title  e content  da página.

Por fim, precisamos definir as rotas para vincular as URLs aos respectivos arquivos. views

Por exemplo, no routes/web.php  arquivo, você pode adicionar as seguintes rotas:

Route::get('/', function() {  
    return view('welcome');  
});  
  
Route::get('/about', function() {  
    return view('about');  
});

Neste exemplo, o URL "/" está vinculado ao welcome.blade.php view, enquanto o /about URL está vinculado ao about.blade.php view.

Concluindo, criar layouts Laravel permite que você crie uma interface compartilhada para seu aplicativo da web e gerencie seções comuns como header, footer e sidebar. Usando layouts e filhos, você pode construir interfaces flexíveis e sustentáveis ​​em. views Laravel