728x90
반응형
템플릿 상속은 이전 포스트인 nunjucks와 이어진다.
지난번에 생성한 template 하위 요소에 layout 폴더를 생성하고
base.html 파일을 생성한다.
생성한 파일에 아래와 같이 코딩한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{ title }}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="padding-top:100px;">
{% block content %}{% endblock %}
</div>
</body>
</html> 위의 이미지의 {} 안에 수정할 products.html의 파일의 내용이 들어간다.
완료 되었으면 아래의 소스코드를 products.html 파일에 넣어준다.
{% set title = "관리자 리스트" %} <!-- base.html 타이틀에 맵핑 -->
{{ message }} {% extends "layout/base.html" %} <!-- base.html을 불러옴 -->
{% block content -%} <!-- base.html block content에 맵핑 -->
<table class="table table-bordered table-hover">
<tr>
<th>제목</th>
<th>작성일</th>
<th>삭제</th>
</tr>
<tr>
<td>제품 이름</td>
<td>
2020-03-07
</td>
<td>
<a href="#" class="btn btn-danger">삭제</a>
</td>
</tr>
</table>
<a href="/admin/products/write" class="btn btn-default">작성하기</a>
{% endblock %} <!-- base.html endblock에 맵핑 -->이렇게 하면 jQuery나 다른 모듈들을 추가할 때도 base.html에 추가만 해주면 된다.
출처 : 본 포스트는 패스트캠퍼스의 Node 웹 프로그래밍 올인원 패키지 Online의 박준영 강사님의 강의를 보고 직접 정리한 내용입니다.
728x90
반응형
'Javascript > Node' 카테고리의 다른 글
| [node] form(body-parser) (0) | 2020.08.31 |
|---|---|
| [node] 미들웨어(middleWare) (0) | 2020.08.31 |
| [node] View Engine - Nunjucks (0) | 2020.08.26 |
| [node] Express를 사용하여 웹 서버 띄우기(feat. nodemon) (0) | 2020.08.25 |
| [node] npm install하기 (0) | 2020.08.25 |
