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@4.6.2/dist/css/bootstrap.min.css", integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N", crossorigin="anonymous")
    script(src="https://code.jquery.com/jquery-3.5.1.slim.min.js", integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj", crossorigin="anonymous")
    script(src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js", integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+", 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 或其他客戶端網頁框架是快速建立吸引人頁面的方法，該頁面可以在不同瀏覽器尺寸下良好縮放，它還允許我們處理頁面展示而不必深入瞭解任何細節 - 我們只是想專注於這裡的伺服器端程式碼！

注意：這些指令碼是跨域載入的，因此在教程的後面，當我們新增安全中介軟體時，我們需要顯式地允許載入這些檔案。有關更多資訊，請參見 部署 > 使用 Helmet 防禦已知漏洞。

如果您已閱讀我們上面的 模板入門，則佈局應該相當明顯。請注意使用 block content 作為佔位符，用於放置我們各個頁面的內容。

基本模板還引用了一個本地 CSS 檔案（style.css），該檔案提供一些額外的樣式。開啟 /public/stylesheets/style.css 並將其內容替換為以下 CSS 程式碼

css
.sidebar-nav {
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

現在我們有了用於建立帶側邊欄頁面的基本模板。在接下來的部分中，我們將使用它來定義各個頁面。

下一步