冒险村16 - customize breadcurmb

延续上篇 customize tooltips with data attribute 後，另外也来自己手刻一个面包屑吧～

可能想说套个 bootstrap 像是这样子：

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

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

  <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>

不过在 rails 里面如果每一页都要有 breadcrumb 还有可能 li 内层的数量不同时，其实满麻烦的，也会重复的一直写相同的 link 等等，所以习惯会抽成 partial 来做，并把像是固定的 link，例如：首页，写死就不用一直重复的写。

  # user show page

  <% content_for :breadcrumb do %>
    <%= render "shared/breadcrumb", items: [
      { url: users_path, title: "User show page" },
      { url: nil, title: @users.first.name }
    ] %>
  <% end %>

  # app > views > shared > _breadcrumb.html.erb

  <div class="text-12px flex items-center">
    <li class="inline-block">
      <a href="<%= root_path %>"><span>首页</span></a>
    </li>
    <% items.each do |item| %>
      <li class="inline-block flex items-center">
        &nbsp;&nbsp;/&nbsp;&nbsp;
        <% if item[:url] %>
          <a href="<%= item[:url] %>"><span><%= item[:title] %></span></a>
        <% else %>
          <span ><%= item[:title] %></span>
        <% end %>
      </li>
    <% end %>
  </div>

这样子可以更弹性，并且传入 items 内的数量多寡，就会决定 li 後面包屑的数量，并且最後一个带入 url nil 就改为显示 text，而显示的内容可能会跟宽度还有些问题，这部分就看 css 怎麽做搭配，文字过长或许就可以透过 whitespace-nowrap overflow-hidden 与 flex-shrink-0 等等方式来处理。