为 Laravel 项目快速定制拥有 Bootstrap 风格的面包屑导航_html/css_WEB-ITnose

本文经授权转自 phphub 社区

说明

laravel-breadcrumbs 可为你的 laravel 项目快速定制拥有 bootstrap 风格的面包屑导航。

本文章由 The EST Group 成员 @Kelvin 撰写, 首发地为 PHPHub 社区.

文章的 Demo 项目

截图

运行

Demo 代码请见：

https://github.com/CycloneAxe/est-breadcrumbs-demo

立即学习“前端免费学习笔记（深入）”；

请参照此文档运行 Demo:

https://phphub.org/topics/1902

文章概览

安装; 配置 breadcrumbs; 生成配置文件; 基本使用

1. 安装

1). 使用 composer 安装:

composer require davejamesmiller/laravel-breadcrumbs

登录后复制

关于 composer require 的安装方式，请见 这篇文章。

2). 修改 config/app 文件，在 providers 数组内追加如下内容:

'providers' => [    ...    DaveJamesMiller\Breadcrumbs\ServiceProvider::class,],

登录后复制

3). 修改 config/app 文件，在 aliases 数组内追加如下内容:

'aliases' => [    ...    'Breadcrumbs' => DaveJamesMiller\Breadcrumbs\Facade::class,],

登录后复制

2. 配置 breadcrumbs

在 app/Http 文件夹内创建 breadcrumbs.php 文件,内容如下:

push('Home', route('home'));});// Home > BlogBreadcrumbs::register('blog', function($breadcrumbs){    $breadcrumbs->parent('home');    $breadcrumbs->push('Blog', route('blog'));});

登录后复制

3. 生成配置文件

扩展包默认使用 Bootstrap 3 版本, 你也可以通过修改配置信息，来兼容 Bootstrap 2.

运行此命令生成配置文件:

php artisan vendor:publish

登录后复制

接着编辑 config/breadcrumbs.php, 指定 Bootstrap 版本:

'view' => 'breadcrumbs::bootstrap3',

登录后复制

views 字段允许设置的值为:

Bootstrap 3: breadcrumbs::bootstrap3 Bootstrap 2: breadcrumbs::bootstrap2

4. 基本使用

1). 修改 app/HTTP/routes.php, 添加相对应的 Route.

注意这里新增的 Route 需要定义别名, 因为 breadcrumbs 在生成时会调用了辅助方法 route(), 而此方法是根据 Route 别名来生成对应 Url 的.

Route::get('home', [   'as' => 'home',   function () {       return view('home');   }]);Route::get('blog', [   'as' => 'blog',   function () {       return view('home');   }]);

登录后复制

2). 在需要展示 breadcrumbs 的页面中调用来渲染:

{!! Breadcrumbs::render('blog'); !!}

登录后复制

3). 最终生成的效果如下:

更多的例子请移步 官方文档 参考.

欢迎关注 LaravelTips, 一个专注于为 Laravel 开发者服务, 致力于帮助开发者更好的掌握 Laravel 框架, 提升开发效率的微信公众号.