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.jadeblock  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.jadeblock navbar    include partials/navbar.jadeblock  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天 达成!!