Template Layout 생성하기
-
header, footer는 동일하게 하고, body부분만 바꾸려고 한다.
-
layout.hbs 생성을 한다.
2. layout.hbs 필요한 내용들을 적어준다.<html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="static/css/style.css" /> <title>Document</title> </head> <body> <h1>It is Hedaer</h1> {{{body}}} {{! body부분은 header와 footer를 제외한 데이터를 넣 을 곳 }} <h1>It is Footer</h1> </body> </html>
- 서버를 실행하는 파일에 res.render을 이용한다.
index.hbs 파일에 있는 변수명 body에 데이터 입력app.get("/", (rea, res) => { res.render("index", { body: "body 부분입니다", }); });
-
이렇게 layout.hbs를 이용하면 쉽게 header와 footer를 정의하고 body 부분만 바꾸며 이용할 수 있다.
개발 경험치 쌓는 곳