장고에서는 템플릿내 공통 부분에 대해 공통 모듈을 만들고 이를 상속하여 사용할 수 있다.
공통 모듈내에서 상속 받을 블럭이 들어갈 부분에 대해서
{% block blockname %}
{% endblock %}
로 지정해 주고
이를 상속받은 모듈에서는
{% extend "공통모듈.html" %}
{% block blockname %}
..... 소스
{% endblock %}
로 작성하면 공통 모듈을 상속 받아서 블럭(block)으로 처리 가능하다
사례)
common.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> -->
<link rel="stylesheet" href="/static/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"
integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js"
integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
{% block contents %}
{% endblock %}
</div>
</body>
</html>
login.html
{% extends "common.html" %}
{% block contents %}
<div class="row mt-5">
<div class="col-12 text-center">
<h1>로그인</h1>
</div>
</div>
<div class="row mt-5">
<div class="col-12">
{{ error }}
</div>
</div>
<div class="row mt-5">
<div class="col-12">
<form method="POST" action="">
{% csrf_token %}
{% for field in form %}
<div class="form-group">
<labl for="{{ field.id_for_label }}">{{ field.label }}</labl>
<input type="{{ field.field.widget.input_type }}" class="form-control" id="{{ field.id_for_label }}"
placeholder="{{ field.label }}" name="{{ field.name }}">
</div>
{% if field.errors %}
<span style="color: red">{{ form.errors }} </span>
{% endif %}
{% endfor %}
<button class="btn btn-primary">로그인</button>
</form>
</div>
</div>
</div>
{% endblock %}
'프로그래밍 > Python' 카테고리의 다른 글
| [Django] 게시판 페이지 네비게이션(page navigation) (0) | 2021.01.04 |
|---|---|
| [Django] -Start-Code : 게시판 만들기 (0) | 2021.01.03 |
| [Django] Form 필드의 기본 유효성 오류 메시지 변경하기 (0) | 2021.01.03 |
| [Django] 장고에서 패스워드 체크 함수 check_password 사용하기 (0) | 2021.01.03 |
| [Django] HTML 템플릿내에서 Form Class의 is_valid호출시 오류를 받아 처리하기 (0) | 2021.01.03 |
