在路由 laravel 的基础上设置 nav 链接激活

📌 相关文章

📜 在路由 laravel 的基础上设置 nav 链接激活 - PHP (1)

📅 最后修改于: 2023-12-03 15:23:37.891000 🧑 作者: Mango

在 Laravel 中，我们经常需要为页面添加导航栏（nav）链接，这些链接指向不同的页面和路由。为了能够在导航栏中指示当前页面，我们需要设置激活链接样式。

在本文中，我们将学习如何在路由 Laravel 的基础上设置 nav 链接激活，以实现页面导航栏的美观和友好性。

步骤 1：安装依赖

Laravel 依赖于 Blade 模板引擎来管理视图层。我们需要在 Laravel 项目中安装 laravelcollective/html，该包提供了有用的 Blade 模板指令和表单构建工具。

composer require "laravelcollective/html"

步骤 2：创建路由

我们需要创建一些路由以供导航栏使用。这些路由通常对应于我们项目中的不同页面。例如，以下是路由示例：

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

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

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

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

步骤 3：创建导航栏

我们可以使用 Laravel Blade 模板引擎创建导航栏（nav）链接。以下是一个简单的示例：

<nav>
    <ul>
        <li><a href="/" class="{{ Request::path() === '/' ? 'active' : '' }}">Home</a></li>
        <li><a href="/about" class="{{ Request::path() === 'about' ? 'active' : '' }}">About</a></li>
        <li><a href="/contact" class="{{ Request::path() === 'contact' ? 'active' : '' }}">Contact</a></li>
    </ul>
</nav>

在上面的示例中，我们使用 Request::path() 方法获取当前 URL 的路径，并与每个导航链接的路径进行比较。如果它们匹配，则为该链接添加 active 类。在 CSS 样式表中，我们可以设置 .active 类以突出显示当前选定的链接。

步骤 4：在视图中使用导航栏

我们可以使用 Laravel Blade 模板引擎将导航栏包含在视图中。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>
    <style>
        .active {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <header>
        @include('nav')
    </header>

    <main>
        @yield('content')
    </main>
</body>
</html>

在上面的示例中，我们包含了刚刚创建的 nav 导航栏，并在 main 中使用 yield 指令替换视图内容。

步骤 5：设置页面标题和内容

我们可以使用 Laravel Blade 模板引擎设置页面标题和内容。以下是一个简单的示例：

@extends('layout')

@section('title', 'Home')

@section('content')
    <h1>Welcome to my website</h1>
@endsection

在上面的示例中，我们使用 @extends 指令继承了父视图（即 layout），并使用 @section 指令设置页面标题和内容。使用 @endsection 指令结束一个部分的定义。

结论

在本文中，我们学习了如何在路由 Laravel 的基础上设置 nav 链接激活。我们创建了一些路由，为路由创建了导航栏，使用了 Blade 模板引擎渲染视图，并添加了页面标题和内容。现在您可以轻松地为您的 Laravel 项目创建漂亮的页面导航栏。