[初心者向け] Gretelを使わずページごとにパンくずリストの表示内容を変える

はじめに

右も左もわからないプログラミング初心者が書く備忘録です。
膨大な勉強量の中で気になった事をメモしていきます。

間違いや記事を見て良かったことなど
気軽にコメントを残して頂けると活力に繋がりますのでよろしくおねがいします

今回、パンくずリスト導入時、親・子・孫関係の「子」にあたるリンクを特定のページでのみ表示させようとした時にすこし頭を使う事になったので
備忘録として残しておこうと思います。

今回の内容

gretelは使用せず、bootstrapドキュメントを使用してパンくずリストを作成します。
https://getbootstrap.jp/docs/5.0/components/breadcrumb/

基本の型

views/layouts/_breadcrumbs.html.erb

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

表示内容

HomeとLibraryがリンクを持ち、カレントページである事を想定しているDataはリンクを持たないので灰色で表示されています。

hrefの＃部分をリンク先のパスにすればパンくずの基本の形が完成です

事前準備

パンくずはパーシャル化した方が使い勝手が良く、コーディングもキレイになるので切っておきます。

views/layouts/_breadcrumbs.html.erb

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Show</li>
  </ol>
</nav>

今回は親にHomeを、子にShopを、孫にShowをという形を目指します。

Shopの部分はこれから記述していきます。
パーシャル化に関しては調べれば良い記事がたくさん出てきますのでここでは詳しい話を省きます。

ここから本題に入ります

今回は、showページに転移するとパンくずリストに”Shop”が表示されるようにします。
まずは基本の形に対し、showページからの”Shopを表示して！”という命令を受け付けるようにします。

views/layouts/_breadcrumbs.html.erb

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
　　　　　　　　<!--  ここから 　　-->
　　　　　　　　<% if yield(:shop_to_display).empty? %>
      <li　class="breadcrumb-item"><%= link_to 'Shop', '#' %></li>
    <% end %>
    <!--  ここまで追加  -->
    <li class="breadcrumb-item active" aria-current="page">Show</li>
  </ol>
</nav>

追加したif文は
shop_to_displayという変数が来ていますか？(枠は必要だけど値はなくていいよ〜)
来てるならリンク先が＃のShopをパンくずについかするからね
という意味です。

これで受けの部分はOKなので、showページを作成し下記コードをshow.html.erbの一番上に記述します

show.html.erb

<% content_for :shop_to_display %>

この記述でshowページに転移した際、先程の　yield　が変数を受け取ることが出来ます。

次に、パーシャル化した_breadcrumbs.html.erbをshow.html.erbで表示出来るように呼び出します。

show.html.erb

<% content_for :shop_to_display %>

<%= render 'layouts/breadcrumbs' %>  <!--  これを追加  -->

注意点として、呼び出す時は”＿”や拡張子”html.erb"などは不要であり、
呼び出しを行うviewファイル（ここではshow.html.erb）からみてのパスになります。

以上でshow.html.erbで呼び出したパンくずリストにShopが追加され

Home / Shop / Data

と表示されていると思います

この技法を駆使すれば、任意のページで、任意のパンくずリストを作成することができます♪
何より導入がかなり簡単なので、試してみてください

おまけ

呼び出し時、必ず表示されるパンくずを増やす場合

ちなみにbreadcrumb-itemを増やせば、表示されるパンくずが増えます。
これは 本題と違い”呼び出し時に必ず表示” されるので気をつけてください。

views/layouts/_breadcrumbs.html.erb

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item"><a href="#">Abc</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

’Abc'が追加され表示内容がHome / Library / Abc / Dataとなります。

最後に

勉強を始めたばかりで知識もなく、拙い文章ですがアウトプットすることで頭の中を整理しつつ、どなたかのお役に立てれば良いなと思い投稿させて頂きました。
最後まで見て頂きありがとうございました！