Handlebars 에서 Partial template 사용하기

author

postNo

status

thumbnail

description

시작하기에 앞서

<a href="https://handlebarsjs.com/guide/" target="_balnk">Handlebars</a>는 Exrepss 와 같은 프레임워크에서 SSR을 위해 사용된다.

또 그 외에도 메일 템플릿을 만들 때 사용할 수 있는데 오늘은 메일 템플릿을 위해 사용할 때 Partial template 사용방법을 기록해두고자 한다.

Partials

Partial 은 html, jsx 등에서 import 하는 동작이라고 생각하면 된다.

<html>
  {{> header }}
  
  ...
  
  {{> footer }}
</html>

이와같은 코드가 있을 수 있다. 여기서 header, footer 는 여러 html 에서 다같이 사용하는 공통 템플릿이다.

handlebar 에서는 include 를 > 를 사용해 넣을 수 있다.

header, footer 들의 Partial 을 사용하기 위해서는 우선 코드레벨에서 Partial 등록을 해두어야 한다.

Partial 등록

import Handlebars from 'Handlebars';

Handlebars.registerPartial('header', Handlebars.compile(fs.readFileSync(path.resolve(__dirname, 'header.hbs'), 'utf-8')));

다른 예제들을 찾아보면 두번 째 param으로 html을 넘겨주는 경우가 있는데.. 이러면 코드 관리가 불편하기때문에 별도의 hbs 파일을 만들고 이렇게 등록해주는게 좋다.

단건으로 예를들면 이렇고, partial 은 보통 한 두 개가 아닐것이므로 이런식으로 처리하기를 추천한다.

import fs from 'fs';
import path from 'path';

import Handlebars from 'handlebars';

const partials: { name: string; path: string }[] = [
  { name: 'header', path: `common/header.hbs` },
  { name: 'footer', path: `common/footer.hbs` },
];

partials.forEach((partial) => {
  Handlebars.registerPartial(
    partial.name,
    Handlebars.compile(fs.readFileSync(path.resolve(__dirname, partial.path), 'utf-8')),
  );
});

참고

<a href="https://handlebarsjs.com/guide/#partials" target="_blank">공식문서</a>