25. Agregar navegabilidad a nuestro sitio web


2 comentarios

Inicia sesión para comentar

Comentarios:

  • Marco Cordero

    Marco Cordero hace 1 año

    Hola Victor. Por que si la carpeta partials esta dentro views igual que la carpeta layouts hay que volver a escribir la ruta completa layouts.partials.header? Es por algo en particular o porque es simplemente como lo pide Laravel?. 

    • Victor Arana Flores hace 1 año

      Hola Marco. el @include busca el archivo desde la carpeta views. Desde ahi tienes que indicarle la ruta.

      Recuerda que cuando digitas alguna url, no estas buscando un archivo PHP y abriendolo, sino que siempre se carga el archivo public/index.php y sobre este se carga todo el contenido. Es por eso importante darle siempre las rutas absolutas, y no relativas.

  • Walter

    Walter hace 2 años

    ? Agregamos el menú de navegación

     

          Le damos un nombre a la ruta '/' en web.php:

    Route::get('/', HomeController::class)->name('home');

     

          En la vista resources\views\layouts\plantilla.blade.php agregamos:

    <header>
    	<h1>Coders Free</h1>
    	<nav>
    		<ul>
    			<li><a href="{{ route('home') }}">Home</a></li>
    			<li><a href="{{ route('cursos.index') }}">Cursos</a></li>
    			<li><a href="{{ route('nosotros') }}">Nosotros</a></li>
    		</ul>
    	</nav>
    </header>

     

          Creamos la ruta de tipo view para nuestro contenido estático de Nosotros:

    Route::view('nosotros', 'nosotros')->name('nosotros');

     

          Creamos la vista nosotros.blade.php en resources\views:

    @extends('layouts.plantilla')
    @section('title', 'Nosotros')
    @section('content')
    	<h1>Acerca de nosotros</h1>
    @endsection

     

    ? Activando los links

          Identificamos la ruta en donde nos encontramos con:

    @dump(request()->routeIs('home'))

          Entonces agregamos el atributo class a los enlaces:

    <a 
    	href="{{ route('home')  }}" 
    	class="{{ request()->routeIs('home') ? 'active' : '' }}"
    >Home</a>

          Definimos el estilo para active en el header:

    <style>
    .active {
    	color: red;
    	font-weight: bold; 
    }
    </style>

          Para el caso de los enlaces de cursos usamos un asterisco:

    class="{{ request()->routeIs('cursos.*') ? 'active' : '' }}"

     

    ? Modularizando nuestra plantilla

          Movemos el <header> que hemos creado a un nuevo archivo de vista en:

          resources\views\layouts\partials\ llamado header.blade.php

          En su lugar, en el archivo plantilla, ponemos:

    @include('layouts.partials.header')

          También podemos crear una vista footer en partials para luego incluirla de la misma forma: 

    @include('layouts.partials.footer')