Satu contoh menerangkan cara melaksanakan kesan bar navigasi dalam laravel

Laravel ialah rangka kerja PHP yang sangat popular, di mana melaksanakan bar navigasi merupakan fungsi yang sangat diperlukan untuk melaksanakan aplikasi web. Melalui artikel ini, saya akan memperkenalkan anda cara melaksanakan bar navigasi dalam Laravel.

1. Pasang dan konfigurasikan Laravel
Sebelum anda mula menggunakan Laravel untuk melaksanakan bar navigasi, anda perlu melengkapkan pemasangan dan konfigurasi Laravel. Saya tidak akan menerangkan terlalu banyak butiran di sini, tetapi pengguna yang perlu belajar boleh menyemak dokumentasi rasmi.

2. Penciptaan bar navigasi
Dalam Laravel, kami boleh melaksanakan bar navigasi melalui komponen tersuai. Komponen boleh digunakan semula Lihat kod yang boleh digunakan beberapa kali. Mari lihat cara membuat komponen tersuai!

1. Cipta paparan komponen tersuai
Mula-mula, cipta fail navbar.blade.php paparan komponen navigasi dalam sumber/pandangan/komponen. Dalam fail, kami akan menambah beberapa penanda HTML asas untuk bar navigasi dan menambah kandungan yang perlu dipaparkan.

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

Dalam fail ini, kami menambah teg NAV, menetapkan gaya, kelas gaya dan pautan navigasi supaya kami boleh memaparkan bar navigasi dalam tapak web dengan mudah.

2. Daftar komponen tersuai
Sekarang mari kita cipta kelas PHP bernama Navbar.php dalam folder sumber/pandangan/komponen. Kelas ini mempunyai kaedah cipta, yang digunakan untuk menyatakan: bina komponen dari paparan, dan pada masa yang sama, data dan konfigurasi peribadi boleh dihantar ke sana.

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

Pandangan komponen telah ditakrifkan Sekarang anda perlu mendaftarkan komponen ke dalam laravel supaya Laravel tahu cara mengenal pasti komponen tersebut.

Buka fail app/Providers/AppServiceProvider.php dan gunakan penggubah paparan dalam kaedah but untuk mendaftarkan komponen:

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

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

Sekarang kami mempunyainya dalam aplikasi kami Komponen yang dipanggil " navbar" yang boleh kita gunakan sebagai penanda dalam sebarang paparan.

3. Tambahkan bar navigasi pada paparan
Sekarang komponen telah ditakrifkan, kita perlu menambahkannya pada paparan. Buka fail app/resources/views/layouts/app.blade.php dan tambahkan kod berikut:

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

Komponen bar navigasi disertakan dalam pengepala halaman ini ditambah dalam bahagian HEAD mengarahkan Laravel Masukkan komponen ini ke dalam halaman.

4. Bar navigasi dalam paparan
Akhir sekali, kami menambah beberapa laluan dalam fail route/web.php untuk membina tapak web mudah dan menambah bar navigasi padanya. Kod khusus adalah seperti berikut

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

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

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

Kod bar navigasi lengkap adalah seperti berikut:

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

Selepas berjaya melaksanakan bar navigasi, kita boleh melihatnya di bahagian atas setiap halaman laman web, Jadikan navigasi tapak web lebih maju dan logiknya lebih jelas.

Ringkasan
Dengan pelaksanaan komponen tersuai di atas, adalah mudah untuk mencipta bar navigasi dalam Laravel untuk menjadikan tapak web lebih mudah dibaca dan diakses. Walaupun anda seorang pemula dalam membangunkan Laravel, anda boleh dengan mudah melaksanakan bar navigasi anda sendiri.

Atas ialah kandungan terperinci Satu contoh menerangkan cara melaksanakan kesan bar navigasi dalam laravel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!