Hi，大家好，明天是中秋節了，在這邊祝大家佳節愉快，烤肉多吃一點XD。

昨天我們利用 Sequelize 的 hasMany 機制完成了關聯的建立，並籍由該機制完成資料的抓取功能，可以在一次查詢將 master與 detail 資料一併抓出，今天我們要進行版面的製作，至少讓目前為草稿階段的系統畫面，進化成工程師介面 XDD，那麼就開始吧

麵包屑功能的製作

因為我們預計會有切換頁面的動作，所以會需要手段進行頁面巡迴，這時候麵包屑（Breadcrumb）就是一個方便的機制。我的麵包屑機制是自製版本，主要是靠著 express 的 router機制，將該有的項目由後端傳至前端，並由ejs渲染出來，讓我們來製作麵包屑吧。

1. 打開 saf.js，加入下列 function

/**
 * 產生麵包屑項目
 * @param {String} title 目前頁面標題
 * @returns 
 */
function createBreadcrumb(title) {
    let result = [];
    if(title !== "") {
        result.push({
            title: "系統主頁",
            url: "/saf/"
        })
        result.push({
            title: title,
            url: ""
        })
    } else {
        result.push({
            title: "系統主頁",
            url: ""
        })
    }
    return result;
}

2. 搜尋有進行 render 的地方，加傳參數 breads，如下

    //傳入參數為空字串時，表示目前在第一層
    res.render("index", {
        breads: createBreadcrumb("")
    })

3. 打開 layout.js，在要加入麵包屑的位置貼上

    <!-- 設定麵包屑 -->
    <% if(typeof breads !== "undefined") { %>
        <% include include/breadcrumbs %>
    <% } %>

4. 在 view 中新增 include/breadcrumbs.ejs，並貼上下列內容

<!-- 麵包屑 -->
<nav aria-label="breadcrumb" style="background-color: #F9F9F9">
    <ol class="breadcrumb">
<%
        for(let i = 0; i < breads.length; i++) {
            let obj = breads[i];
            if(obj.url !== "") {
%>
            <li class="breadcrumb-item"><a href="<%=obj.url %>"><%=obj.title %></a></li>
<%
            } else {
%>
            <li class="breadcrumb-item active" aria-current="page"><%=obj.title %></li>
<%
            }
        }
%>
    </ol>
</nav>

完成圖如下

結語

今天我們暫時先到這邊，加入了麵包屑的功能，雖然是一個很簡單的東西，但是也是一個很常用的機制，接下來我們要完成詳細資料頁的顯示功能，那我們明天再繼續吧