Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
10
Help us understand the problem. What is going on with this article?
@kanye__east

ejsでレイアウト機能を使う

More than 1 year has passed since last update.

最近個人プロジェクトで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>

結果

以下のように表示されました。
ejs-layout.png

ソースコードを表示
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Layout Page</h1>
    <h2>index.ejs</h2>
  </body>
</html>

しっかりとlayoutテンプレートが適用されていることが確認できたかと思います。
これで、テンプレートファイルの共通部分(ヘッダー、フッターとか)は一箇所で管理できますね。

ejs本体にレイアウト機能が無いのは意外でした(過去にはあった?)。
とはいえnpm PKG1つ追加でサクッと実現できました。
みなさんの参考になれば幸いです。

10
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kanye__east
プログラミング、ものづくりが大好きです。 新卒でヤフー→4年で退職→2019/05よりバンクーバー在住のソフトウェアデベロッパー。たまに東南アジアでノマド。 普段は個人開発してProductHuntに投稿したりしています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
10
Help us understand the problem. What is going on with this article?