为 Laravel 项目快速定制拥有 Bootstrap 风格的面包屑导航

sunsmell 发布于2019-06-27 12:12 / 2521人阅读

摘要：本文经授权转自社区说明可为你的项目快速定制拥有风格的面包屑导航。本文章由成员撰写首发地为社区文章的项目截图运行代码请见请参照此文档运行文章概览安装配置生成配置文件基本使用安装使用安装关于的安装方式，请见这篇文章。

本文经授权转自 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" => [
    ...
    DaveJamesMillerBreadcrumbsServiceProvider::class,
],

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

"aliases" => [
    ...
    "Breadcrumbs" => DaveJamesMillerBreadcrumbsFacade::class,
],

2. 配置 breadcrumbs

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

push("Home", route("home"));
});

// Home > Blog
Breadcrumbs::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 框架, 提升开发效率的微信公众号.

专线服务混合云 html 面包屑导航页面导航面包导航 bootstrap导航菜单 Bootstrap导航条

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/21478.html

下载量最高 100 个 Laravel 扩展包推荐

摘要：本文经授权转自社区，后续更新将以帖子内容和内容为准。说明另一个令人喜欢的地方，是拥有活跃的开发者社区，而活跃的开发者社区带来的，是繁华的扩展包生态。本文对上打了标签的扩展包进行整理，截止到现在年月号，有超过个扩展包，以下是下载量最大的个。本文经授权转自 PHPHub 社区，后续更新将以 PHPHub 帖子内容和 GitHub 内容为准。说明 Laravel 另一个令人喜欢的地方...

Tychio 2019-06-27 14:13 评论0 收藏0
收集整理适用博客建站免费开源Wordpress主题-简约好看的WP主题

摘要：最重要的就是找一个适合自己的主题了。事实上，免费主题也非常多，而且很多的免费主题在功能上和界面美观上已经大大超过了付费的主题。加上这些主题都是开源的，基本上可以在上找得到源码，安全性是没有问题，主题的作者也在不断更新当中。WordPress最重要的就是找一个适合自己的主题了。好一点的WordPress主题基本上都是要收费的，而且价格还不便宜，这导致了不少的新手朋友们很为难。而有时我们仅仅根据...

番茄西红柿 2021-07-30 14:57 评论0 收藏2637
提高 JavaScript 开发效率的高级 VSCode 扩展之二！

摘要：将这些命令绑定到键盘快捷键是有帮助的，例如向上箭头用于平衡向外，而向下箭头用于平衡向内。是和的快速原型开发平台。本系列的第一篇可以在这里看到：提高 JavaScript 开发效率的高级 VSCode 扩展！ showImg(https://segmentfault.com/img/bVbnn2j?w=1254&h=768); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质...

cyrils 2019-08-23 14:48 评论0 收藏0
一些你所不知道的VS Code插件

摘要：摘要你所不知道的系列。允许你写入缩写代码并返回的相应标记，目前已经内置，所以不用配置了。自从年双十一正式上线，累计处理了亿错误事件，付费客户有金山软件百姓网等众多品牌企业。摘要：你所不知道的系列。原文：提高 JavaScript 开发效率的高级 VSCode 扩展之二！作者：前端小智 Fundebug经授权转载，版权归原作者所有。作为一名业余爱好者、专业人员，甚至是每月只有一次编...

Near_Li 2019-05-22 12:00 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0