LocalLibrary 基礎模板
現在我們已經理解了如何使用 Pug 擴充套件模板，讓我們開始為專案建立一個基礎模板。這將包含一個側邊欄，其中包含我們在教程文章中希望建立的頁面的連結（例如，顯示和建立書籍、流派、作者等），以及一個主內容區域，我們將在每個單獨的頁面中進行覆蓋。
開啟 /views/layout.pug 並用下面的程式碼替換內容。
pug
doctype html
html(lang='en')
head
title= title
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1')
link(rel="stylesheet", href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css",, crossorigin="anonymous")
script(src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js",, crossorigin="anonymous")
link(rel='stylesheet', href='/stylesheets/style.css')
body
div(class='container-fluid')
div(class='row')
div(class='col-sm-2')
block sidebar
ul(class='sidebar-nav')
li
a(href='/catalog') Home
li
a(href='/catalog/books') All books
li
a(href='/catalog/authors') All authors
li
a(href='/catalog/genres') All genres
li
a(href='/catalog/bookinstances') All book-instances
li
hr
li
a(href='/catalog/author/create') Create new author
li
a(href='/catalog/genre/create') Create new genre
li
a(href='/catalog/book/create') Create new book
li
a(href='/catalog/bookinstance/create') Create new book instance (copy)
div(class='col-sm-10')
block content
該模板使用（幷包含）來自 Bootstrap 的 JavaScript 和 CSS，以改進 HTML 頁面的佈局和呈現。使用 Bootstrap 或另一個客戶端 Web 框架是建立引人注目的、可在不同瀏覽器尺寸下良好擴充套件的頁面的快速方法，它還允許我們處理頁面呈現，而無需深入瞭解任何細節——我們只想在此處專注於伺服器端程式碼！
注意： 這些指令碼是跨域載入的，因此在本教程稍後新增安全中介軟體時，我們將需要顯式允許載入這些檔案。有關更多資訊，請參閱 部署 > 使用 Helmet 防範已知漏洞。
如果您閱讀了我們上面的 模板入門指南，那麼佈局應該相當容易理解。請注意 `block content` 用作我們各個頁面內容將放置的佔位符。
基礎模板還引用了一個本地 CSS 檔案（style.css），它提供了一些額外的樣式。開啟 /public/stylesheets/style.css 並用以下 CSS 程式碼替換其內容
css
.sidebar-nav {
margin-top: 20px;
padding: 0;
list-style: none;
}
現在我們有了一個用於建立帶有側邊欄的頁面的基礎模板。在接下來的部分中，我們將使用它來定義各個頁面。
後續步驟
- 返回 Express 教程第 5 部分：顯示圖書館資料。
- 繼續第 5 部分的下一篇子文章：主頁。