Django 템플릿 상속

Ethan·2023년 12월 27일

django

목록 보기

13/28

페이지의 수가 늘어남에 따라 중복되는 코드를 모두 입력하는 번거로움을 해결하기 위해 장고의 템플릿 상속 기능을 사용하는 방법을 설명한다.

템플릿 상속

템플릿 상속은 block과 extends 템플릿 태그를 통해 사용할 수 있다.

{% block %}  📌 상속할 블럭을 지정하는 템플릿 태그
{% extends %}  📌 상속받은 부모 템플릿을 불러오는 템플릿 태그

부모 템플릿 생성

기존에 작성한 index.html과 같은 디렉토리에 부모 템플릿으로 지정할 base.html 파일을 생성한다.

📂ABC
    📄manage.py
    📄db.sqlite3
    📂ABC
        📄__init__.py
        📄settings.py
        📄urls.py
        📄wsgi.py
    📂APP1
    	📂static  
        	📂APP1  
            	📂css  
                	📄styles.css  
                📂fonts  
                📂images  
                	📄flower.jpg  
    	📂templates  
        	📂APP1
            	📄base.html  📌생성한 부모 템플릿
            	📄index.html 📌기존 템플릿
        📂migrations
        📄__init__.py
        📄admin.py
        📄apps.py
        📄models.py
        📄tests.py
        📄views.py
        📄urls.py

부모 템플릿 작성

index.html 템플릿에 있는 내용을 모두 잘라 부모 템플릿에 복사한다.

# 부모 템플릿(base.html)

<!DOCTYPE html>
<html>
<head>
  <title>제목</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="header"> 오늘의 소식 </div>
  <div> 2023년 12월 26일 </div>
  <div class="container">
    <h2>평화로운 마을의 아침</h2>
    <img src="images/flower.jpg">
    <p>
      어느 평화로운 마을의 이른 아침, 새들의 지저귐이 부드럽게 울려 퍼지며,<br>
      햇살이 창문을 통해 스며들어 온 방을 환하게 밝혀줍니다.<br>
      사람들은 잠에서 깨어나 하루를 시작하고, 아이들은 학교로 가는 길에 즐겁게 뛰어놉니다.<br>
      마을 곳곳에서는 사람들이 서로 인사를 나누며, 작은 가게들은 아침 준비를 시작합니다. <br>
      모든 것이 평온하고, 마음은 기쁨으로 가득 차 있습니다.
    </p>
  </div>
</body>
</html>

block 영역 지정

상속하지 않을 내용을 부모 템플릿에서 삭제하고, block 영역을 지정한다. 나는 body 태그의 날짜를 표기하는 div 태그와 container 클래스를 가진 div 태그를 block 영역으로 지정했다.

# 부모 템플릿(base.html)

<!DOCTYPE html>
<html>
<head>
  <title>제목</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="header"> 오늘의 소식 </div>
  <div>  
  	{% block date-block %}  📌내용을 삭제하고 block 영역 지정
    {% endblock date-block %}
  </div>
  <div class="container">  
  	{% block container %}  📌내용을 삭제하고 block 영역 지정
    {% endblock container %}
  </div>
</body>
</html>

자식 템플릿 작성

부모 템플릿으로부터 상속받는 내용은 모두 삭제하고, 부모 템플릿을 지정하는 템플릿 태그 extends 를 작성한다.

# 자식 템플릿(index.html)

{% extends './base.html' %}  📌base.html를 부모 템플릿으로 지정하는 템플릿 태그

📌 .은 현재 폴더라는 뜻이며 ./base.html 은 현재 폴더에서 base.html을 가르킴

자식 템플릿 block 작성

부모 템플릿으로부터 상속받지 않는 date-block과 container block 영역을 채운다.

{% block date-block %}  📌부모 템플릿의 date-block 영역
	<div>2023년 12월 26일</div>
{% endblock date-block %}

{% block container %}  📌부모 템플릿의 container 영역
	<div>
      <h2>평화로운 마을의 아침</h2>
      <img src="images/flower.jpg">
      <p>
        어느 평화로운 마을의 이른 아침, 새들의 지저귐이 부드럽게 울려 퍼지며,<br>
        햇살이 창문을 통해 스며들어 온 방을 환하게 밝혀줍니다.<br>
        사람들은 잠에서 깨어나 하루를 시작하고, 아이들은 학교로 가는 길에 즐겁게 뛰어놉니다.<br>
        마을 곳곳에서는 사람들이 서로 인사를 나누며, 작은 가게들은 아침 준비를 시작합니다. <br>
        모든 것이 평온하고, 마음은 기쁨으로 가득 차 있습니다.
      </p>
	</div>
{% endblock container %}