パンくずリスト

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

 

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

 

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

 

f:id:Arts91:20190603104802p:plain

 

実装の流れ

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

(gemfileに追記し、bundle install)

 

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

(bundle exec rails g enerate gretel:install)

 

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

 

f:id:Arts91:20190603105723p:plain

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

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

・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です。

 

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

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

f:id:Arts91:20190603111307p:plain