Ein Beispiel erklärt, wie man einen Navigationsleisteneffekt in Laravel implementiert

Laravel ist ein sehr beliebtes PHP-Framework, bei dem die Implementierung von Navigationsleisten eine unverzichtbare Funktion für die Implementierung von Webanwendungen ist. In diesem Artikel werde ich Ihnen zeigen, wie Sie die Navigationsleiste in Laravel implementieren.

1. Installieren und konfigurieren Sie Laravel
Bevor Sie Laravel zum Implementieren der Navigationsleiste verwenden, müssen Sie die Installation und Konfiguration von Laravel abschließen. Ich werde hier nicht zu sehr ins Detail gehen, aber Benutzer, die etwas lernen müssen, können sich die offizielle Dokumentation ansehen.

2. Erstellung der Navigationsleiste
In Laravel können wir die Navigationsleiste durch benutzerdefinierte Komponenten implementieren. Komponenten sind wiederverwendbar. Zeigen Sie Code an, der mehrfach verwendet werden kann. Schauen wir uns an, wie man eine benutzerdefinierte Komponente erstellt!

1. Erstellen Sie eine benutzerdefinierte Komponentenansicht.
Erstellen Sie zunächst die Datei navbar.blade.php für die Navigationskomponentenansicht in resources/views/components. In der Datei fügen wir einige grundlegende HTML-Markups für die Navigationsleiste hinzu und fügen den Inhalt hinzu, der angezeigt werden muss.

<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>

In dieser Datei haben wir ein NAV-Tag hinzugefügt, den Stil, die Stilklasse und die Navigationslinks festgelegt, damit wir die Navigationsleiste problemlos auf der Website anzeigen können.

2. Benutzerdefinierte Komponente registrieren
Lassen Sie uns nun eine PHP-Klasse mit dem Namen Navbar.php im Ordner resources/views/components erstellen. Diese Klasse verfügt über eine Erstellungsmethode, mit der Folgendes ausgedrückt wird: Komponenten aus der Ansicht erstellen, und gleichzeitig können private Daten und Konfigurationen dorthin übergeben werden.

<?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;);
    }
}

Die Ansicht der Komponente wurde definiert. Jetzt müssen Sie die Komponente in Laravel registrieren, damit Laravel weiß, wie die Komponente identifiziert werden kann.

Öffnen Sie die Datei app/Providers/AppServiceProvider.php und verwenden Sie den View Compositor in der Boot-Methode, um die Komponente zu registrieren:

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

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

Da wir nun eine Komponente mit dem Namen „navbar“ in unserer Anwendung haben, können Sie sie als verwenden Markierung in jeder Ansicht.

3. Fügen Sie der Ansicht die Navigationsleiste hinzu
Da die Komponente nun definiert wurde, müssen wir sie der Ansicht hinzufügen. Öffnen Sie die Datei app/resources/views/layouts/app.blade.php und fügen Sie den folgenden Code hinzu:

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

Die Navbar-Komponente ist im Seitenkopf enthalten. Diese im HEAD-Abschnitt hinzugefügte Codezeile weist Laravel an, diese Komponente einzufügen in die Seite.

4. Navigationsleiste in der Ansicht
Zuletzt fügen wir einige Routen in die Datei „routes/web.php“ ein, um eine einfache Website zu erstellen und ihr eine Navigationsleiste hinzuzufügen. Der spezifische Code lautet wie folgt

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

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

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

Der vollständige Navigations-Barcode lautet wie folgt:

<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>

Nach erfolgreicher Implementierung der Navigationsleiste können wir sie oben auf jeder Seite der Website sehen, wodurch die Navigation der Website erweitert wird und die Logik klarer.

Zusammenfassung
Mit der Implementierung der oben genannten benutzerdefinierten Komponenten ist es einfach, eine Navigationsleiste in Laravel zu erstellen, um die Website lesbarer und zugänglicher zu machen. Selbst wenn Sie ein Anfänger in der Entwicklung von Laravel sind, können Sie eine Navigationsleiste problemlos selbst implementieren.

Das obige ist der detaillierte Inhalt vonEin Beispiel erklärt, wie man einen Navigationsleisteneffekt in Laravel implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!