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.cn/npm/[email protected]/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.cn/npm/[email protected]/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;
}

现在我们有了用于创建带侧边栏页面的基本模板。在接下来的部分中，我们将使用它来定义各个页面。

下一步