パンくず作成の話

プログラミングを本格的にスタートして3ヶ月目に入りましたさかもとです。

今回はパンくずを作成してみよう!という話をアウトプットしようと思います。

 

パンくずって?

 

https://i.gyazo.com/731f28230fc0b6091139bbf1157838df.png

これがパンくずです。HRとかで画面の端についてるやつです。現在HRのどのあたりにいるかが一発でわかり遷移を1クリックでできるとても便利な機能です。

 

実装方法

 

①インストール

 gem ' gretel '

 bundle install

 

②ファイルの作成

 rails generate gretel:install

   (これにより config/breadcrumbs.rb が作成される)

 

③定義

   ②のファイルにデータを記述。今回は例として

 ダッシュボード画面  →  ユーザー一覧画面 →   ユーザー編集画面

 この順番で遷移していくページのパンくずを作成していきます。

 ```

    crumb :dashboard do

        link ' ダッシュボード ' , dashboard_path

    end

    

    crumb : users do

        link ' ユーザー ' , users_path

        parent : dashboard

    end

  

    crumb : edit_user do | user |

        link ' ユーザー編集 ' , edit_user_path( user )

        parent : users

    end

 

    ```

 これでパンくずの定義が完了しました。

 1行目→crumbでパンくずを定義

 2行目→パンくずに表示する名前とリンク先のパスを定義

 3行目→parentで親となるパンくずを定義

 これでひとかたまりになります。

 

④viewに記述

 viewに記述し実際にブラウザに表示されるようにしていきます。

 今回はユーザーとユーザー編集のみ記載していきます。

 ```

    user.html.erb

    : 

    <% breadcrumb : users_path %>

 ```

    ```

     edit.html.erb

     :

     <% breadcrumb : edit_user_path, @user  %>

     ```

    以上で実装は完了です。

 viewに関しては難しいところはないように思いますが<%= %>で表記しないこと。

 変数はインスタンス変数で定義すること。

 ここは注意が必要です。

 

最後に

 

今後も学びを自分が見返せるようにアウトプットしていこうと思います。