Pugのextendsとblockを使って、テンプレートの継承を試してみます。
サンプルコード
gulpfile.jsとディレクトリ構造は以下のようになっています。
gulpfile.js
var gulp = require('gulp'),
pug = require('gulp-pug');
gulp.task('pug', function() {
gulp.src(
['./_pug/**/*.pug', '!./_pug/**/_*.pug']
)
.pipe(pug({
pretty: true,
basedir: '_pug'
}))
.pipe(gulp.dest('./'))
});
- _pug
- _include
- _layout.pug
- _head.pug
- _header.pug
- _footer.pug
- default.pug
- index.pug
- add.pug
- _include
- gulpfile.js
_includeディレクトリ内がインクルードして使用するファイル群で、default.pugやindex.pug、add.pugが各ページ用のファイルになります。
_layout.pugを設定して、default.pugでインクルードしてみます。
_layout.pug
doctype html
html(lang="ja")
block head
head
meta(charset="utf-8")
title デフォルトのタイトルです。
body
block header
header.header
p.logo デフォルトのヘッダーです。
block content
.content
p デフォルトのコンテンツです。
block footer
footer.footer
p デフォルトのフッターです。
「block 〇〇」の中身はテンプレートを継承するファイル(今回の場合、default.pugやindex.pug、add.pug)で上書きすることができます。
上書きしない場合、_layout.pugで設定している内容が表示されます。
default.pugでblockを上書きしないで継承させてみます。
default.pug
extends /_include/_layout.pug
テンプレートを継承するにはextendsを使用します。
HTMLにコンパイルすると、以下のように_layout.pugで設定した内容で生成できました。
default.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>デフォルトのタイトルです。</title>
</head>
<body>
<header class="header">
<p class="logo">デフォルトのヘッダーです。</p>
</header>
<div class="content">
<p>デフォルトのコンテンツです。</p>
</div>
<footer class="footer">
<p>デフォルトのフッターです。</p>
</footer>
</body>
</html>
次にindex.pugで_layout.pugを継承して、blockを上書きしてみます。
index.pug
extends /_include/_layout.pug
block head
include /_include/_head.pug
block header
include /_include/_header.pug
block content
.content
h1.ttl ページタイトル
block footer
include /_include/_footer.pug
blockを上書きする場合、extendsで継承の指定をした後でblockを定義します。
block内でincludeを使って別ファイルをインクルードすることも可能です。
block内でインクルードしている_head.pug、_header.pug、_footer.pugは以下のように指定します。
_head.pug
head meta(charset="utf-8") link(rel="stylesheet", href="/css/style.css") title テストページ
_header.pug
header.header p.logo サイト名
_footer.pug
footer.footer p フッターです。
HTMLにコンパイルすると、以下のように生成できました。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/style.css">
<title>テストページ</title>
</head>
<body>
<header class="header">
<p class="logo">サイト名</p>
</header>
<div class="content">
<h1 class="ttl">ページタイトル</h1>
</div>
<footer class="footer">
<p>フッターです。</p>
</footer>
</body>
</html>
blockは上書きだけではなく、追加することもできます。
追加する場合はappendかprependを使用します。
add.pug
extends /_include/_layout.pug block prepend header p.txt このページはadd.pugで作成しています。 block append footer script(src='/js/add.js')
appendの場合はblockの最後に追加、prependの場合はblockの先頭に追加になります。
HTMLにコンパイルすると、以下のように生成できました。
add.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>デフォルトのタイトルです。</title>
</head>
<body>
<p class="txt">このページはadd.pugで作成しています。</p>
<header class="header">
<p class="logo">デフォルトのヘッダーです。</p>
</header>
<div class="content">
<p>デフォルトのコンテンツです。</p>
</div>
<footer class="footer">
<p>デフォルトのフッターです。</p>
</footer>
<script src="/js/add.js"></script>
</body>
</html>
【参考サイト】
コメントが承認されるまで時間がかかります。