Un exemple pour expliquer comment implémenter un effet de barre de navigation dans Laravel

Laravel est un framework PHP très populaire, dans lequel l'implémentation de barres de navigation est une fonction indispensable à l'implémentation d'applications web. A travers cet article, je vais vous présenter comment implémenter la barre de navigation dans Laravel.

1. Installer et configurer Laravel
Avant de commencer à utiliser Laravel pour implémenter la barre de navigation, vous devez terminer l'installation et la configuration de Laravel. Je n'entrerai pas dans les détails ici, mais les utilisateurs qui ont besoin d'apprendre peuvent consulter la documentation officielle.

2. Création de la barre de navigation
Dans Laravel, nous pouvons implémenter la barre de navigation via des composants personnalisés. Les composants sont du code View réutilisable qui peut être utilisé plusieurs fois. Voyons comment créer un composant personnalisé !

1. Créez une vue de composant personnalisée
Tout d'abord, créez le fichier navbar.blade.php de la vue du composant de navigation dans resources/views/components. Dans le fichier, nous ajouterons un balisage HTML de base pour la barre de navigation et ajouterons le contenu qui doit être affiché.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Laravel</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Dans ce fichier, nous avons ajouté une balise NAV, défini le style, la classe de style et les liens de navigation afin que nous puissions facilement afficher la barre de navigation sur le site Web.

2. Enregistrez le composant personnalisé
Créons maintenant une classe PHP nommée Navbar.php dans le dossier resources/views/components. Cette classe a une méthode create, qui est utilisée pour exprimer : construire des composants à partir de la vue, et en même temps, les données privées et la configuration peuvent y être transmises.

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Navbar extends Component
{
    public function __construct()
    {
        //
    }

    public function render()
    {
        return view(&#39;components.navbar&#39;);
    }
}

La vue du composant a été définie. Vous devez maintenant enregistrer le composant dans Laravel afin que Laravel sache comment identifier le composant.

Ouvrez le fichier app/Providers/AppServiceProvider.php et utilisez le compositeur de vues dans la méthode de démarrage pour enregistrer le composant :

use Illuminate\Support\Facades\Blade;
use App\View\Components\Navbar;

public function boot()
{
    Blade::component('navbar', Navbar::class);
}

Maintenant que nous avons un composant nommé "navbar" dans notre application, vous pouvez l'utiliser comme un marqueur dans n’importe quelle vue.

3. Ajouter la barre de navigation à la vue
Maintenant que le composant a été défini, nous devons l'ajouter à la vue. Ouvrez le fichier app/resources/views/layouts/app.blade.php et ajoutez le code suivant :

<x-navbar />
<div class="container py-4">
  @yield('content')
</div>

Le composant navbar est inclus dans l'en-tête de la page. Cette ligne de code ajoutée dans la section HEAD demande à Laravel d'insérer ce composant. dans la page.

4. Barre de navigation dans la vue
Enfin, nous ajoutons quelques itinéraires dans le fichier routes/web.php pour créer un site Web simple et y ajoutons une barre de navigation. Le code spécifique est le suivant

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

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

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

Le code à barres de navigation complet est le suivant :

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Laravel</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="/">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Après avoir implémenté avec succès la barre de navigation, nous pouvons la voir en haut de chaque page du site Web, rendant la navigation du site Web plus avancée et la logique plus claire.

Résumé
Avec l'implémentation des composants personnalisés ci-dessus, il est facile de créer une barre de navigation dans Laravel pour rendre le site Web plus lisible et accessible. Même si vous débutez dans le développement de Laravel, vous pouvez facilement implémenter vous-même une barre de navigation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!