pug 基础介绍(2) DAY100

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}

那今天的介绍就到这里
有任何问题或内容有误
都可以跟我说唷