Jade 匯入外部 JSON 資料內容

這裡我們先自行新增2份 jaon檔

**menu.json**
{
    "list":[{
        "name": "首頁",
        "url": "index.html"
    },
    {
        "name": "分頁",
        "url": "page.html"
    }]
}

data.json

{
    "records":[
        {
            "Ticketinfo": "免費參觀",
            "Zone": "三民區",
            "Add": "高雄市三民區建國二路318號",
            "Opentime": "週二至週日10:00-18:00，每週一公休",
            "Name": "高雄願景館",
            "Picture1": "http://khh.travel/FileArtPic.ashx?id=705&w=1280&h=960"
        }
    ]
}

由於我們要把 json檔匯入到專案內
我們須透過一個 gulp 套件
gulp-data
https://www.npmjs.com/package/gulp-data

npm install gulp-data --save

並在 jade
加上

.pipe($.data(function(){
        // 檔案從外部匯進來
        let kh = require("./source/data/data.json");
        let menu = require("./source/data/menu.json");
        let source = {
            'kh': kh,
            'menu': menu
        }
        return source;
    }))

這裡 return一個物件
加上結果

gulp.task('jade', function() {
    return gulp.src('./source/**/*.jade')
    .pipe($.plumber())
    .pipe($.data(function(){
        let page = require("./source/data/data.json");
        let menu = require("./source/data/menu.json");
        let source = {
            'page': page,
            'menu': menu
        }
        return source;
    }))
    .pipe($.jade({
        pretty: true
    }))
    .pipe(gulp.dest('./public/'))
    .pipe(browserSync.stream())
});

為了顯示
我們在 index.jade 加入

 h1 #{menu.list[1].name}

這裡使用 #{} 接收變數
且它是從屬性開始 並非 source.menu.list[1].name

使用 Each 處理資料並產生選單

這裡我們會利用 menu.json 來繪製我們的 navbar
修改 navbar.jade 為
這裡要注意 我們有使用 each

 //  menu.list 為陣列
 each item in menu.list

這裡的 item 為 menu.list 裡面的一個個物件

nav.navbar.navbar-expand-lg.navbar-light.bg-light
            a.navbar-brand(href='#') Navbar
            button.navbar-toggler(type='button' data-toggle='collapse' data-target='#navbarNav' aria-controls='navbarNav' aria-expanded='false' aria-label='Toggle navigation')
                span.navbar-toggler-icon
            #navbarNav.collapse.navbar-collapse
                ul.navbar-nav
                    each item in menu.list
                        li.nav-item.active
                            a.nav-link(href='#{item.url}')
                                | #{item.name}

接著我們再開一個 list.jade
然後找一個 bootstrap4 卡片元件 轉為 jade 格式 貼入

extend layout.jade

block  content
    .card-columns
        .card
            img.card-img-top(src='...' alt='...')
            .card-body
                h5.card-title Card title that wraps to a new line
                p.card-text
                    | This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

再來我們就是要用 each 把資料帶入卡片內啦~~

extend layout.jade

block navbar
    include partials/navbar.jade

block  content
    .card-columns
        each item in kh.records
            .card
                img.card-img-top(src='#{item.Picture1}' alt='...')
                .card-body
                    h5.card-title #{item.Name}
                    p.card-text
                        | #{item.Opentime}

使用 Mixin 來製作 HTML 模組

由於開發的時候 程式碼會過於冗長

所以我們可以利用 mixin 來解決此問題

https://pugjs.org/language/mixins.html

這裡我們來修改 navbar
原本 navnar.jade

nav.navbar.navbar-expand-lg.navbar-light.bg-light
    a.navbar-brand(href='#') Navbar
    button.navbar-toggler(type='button' data-toggle='collapse' data-target='#navbarNav' aria-controls='navbarNav' aria-expanded='false' aria-label='Toggle navigation')
        span.navbar-toggler-icon
    #navbarNav.collapse.navbar-collapse
        ul.navbar-nav
            each item in menu.list
                +link(item.url,item.name)
                li.nav-item.active
                    a.nav-link(href='#{item.url}')
                        | #{item.name}

我們在上面新增 mixin

mixin link(url,name)
    li.nav-item
        a.nav-link(href='#{url}')
            |  #{name}
            
nav.navbar.navbar-expand-lg.navbar-light.bg-light
    a.navbar-brand(href='#') Navbar
    button.navbar-toggler(type='button' data-toggle='collapse' data-target='#navbarNav' aria-controls='navbarNav' aria-expanded='false' aria-label='Toggle navigation')
        span.navbar-toggler-icon
    #navbarNav.collapse.navbar-collapse
        ul.navbar-nav
            each item in menu.list
                +link(item.url,item.name)

利用 +link 並傳入參數
會發現 navbar 沒有改變 這是正常的><

接著我們利用變數搭配 if else 來實現 active 效果
我們在 index.jade 與 list.jade 加入

 - var path = "index.html"

 - var path = "list.html"

並把mixin 修改為

這裡為什麼要設變數呢??

因為在jade
我們不知道目前頁面是在哪一個頁面

若變數與url 相同
則有 active 效果
否則沒有

mixin link(url,name)
    if(path === url)
        li.nav-item.active
            a.nav-link(href='#{url}')
                |  #{name}
    else
        li.nav-item
            a.nav-link(href='#{url}')
                |  #{name}

那今天的介紹就到這裡
有任何問題 或 內容有誤
都可以跟我說唷

連續發文100天 達成!!