如何在Laravel 5中使用partials复用导航栏代码？

嘿，完全懂你想摆脱重复粘贴、实现代码复用的需求！Laravel Blade模板系统正好能轻松搞定这个，下面给你三种贴合你提到的sections、components、yielding概念的方案，都能满足「改一处同步更新所有页面导航栏」的要求：

方案一：用@include引入局部视图（最直接快速） #

这种方法适合快速拆分重复代码，步骤超简单：

1. 提取导航栏到独立文件
   在resources/views目录下新建layouts文件夹（专门放通用布局视图），然后创建navbar.blade.php文件，把你的导航栏代码完整复制进去：

   <nav class="navbar navbar-inverse">
     <div class="container-fluid">
       <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#">Logo</a>
       </div>
       <div class="collapse navbar-collapse" id="myNavbar">
         <ul class="nav navbar-nav">
           <li class="active"><a href="#">Home</a></li>
           <li><a href="/about">About</a></li>
           <li><a href="/contact">Contact</a></li>
         </ul>
         <ul class="nav navbar-nav navbar-right">
           <li><a href="/control-panel"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
         </ul>
       </div>
     </div>
   </nav>
   

2. 在目标页面引入局部视图
   打开home.blade.php，删掉原来的导航栏代码，替换成：

   @include('layouts.navbar')
   

   同样给about.blade.php做一样的替换——以后你只需要修改layouts/navbar.blade.php，两个页面的导航栏就会自动同步更新！

方案二：用布局继承（贴合sections和yielding，最佳实践） #

如果后续还要添加页脚、侧边栏等通用元素，用布局继承会更优雅，正好对应你研究的sections和yield：

1. 创建主布局文件
   在resources/views/layouts下新建app.blade.php，把导航栏放进去，再加上内容占位符@yield('content')：

   <!DOCTYPE html>
   <html>
   <head>
       <title>我的Laravel站点</title>
       <!-- 这里放通用的CSS、JS引用 -->
   </head>
   <body>
       <!-- 通用导航栏 -->
       <nav class="navbar navbar-inverse">
         <div class="container-fluid">
           <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
             </button>
             <a class="navbar-brand" href="#">Logo</a>
           </div>
           <div class="collapse navbar-collapse" id="myNavbar">
             <ul class="nav navbar-nav">
               <li class="active"><a href="#">Home</a></li>
               <li><a href="/about">About</a></li>
               <li><a href="/contact">Contact</a></li>
             </ul>
             <ul class="nav navbar-nav navbar-right">
               <li><a href="/control-panel"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
             </ul>
           </div>
         </div>
       </nav>
   
       <!-- 页面专属内容占位符 -->
       <div class="container">
           @yield('content')
       </div>
   
       <!-- 可选：通用页脚 -->
       <footer style="margin-top: 20px; text-align: center;">
           <p>© 2024 我的Laravel站点</p>
       </footer>
   </body>
   </html>
   

2. 让页面继承主布局
   修改home.blade.php，删掉原有冗余结构，改成：

   @extends('layouts.app')
   
   @section('content')
       <!-- 首页专属内容 -->
       <h1>欢迎来到首页</h1>
       <p>这里是首页的自定义内容...</p>
   @endsection
   

   同样处理about.blade.php：

   @extends('layouts.app')
   
   @section('content')
       <h1>关于我们</h1>
       <p>这里是关于页面的介绍内容...</p>
   @endsection
   

   这样所有继承layouts.app的页面都会自动带上导航栏，以后修改主布局里的导航栏，所有页面都会同步更新，还能统一管理页面头部、页脚等通用元素。

方案三：用Blade组件（Laravel 5.4+支持，灵活性更高） #

如果你的Laravel版本是5.4及以上，还可以用组件封装导航栏，方便后续扩展：

1. 创建组件文件
   在resources/views/components下新建navbar.blade.php（没有components文件夹就新建），放入导航栏代码。

2. 在页面中使用组件
   在home.blade.php和about.blade.php里用以下代码引入组件：

   @component('components.navbar')
   @endcomponent
   

   要是你的版本是Laravel 5.8及以上，还可以简化成更简洁的标签式写法：

   <x-navbar/>
   

三种方案里，方案一适合快速解决当前需求，方案二更适合长期维护站点，你可以根据自己的实际情况选择～

内容的提问来源于stack exchange，提问作者Sylent