Привет, я новичок в 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
Я также приложил изображения отображаемой страницы и нужную мне страницу.
Отображаемая страница:
Фактическая страница Я хочу:
