最近個人プロジェクトでExpress x ejsを使っています。
viewファイルを作っていて、当然ですけど絶対レイアウト機能を使ったほうが修正も楽だろうと思って調べました。
- express v4.16.3
- ejs v2.5.9
レイアウト機能使用に必要なもの
これだけです
手順
express-ejs-layoutsインストール
$ yarn add express-ejs-layouts Or npm i express-ejs-layouts --save
app.js修正
app変数作成後に、expressLayoutsをrequire、app.useを実行します。
app.js
const app = express();
+ const expressLayouts = require('express-ejs-layouts');
+ app.use(expressLayouts);
layout.ejs作成
ポイントは<%- body %>です。このタグ内にejsファイルの中身が展開されます。
views/layout.ejs
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Layout Page</h1>
<%- body %>
</body>
</html>
個ページごとのejsファイルを作成
views/index.ejs
<h2>index.ejs</h2>
結果
以下のように表示されました。
ソースコードを表示
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Layout Page</h1>
<h2>index.ejs</h2>
</body>
</html>
しっかりとlayoutテンプレートが適用されていることが確認できたかと思います。
これで、テンプレートファイルの共通部分（ヘッダー、フッターとか）は一箇所で管理できますね。
ejs本体にレイアウト機能が無いのは意外でした（過去にはあった？）。
とはいえnpm PKG１つ追加でサクッと実現できました。
みなさんの参考になれば幸いです。