正在建立個人部落格的後端
使用Node.js Express插件/Pug(Jade)當作模版引擎

• 更新於最末

• 問題一 : [Pug if 判斷式]
  Express傳入一個Array中含有多個Object，
  利用Pug去判斷該Object是否含有nav_subitem屬性(為一陣列)

• 問題二 : [Pug each loop]
  是否可以指定 Array 中 特定Object 的 nav_subitem屬性(為一陣列)
  並將該屬性Loop出來

(只成功將各Object的單個屬性如id/nav_item loop出)
(兩層的 不知道該如何指定)

Express Code如下
目前先將array object放在Express Code 之後才要接MongoDB
nav_sublist 用來判斷是否有nav_subitem屬性用的，失敗了 可以無視QAQ

app.get('/',function (req,res) {
    let nav_list =[
        {
            id: 1,
            nav_item: 'HTML',
            nav_sublist: true,
            nav_subitem: ['HTML5','HTML API']
        },
        {
            id: 2,
            nav_item: 'CSS',
            nav_sublist: true,
            nav_subitem: ['SASS','POST CSS']
        },
        {
            id: 3,
            nav_item: 'SEO',
            nav_sublist: false,
        }
    ]
    res.render('index',{
        'title': 'RocMarkBlog',
        'nav_list': nav_list
    })
})

Pug (Jade) 目標呈現
用途: 導覽列
目前第一層 nav_item 已成功呼叫出
第二層 子表單 不知道該如何 if判斷&呼叫

.nav_section
    ul.nav_list
        li.nav_item 
        a(href="#").nav_link HTML
        ul.nav_sublist
            li.nav_subitem 
                a(href="#").nav_link HTML TAG
            li.nav_subitem 
                a(href="#").nav_link HTML5 API

Pug 目前成功的
這樣寫法 太巢了吧
不知道 Mixin寫法是否會比較好一點
才碰Pug沒幾天還不是很熟

.nav_section
    ul.nav_list
        each nav, i in nav_list
            li.nav_item
                a(href="#").nav_link #{nav.nav_item}
                if 此處之下開始出錯 另開一個Block (接此)

Pug 目前失敗的

• if 判斷式出錯
• 是否有辦法判斷該object存在nav_subitem與否
• each 方面 我下方的寫法 只成功loop出所有的nav_subitem
• 即 nav_item(正常顯示)
• nav_subitem(大家都一樣 內容為:item1的各值,item2的各值)

目標為 nav_item nav_subitem(nav_item下nav_subitem的值)

//- 接續上一個程式Block
if #{nav.nav_sublist}
    ul.nav_sublist
        each subitem in nav_list
            li.nav_subitem
                each subitem in nav_list
                    a(href="#").nav_link #{subitem.nav_subitem}

更新
上述的 nav_item/nav_subitem => item,subitem 沒啥影響

• if 判斷仍未找到解法
• each 可取得正確的nav_subitem值 [更新]
• 只是nav_subitem 選取到的是陣列
• 並沒有把各個值loop出新的li
• 另外 不知道為何會產出空的link如下方HTML

.nav_section
    ul.nav_list
        each nav, i in nav_list
            li.nav_item: a(href="#").nav_link #{nav.item}
                ul.nav_sublist
                    li.nav_subitem: a(href="#").nav_link #{nav.subitem}

HTML產生的Code

<li class="nav_subitem">
    <a class="nav_link" href="#"></a>
    <a class="nav_link" href="#">HTML5,HTML API</a>
</li>

真希望發問也有草稿可以用QQ
不小心按掉重打，光解問題就要爆炸了，問問題好難

P.S. 有哪裡解釋不清楚的歡迎詢問，我會盡速回應!