今回はlaravelでパンくずリストを作る方法を教えます。
まずは使い方です！この記事の通りやっていくとどのようなことをできるようになるかを示しますね。
前提条件としては「Fontawesome」を使えるようにしておいてください。
やり方はこちらの記事で紹介しています！
完成イメージ
<x-breadcrumb>
<li><a href="#">カテゴリ1-1</a></li>
<li><a href="#">カテゴリ1-2</a></li>
</x-breadcrumb>
画像は私が作成しているクイズサイト「くいしぇあ」における見た目です。
アクセスしてみるとどのように使われているかわかります。
これを見ていただければわかるように、li要素を追加するだけでパンくずリストが作成されるような仕掛けを作っていきたいと思います。
Componentを作成する
今回はLaravelのComponentという仕組みを利用します。
超簡単に言うとオリジナルのタグを作れるといったところでしょうか。（人によって解釈や表現は違いますが）
php artisan コマンドでComponentは自動的に作成することができます。
php artisan make:component Breadcrumbこうすることで関連ファイルが作成されます。
関連ファイルの編集はこの後説明しますが、いの一番にやってほしいことがあります。
\app\Providers\AppServiceProvider.phpファイルを編集します。
use Illuminate\Support\Facades\Blade;
//↓これを追加
use App\View\Components\Breadcrumb;
public function boot()
{
//↓これを追加
Blade::component('breadcrumb', Breadcrumb::class);
}これでコンポーネントの利用準備が整いました。
bladeファイルを編集する
先ほどのartisanコマンドでapp/resouces/view/componentsにbreadcrumb.blade.phpというファイルが出来上がっていると思います。
そのファイルに以下のソースを貼り付けてください。
/*パンくずリスト 開始*/
<style>
.breadcrumb {
list-style: none;
}
.breadcrumb li {
display: inline;/*横に並ぶように*/
list-style: none;
font-weight: bold;/*太字*/
}
.breadcrumb li:after {
/* >を表示*/
font-family: "Font Awesome 5 Free";
content: '\f0da';
font-weight: 900;
padding-left: 5px;
/*color: gray;*/
}
.breadcrumb li:last-child:after {
content: '';
}
.breadcrumb li a {
text-decoration: none;
/*color: gray;*/
}
.breadcrumb li a:hover {
text-decoration: underline;
}
</style>
<nav class="breadcrumb px-2 py-1 bg-main text-white text-xs overflow-x-auto">
<li><a href="{{route('home')}}"><i class="fas fa-home"></i></a></li>
{{ $slot }}
</nav>貼り付けの注意点 ～色が反映されない？～
今回はCSSフレームワークとして"TailWind"を利用しています。そのため、ul要素のクラス部分にて背景色と文字色とpaddingの設定を行っているため、色とpaddingが反映されていない人はstyleで直接指定するか、bootstrapを利用している方はbootstrapの書き方に変更してください。
カスタマイズポイント
今回はstyle要素を一つのファイルにまとめましたが、共通的に利用しているcssファイルに移してもらって構いません。
家のアイコンを変えたい場合は、.breadcrumb li:first-child a:beforeを修正してください。
パンくずリストを表示する
早速表示させてみましょう。
好きなbladeファイルに以下を記述してください。
<x-breadcrumb>
<li><a href="#">カテゴリ1-1</a></li>
<li><a href="#">カテゴリ1-2</a></li>
</x-breadcrumb>すると完成イメージのようなものが出力されるはずです。
あとは微修正していただければ使えると思います。
パンくずリスト完成！
うまく作れましたか？
こんなエラーが出た！のような場合はコメントしていただければ必ず回答しますので、ぜひお気軽に質問してくださいね。