Node.js,Expressメモ⑤の3

atomのteletypeを知ってとてもワクワクしています。こんにちは。

サブページはお勉強だけかと思ったら急にはじまりました。

layout.pugの書き換え

pugファイルは継承可能なようなのでまずはベースとなるlayout.pugを書き換えます。
headにいろいろ書き足していますがその中にjqueryのスクリプト、bootstrapでcssの拡張？などもしているようです。

head
  title=title
  meta(charaset="utf8")
  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')

bootstrap

フロントエンドのフレームワークなのかな？
デバイスの違いもうまい具合吸収してくれると聞いたことがあります。
web初心者としてはフロントエンドとバックエンドでフレームワークが組み合わせることができるんだ！
と少し感動です。

なんで継承するレイアウトを作るのか

チュートリアルでは共通のサイドバーがあるみたいです。
実際は毎回レンダリングしているけど、サイドバーに表示されているものは一緒ってやつですね。

最後に継承後に置き換えるものを書いて終了のようです。

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
              省略...

        //contentを他のテンプレートで置き換える
        div(class='col-sm-10')
          block content

サイドバーの.CSS

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

つづく