node/express , EJSでextend のようなテンプレート指定方法 #node #express #javascript

■ 概要:

前のnode/express 関連で、
レイアウト関連となり。ejs 親子テンプレート構成の指定等となります。

 ・調べたところ。routerから res.renderする時の。ejs指定の。親テンプレートを
 各画面(画面グループ)等で、個別に変更できないようでしたので。対策方法を調べてみました。
 間違いがあれば。ご指摘下さい

検討内容ですが。
・案1、画面ejs(子) から、共通ヘッダ等の親レイアウトを、includeする
・案2、 親レイアウトに、画面ejsのファイルを渡して。includeする

■ 環境

node 14
express
ejs 2.6.2
express 4.16.1

■ 参考の設定

■ 準備など

app.js
・ express-ejs-layouts を、使用している場合。設定を消しておき
 layout.ejs が。適用されないように修正しておきます

//const expressLayouts = require('express-ejs-layouts');

//app.use(expressLayouts);

■ 案1、画面ejs(子) から、共通ヘッダ等の親レイアウト

routes/index.js, 通常のrenderから、ejsを呼びます

router.get('/', function(req, res, next) {
   try{
       res.render('index', { 
           msg: "hoge"
       });
   } catch (e) {
       console.log(e);
   }  
});

views/index.ejs

head, foot を includeで、読込みます

<!-- head -->
<%- include("layout/head", null ) %>
<!-- body --->
<h1>Welcome</h1>
<hr />
<div>
    <%= msg %>
</div>
<!-- foot -->
<%- include("layout/foot", null ) %>

・head

<!DOCTYPE html>
<html>
<head>
		<h3>Head - 1</h3>
</head>
<body>
<hr />  

・foot

<hr />
<div>
	<h3>Foot - 1</h3>
	<hr />
</div>
</body>
</html>

■ 案2、 親レイアウトに、画面ejsのファイルを渡す

・routes/index.js, 追加する親テンプレートを作成し、
render から、呼びます
 画面ejsは、 layout_name に設定してファイル名を渡します。

router.get('/test3', function(req, res, next) {
   try{
       var params = { msg: "hoge "}
       res.render('layout_base', { 
           layout_name: 'test1', params: params
       });
   } catch (e) {
       console.log(e);
   }  
});

・layout_base.ejs

layout_nameで指定 ejsをさらに読込, params変数を渡す

<!DOCTYPE html>
<html>
<head>
	<title>Express app</title>
   <div>
       <h3>Head - 2</h3>
       <hr />
   </div>
</head>
<body>    
<div>
   <div class="container">
       <%- include(layout_name, params ) %>
   </div>
</div>
<div>
   <br />
   <hr />
   <h3>Foot - 2</h3>
</div>
</body>
</html>

・test1.ejs

<h1>Test1</h1>
welcome, 111
<br />
msg : <%= params.msg %>

■ まとめ
個別に、カスタム指定の親テンプレートを指定可能で
デザイン、レイアウトを変更できますが

・案1 は、head, footの2種類の、ejs読込設定が必要
・案2、render時に、親ejs, 画面ejsの指定が必要
 
どちらも。コード量が多めになり
シンプルではない指定方法かと思いました。。
後日。別方法があれば、追記したいと思います



この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
1
はじめまして knaka0209 です。knaka Tech-Blogを書いています。 フリーのエンジニアで。普段はIT系の作業 空き時間に、IoTやAIによるデータ分析予測とか勉強しています。 https://kuc-arc-f.com