58
58

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Laravel:パンくずリスト

Last updated at Posted at 2018-10-05

概要

Laravel でパンくずリストライブラリbreadcrumbsを使います。

:link: Github: laravel-breadcrumbs

##▶ 動作確認環境

  • PHP 7.1.21
  • Laravel 5.7

使ってみよう

##▶ インストール

php composer.phar require davejamesmiller/laravel-breadcrumbs

そうするとcomposer.jsonに記述が追加されます。

※ Laravel 5.5移行は基本的にconfig/app.phpの2箇所追記は不要です。
参考: :link: Qiita [Laravel5.5]Package Auto Discoveryを理解する

##▶ パンくずリストを定義する

routes配下に breadcrumbs.php というファイルを作り
このファイルにパンくずリストを定義していきます。

routes/breadcrumbs.php(例)

<?php

// ホーム
Breadcrumbs::for('home', function ($trail) {
    $trail->push('ホーム', url('home'));
});


// ホーム > 本の一覧
Breadcrumbs::for('books', function ($trail) {
    $trail->parent('home');
    $trail->push('本の一覧', url('books'));
});

// ホーム > 本の一覧 >  [Title]
Breadcrumbs::for('showBook', function ($trail, $book) {
    $trail->parent('books');
    $trail->push($book->book_title, url('books/' . $book->id));

});

// ホーム > 本の一覧 >  [Title]  > 編集
Breadcrumbs::for('editBook', function ($trail, $book) {
    $trail->parent('showBook', $book);
    $trail->push('編集', url('books/' . $book->id .'/edit'));
});

公式ではroute()が使われてるけど、これ使う場合はroute/web.phpで名前を定義しないといけないよ。

##▶ View に反映

###- とりあえず
これらをviewに埋め込みます。

パーツ
{{ Breadcrumbs::render('home') }}
{{ Breadcrumbs::render('book') }}
{{ Breadcrumbs::render('showBook', $book) }}
{{ Breadcrumbs::render('editBook', $book) }}

これで完成じゃ!わーい

###- テンプレートに埋め込む

ちょっとこだわってテンプレートに埋め込んでみる

親テンプレ

好きな場所に@yield('breadcrumbs')を埋め込む

resources/views/layouts/myapp.blade.php
<!DOCTYPE html>
<html lang="ja">
    <body>
    <nav></nav>
    @yield('breadcrumbs')
    </body>
</html>

子ページ

好きな場所にこれらを埋め込む。

@section('breadcrumbs', Breadcrumbs::render('home'))
@section('breadcrumbs', Breadcrumbs::render('books'))
@section('breadcrumbs', Breadcrumbs::render('showBook', $book))
@section('breadcrumbs', Breadcrumbs::render('editBook', $book))

##▶ パンくずリストのスタイルを準備

パンくずリストのスタイルを自分で作りたいこの手順を実行します。

###- breadcrumbs の設定ファイルを生成

php artisan vendor:publish --provider="DaveJamesMiller\Breadcrumbs\BreadcrumbsServiceProvider"

するとconfig/breadcrumbs.phpが作成される。

###- config/breadcrumbs.php を編集

スタイル(view)の参照先を指定します。
(パンくずリスト自体のviewがどこにあるのかを書きます。)

resources/view/components に breadcrumbs.blade.php を作る場合の例です。

config/breadcrumbs.php
// 'view' => 'breadcrumbs::bootstrap4',
'view' => 'components/breadcrumbs',

###- パンくずリストのスタイルを作る

パンくずリスト部分のviewをパーツ的に作ります。

resources/view/components/breadcrumbs.blade.php
@if (count($breadcrumbs))
    <ul class="breadcrumb">
        @foreach ($breadcrumbs as $breadcrumb)
            @if ($breadcrumb->url && !$loop->last)
                <li class="breadcrumb-item"><a href="{{ $breadcrumb->url }}">{{ $breadcrumb->title }}</a></li>
            @else
                <li class="breadcrumb-item active">{{ $breadcrumb->title }}</li>
            @endif
        @endforeach
    </ul>
@endif

##▶ 完成図

できたー

breadcrumbs.png

参考にしたサイト

:link: Github davejamesmiller/laravel-breadcrumbs

:link: Laravelのパンくずリスト(Breadcrumb)の実装(リンクとJSON-LD)

:link: Laravel-Breadcrumbが便利だった

58
58
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
58
58

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?