includeと継承の違い

includeは「丸々コピー」
継承は「部分的に変更」
　→title、discription、keywordsをページ毎に変更したい場合有効

まずは前回のinclude同様、丸々コピーしてみる。

現在の階層構造

webpack-tutorial
├dist/
|   ├──css/
|   |   └──style.css
|   ├──js/
|   |   └──bundle.js
|   └──index.html
|
├node_modules/
├src/
|   ├──images/
|   ├──js/
|   |   ├──index.js
|   |   └──sub.js
|   ├──scss/
|   |   └──style.scss
|   └──templates/
|   |   ├──_header.pug //追加
|   |   ├──_headerNav.pug
|   |   ├──index.pug
|       ├──index.html
|   |   └──menu.pug
|
├package-lock.json
├package.json
└webpack.config.js

_header.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
    body 
        include _headerNav.pug
        block mainContent

index.pug

//- ここから変更
extends _header.pug
block mainContent
    //- ここまで変更
    h1 webpackチュートリアル
        span (SCSSを追加)
    img(src="/src/images/mountain.jpg", alt="")
    img(src="/src/images/sea.jpg", alt="")

menu.pug

//- ここから変更
extends _header.pug
block mainContent
    //- ここまで変更
    h1 メニュー
        span (SCSSを追加)
    img(src="/src/images/mountain.jpg", alt="")
    img(src="/src/images/sea.jpg", alt="")

webpackを起動後、ブラウザ確認

ちゃんとheaderナビも表示されているのを確認。

各ファイルを変更

各ファイルのtitle,description,keywordsを変更してみる。

「titile」と「description,keywords」の書き方が違うので注意！

_header.pug

doctype html

//- ここから追加
block metaTags
    - var description = ''
    - var keywords = ''
    - var title = '';
//- ここまで追加

html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        meta(name="description", content=description)
        meta(name="keywords" content=keywords)
        title #{title}
    body 
        include _headerNav.pug
        block mainContent

index.pug

extends _header.pug

//- ここから追加
block metaTags 
    - var description = 'トップページのディスクリプションです'
    - var keywords = 'サイト, トップ, webpack'
    - var title = 'トップページ'
//- ここまで追加

block mainContent
        h1 webpackチュートリアル
            span (SCSSを追加)
        img(src="/src/images/mountain.jpg", alt="")
        img(src="/src/images/sea.jpg", alt="")

menu.pug

extends _header.pug

//- ここから追加
block metaTags 
    - var description = 'メニューページのディスクリプションです'
    - var keywords = 'サイト, メニュー, webpack'
    - var title = 'メニューページ'
//- ここまで追加

block mainContent
        h1 メニュー
            span (SCSSを追加)
        img(src="/src/images/mountain.jpg", alt="")
        img(src="/src/images/sea.jpg", alt="")

webpackを起動

npm run build

ブラウザで確認

各ページでtitle, description, keywordsが変更されている。