HTML 파일을 포함하려면 <%- include(파일 경로, 데이터) %>을 하면 됩니다.
body.ejs 파일 내용입니다.
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<%- include('header') %>
<div>내용입니다.</div>
<%- include('footer', { category: 'Node.js' }) %>
</body>
</html>
header.ejs 파일 내용입니다.
<header>헤더입니다.</header>
footer.ejs 파일 내용입니다.
<footer>푸터입니다. 변수: <%= category %></footer>
아쉽게도 EJS는 Pug의 layout과 block은 지원하지 않습니다.
이 기능을 사용하려면 express-ejs-layouts 패키지를 설치해야합니다.
Express-generator가 기본적으로 생성한 Pug 파일을 EJS로 바꾸면 다음과 같습니다.
views/index.ejs
<html>
<head>
<title><%= title %></title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
views/error.ejs
<html>
<head>
<title></title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>
</body>
</html>
head 태그 같이 중복되는 부분은 나중에 별도의 파일로 분리하여 include로 넣으면 됩니다.
Pug와 EJS 중 취향에 맞는 템플릿으로 진행하면 됩니다.
보통 HTML에 크게 벗어나고 싶지 않다면 EJS를, 깔끔한 문법을 원한다면 Pug를 사용합니다.
Pug와 EJS 외에도 Nunjucks, Hogan, Dust, Twig, Vash 등의 템플릿 엔진이 있습니다.
하지만 문법만 다르고 핵심 기능은 다 비슷합니다.
다른 것도 살펴본 후 취향에 맞는 템플릿 엔진을 사용하기 바랍니다.
이 책은 실습 시 Pug를 사용합니다.