En Laravel, el diseño juega un papel importante en la construcción de la interfaz de usuario para una aplicación web. Un diseño representa la estructura general de una página web, incluidas las secciones comunes como header, footer y sidebar. En este artículo, exploraremos cómo incorporar diseños Laravel para crear interfaces flexibles y mantenibles.
En primer lugar, vamos a crear un diseño básico para nuestro sitio web. Comience creando un archivo con el nombre app.blade.php en el directorio. Este archivo servirá como diseño principal para todo el sitio web. resources/views/layouts
Aquí hay un contenido de ejemplo para el app.blade.php archivo:
<!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>
En este diseño, usamos las @yield directivas para definir secciones dinámicas dentro del diseño. Por ejemplo, @yield('title') permite que el niño anule y establezca el título de la página. Del mismo modo, permite al niño insertar el contenido principal de la página. views @yield('content') views
Una vez que se crea el diseño, podemos crear elementos secundarios que utilicen este diseño. Por ejemplo, para crear una página con un diseño similar, cree un archivo con el nombre en el directorio. Este archivo ampliará el diseño y definirá contenido específico para la 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
En el ejemplo anterior, usamos la @extends directiva para heredar el app.blade.php diseño. A continuación, usamos la @section directiva para definir el contenido específico de las secciones title y content de la página.
Finalmente, necesitamos definir las rutas para vincular las URL a los respectivos. views
Por ejemplo, en el routes/web.php archivo, puede agregar las siguientes rutas:
Route::get('/', function() {
return view('welcome');
});
Route::get('/about', function() {
return view('about');
});
En este ejemplo, la URL "/" está vinculada a welcome.blade.php view, mientras que la /about URL está vinculada a about.blade.php view.
En conclusión, crear diseños en Laravel le permite crear una interfaz compartida para su aplicación web y administrar secciones comunes como header, footer y sidebar. Mediante el uso de diseños y elementos secundarios, puede crear interfaces flexibles y mantenibles en. views Laravel