매번 새로운 app에 html을 처음부터 끝까지 만들 필요 없이 base.html 하나만으로 여러앱에서 사용할 수 있게 만들 수 있다.
구현 방법
1. 프로젝트의 템플릿 디렉터리 설정하기
settings.py 파일에서 TEMPLATES 설정을 확인하거나 수정하여 Django가 템플릿 파일을 올바르게 찾을 수 있도록 합니다.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
# ... some options here ...
},
},
]2. 템플릿 디렉터리에 base.html 생성(load static으로 정적파일 중앙화)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}My Site{% endblock %}</title>
{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">
{% block extrahead %}{% endblock %}
</head>
<body>
<header>
<nav>
<!-- 네비게이션 바 -->
</nav>
</header>
<main>
{% block content %}
<!-- 주요 콘텐츠 영역 -->
{% endblock %}
</main>
<footer>
<!-- 푸터 영역 -->
</footer>
<script src="{% static 'js/main.js' %}"></script>
{% block extrajs %}{% endblock %}
</body>
</html>3. 다른 템플릿에서 `base.html` 상속받기
다른 HTML 템플릿 파일에서 이 `base.html`을 상속하여 사용하고자 할 때는 {% extends "base.html" %} 태그를 사용하고, `base.html`에서 정의한 블록을 오버라이드 할 수 있다.
이 코드는 signup.html 템플릿을 만들었고 base.html 의 기본 레이아웃과 스타일을 가져오는 코드이다.
{% extends "base.html" %}
{% block title %}Signup{% endblock %}
{% block extrahead %}
<!-- 필요하다면 여기에 추가적인 CSS 또는 JS 링크를 넣을 수 있습니다 -->
{% endblock %}
{% block content %}
<div class="signup-container">
<h1>Sign Up</h1>
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Sign up</button>
</form>
</div>
{% endblock %}
{% block extrajs %}
<!-- 필요하다면 여기에 추가적인 자바스크립트 파일을 넣을 수 있습니다 -->
{% endblock %}- 상속받기: {% extends "base.html" %} 태그를 사용하여 base.html을 상속받습니다. 이렇게 하면 base.html에 정의된 HTML 구조와 스타일을 signup.html에서 그대로 사용할 수 있습니다.
- 타이틀 설정: {% block title %}을 통해 페이지의 제목을 설정합니다. 여기서는 "Signup"으로 설정했습니다.
- 콘텐츠 블록: {% block content %}에서는 실제 페이지의 내용을 작성합니다. 여기서는 간단한 회원가입 폼을 구현했습니다. 폼에는 CSRF 토큰이 포함되어 있고, Django의 폼 관리 시스템을 통해 에러 메시지 및 폼 필드를 자동으로 처리할 수 있습니다.
- 폼 제출: <form> 태그의 enctype="multipart/form-data" 속성은 폼이 파일 또는 이미지를 전송할 경우 필요합니다. 이 예시에서는 프로필 이미지를 업로드할 수 있도록 설정되어 있습니다.
- 추가 리소스: {% block extrahead %}와 {% block extrajs %} 블록을 사용하여 필요한 경우 페이지별로 추가적인 CSS나 JavaScript 리소스를 포함시킬 수 있습니다.
이 코드를 사용하여 Django 프로젝트 내에 signup.html 파일을 생성하고, 필요에 따라 추가적인 스타일링이나 기능을 추가할 수 있습니다. 이 방법으로, 웹사이트 전반에 걸쳐 일관된 사용자 인터페이스와 경험을 제공하면서도 각 페이지의 특성에 맞는 유연한 커스터마이징이 가능합니다.
'Django > extends 기능(base.html)' 카테고리의 다른 글
| Django {% load static %}에 관하여.. (0) | 2024.04.25 |
|---|