パンくずリスト

2019-06-03

最終課題メルカリのクローンサイトで実装したパンくずリストについて紹介します。

パンくずはページの階層が深くなった際に、今どこのページにいるのか視覚的にわかりやすくします。

下記実際に実装したページですが、メルカリのマイページに入り、その中のプロフィール画面にいることが視覚的にわかります。

実装の流れ

①gretelというgemをインストール

(gemfileに追記し、bundle install)

②gretelの設定ファイル　config/breadcrumbs.rbを作成

(bundle exec rails g enerate gretel:install)

③config/breadcrumbs.rbに各ビューページに表示させたいパンくずを設定

メルカリ＞マイページ＞プロフィールを例に説明します。

まず「マイページ」について、

・crumb :show doでどのビューファイルに対し設定するのか書きます。「マイページ」はusers/show.html.hamlなのでshowです。

・link" "ではページに表示させたいパンくずの表示名を書きます。

・〜_pathでパスつまりルーティングの経路を書きます。「マイページ」はroot（トップページ）から入るので root_pathになります。

・parent :　〜　は親ページ(1つ前のページ）なので同じくrootです。

同じように

プロフィールはedit.html.hamlに設定し、表示は「プロフィール」(全ての経路を書く必要はありません。そのページの呼び名のみでOK）にします。パスはusers/editなのでusers_path,　親はshowなのでparent: showです。

④各ビューファイルに設定する。

下記はプロフィールページのファイルです。