Базовый шаблон LocalLibrary

Перейти к:

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Теперь, чтобы мы понимали как расширить шабллон с помощью Pug, давайте создадим базовый шаблон для проекта. У него будет sidebar со ссылками на страницы, которые мы надеемся создать через учебник статей (например, для отображения и создания книги, жанры, авторы и т. д.) и основная область контента, которую мы переопределим на каждой из наших отдельных страниц.

Откройте /views/layout.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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css')
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js')
    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js')
    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

Шаблон использует (и включает) JavaScript и CSS из  Bootstrap , чтобы улучшить макет и представление HTML-страницы. Использование Bootstrap или другой клиентского фреймворка - это быстрый способ создать привлекательную страницу, которая может хорошо масштабироваться в разных размерах браузера, а также позволяет нам иметь дело с презентацией страницы без необходимости вдаваться в какие—либо детали-мы просто хотим сосредоточиться на серверном коде здесь!

Макет должен быть довольно очевидным, если Вы прочитали нашу статью выше Template primer. Обратите внимание на использование block content в качестве заполнителя для того, где будет размещаться контент для наших отдельных страниц

Базовый шаблон также ссылается на локальный файл css (style.css) что обеспечивает немного дополнительную отладку. Откройте /public/stylesheets/style.css и замените его содержимое следующим CSS:

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

Когда мы перейдем к запуску нашего сайта, мы должны увидеть боковую панель! В следующих разделах мы будем использовать вышеуказанный макет для определения отдельных страниц.

Next steps

Метки документа и участники

Внесли вклад в эту страницу: MariyaSka
Обновлялась последний раз: MariyaSka,