더북(TheBook)

2.4.2 /bye 페이지에 헤더-푸터 레이아웃 적용하기

/bye 페이지에도 똑같이 가운데에 content, 상단에 navigation, 하단에 site info를 넣어 보겠습니다. 단, 같은 방법을 사용하면 너무 길고 비효율적이니 /hi 페이지를 템플릿화해서 사용하겠습니다. ‘템플릿화한다’는 말은 코드를 하나의 틀로 만들어 변수화한다는 말입니다. 예를 들어, goodbye.mustache 파일의 콘텐트 영역만 남기고 그 위와 아래 코드를 싹 지운 후 위에는 {{>header}}, 아래는 {{>footer}}로 처리하는 식입니다.

templates/goodbye.mustache

이 부분을 {{>header}}로 처리

<html> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
          user-scalable=no, initial-scale=1.0, 
          maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>{{nickname}}님, 다음에 또 만나요!</h1>

이 부분을 {{>footer}}로 처리

</body> 
</html>
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.