使用Pug / Jade

Question

您好，我是Jade模板Node.js的新手。我正在尝试使用Express 4.16.4，JQuery，Bootstrap 4.2.1和Pug 2.0.3。创建一个基本的启动程序。

我正在尝试将导航栏添加到我的layout.jade文件中。它似乎添加了导航栏，但无法正常运行。

我在下面包括了layout.pug和index.pug文件。

layout.pug：

doctype html
html
  head
    title Knowledgebase
    link(rel='stylesheet' href='/bower_components/bootstrap/dist/css/bootstrap.css')
  body
    nav.navbar.navbar-inverse.navbar-fixed-top
      .container
        .navbar-header
          button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false', aria-controls='navbar')
            span.sr-only Toggle navigation
            span.icon-bar
            span.icon-bar
            span.icon-bar
          a.navbar-brand(href='#') Project name
        #navbar.collapse.navbar-collapse
          ul.nav.navbar-nav
            li.active
              a(href='#') Home
            li
              a(href='#about') About
            li
              a(href='#contact') Contact
    .container
      block content
      br
      hr
      footer
        p Copyright © 2017

index.pug：

extends layout

block content
  h1 #{title}
  ul.list-group
    each article, i in articles
      li.list-group-item= article.title

我还附加了要渲染的页面和所需页面的图像。

渲染页面：

我想要的实际页面：