はじめに

davejamesmiller/laravel-breadcrumbs を使って、Laravel でパンくずリストを作成する方法を調べた。

TL;DR

  • composer require davejamesmiller/laravel-breadcrumbs でインストール
  • routes/breadcrumbs.php でパンくずリストの定義
    • リスト名、親階層、表示内容とリンク先 を指定
  • Breadcrumbs::render('list_name') でパンくずリストの描画
    • @section, @yield と組み合わせると便利
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. セットアップ
    2. パンくずリストの定義
    3. 独自パンくずリスト
    4. レイアウトファイルで利用
    5. Tips
      1. 自動選択
      2. Implicit binding
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ grep -i pretty /etc/os-release
PRETTY_NAME="Ubuntu 16.04.3 LTS"

$ php -v
PHP 7.2.22-1+ubuntu16.04.1+deb.sury.org+1 (cli) (built: Sep  2 2019 12:54:12) ( NTS )

$ composer -V
Composer version 1.9.0 2019-08-02 20:55:32

$ composer info laravel/framework
name     : laravel/framework
versions : * v5.7.28

composer info davejamesmiller/laravel-breadcrumbs
name     : davejamesmiller/laravel-breadcrumbs
versions : * 5.3.2

詳細

セットアップ

composer でインストール
※1. Install Laravel Breadcrumbs

1
$ composer require davejamesmiller/laravel-breadcrumbs

artisan でコンフィグファイル生成。デフォルトで Bootstrap 4 のパンくずリスト のスタイルに合うものが利用されているので、変更の必要がなければスキップ可。
※3. Choose a template

1
$ php artisan vendor:publish --tag=breadcrumbs-config

config/breadcrumbs.php が生成されるので、独自のパンくずリストを使用する場合は view を変更。
'partials.breadcrumbs' にすると resources/views/partials/breadcrumbs.blade.php が使われる。
※Update the config

1
2
-   'view' => 'breadcrumbs::bootstrap4',
+   'view' => 'partials.breadcrumbs',

パンくずリストの定義

routes/breadcrumbs.php でパンくずリストを定義する。

定義方法は「リスト名」「親階層」「表示内容とリンク先」をセットで指定。
※2. Define your breadcrumbs

1
2
3
4
5
6
7
8
// routes/breadcrumbs.php
Breadcrumbs::for('list name', function ($trail) {
    $trail->push('displayed name', route('breadcrumbs'));
});

// view ファイル
{{ Breadcrumbs::render('list name') }}
// =>「displayed name」のパンくずリストが表示される

↑の定義を行うと、view ファイルにて Breadcrumbs::render('list name') でパンくずリストを表示できる。

リストの名前は displayed name となり、リンク先は route('breadcrumbs') となる。なお、リンクは下層ページでのみ有効となる。

下層を定義(階層を追加)するには $trail->parent('parent list name') を利用する。

1
2
3
4
5
6
7
8
9
10
// routes/breadcrumbs.php
Breadcrumbs::for('children', function ($trail) {
    $trail->parent('list name');
    $trail->push('children', route('children'));
});

// view ファイル
{{ Breadcrumbs::render('children') }}
// =>「displayed name / children」のパンくずリストが表示される
//    displayed name 部分には route('breadcrumbs') へのリンク

↑の定義後、view ファイルにて Breadcrumbs::render('children') とすると、 displayed name / children のようなパンくずリストが表示され、route('breadcrumbs') の示すリンクが displayed name の部分に張られる。

引数や動的な内容の表示もできる。

1
2
3
4
5
6
7
8
9
10
11
12
// routes/breadcrumbs.php
Breadcrumbs::for('hobby', function ($trail, $child) {
    $trail->parent('children');
    $trail->push($child->hobby->name, route('hobby', $child->hobby->id));
});

// view ファイル
{{ Breadcrumbs::render('hobby', $child) }}
// =>「displayed name / children / <hobby name>」のパンくずリストが表示される
//    displayed name 部分には route('breadcrumbs') へのリンク
//    children 部分には route('children') へのリンク
//    <hobby name> 部分にはページに応じた hobby->name が動的に表示される

独自パンくずリスト

Custom Templates

config/breadcrumbs.php の view に指定した箇所に、 view ファイルを作成する。

'view' => 'partials.breadcrumbs', なら resources/views/partials/breadcrumbs.blade.php。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@if (count($breadcrumbs))
  <div class="breadcrumbs">
    <ul>
      @foreach ($breadcrumbs as $breadcrumb)
        <li>
          @if ($breadcrumb->url && !$loop->last)
            <a href="{{ $breadcrumb->url }}">
              {{ $breadcrumb->title }}
            </a>
          @else
            <span>
              {{ $breadcrumb->title }}
            </span>
          @endif
        </li>
      @endforeach
    </ul>
  </div>
@endif

基本的に使うのは url と title で、必要に応じて $data (Custome data) も利用可能。
※In the view (template) - API Reference

レイアウトファイルで利用

With Blade layouts and @section

resources/views/layouts/xxxx.blade.php で @yield('breadcrumbs') としておき、

1
2
3
4
5
6
<div>
  @yield('breadcrumbs')
  <div>
    @yield('content')
  </div>
</div>

各 view ファイルで @section('breadcrumbs', Breadcrumbs::render('xxxx')) とすると、良い感じにパンくずリストを扱える。

1
2
3
4
@section('breadcrumbs', Breadcrumbs::render('list name'))
@section('content')
  <div>home</div>
@endsection

Tips

自動選択

Output breadcrumbs in your layout

Breadcrumbs::render() や Breadcrumbs::generate() で、ルーティングに合うリストが自動で出力されるっぽい？(未確認)

1
2
3
{{ Breadcrumbs::render() }}
// or
{{ Breadcrumbs::generate() }} // ??

Implicit binding

Route modle binding

Implicit binding していると、パンくずリストでも同じように injection してくれるっぽい。(未確認)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// routes/web.php
Route::name('post')->get('/post/{post}', 'PostController@show');

// app/Http/Controllers/PostController.php
use App\Post;
class PostController extends Controller
{
    public function show(Post $post) // <-- Implicit binding(auto injection)
    {
        return view('post/show', ['post' => $post]);
    }
}

// routes/breadcrumbs.php
Breadcrumbs::for('post', function ($trail, $post) { // <-- Implicit binding(auto injection)
    $trail->parent('home');
    $trail->push($post->title, route('post', $post));
});

まとめ

  • composer require davejamesmiller/laravel-breadcrumbs でインストール
  • routes/breadcrumbs.php でパンくずリストの定義
    • リスト名、親階層、表示内容とリンク先 を指定
  • Breadcrumbs::render('list_name') でパンくずリストの描画
    • @section, @yield と組み合わせると便利

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list