주뇽's 저장소

2. Include, Extends, Block 본문

웹개발/Django

2. Include, Extends, Block

뎁쭌 2023. 8. 19. 00:11
728x90
반응형

include와 extends는 템플릿 시스템의 중요한 개념이다.

1. Include

include는 템플릿에서 다른 템플릿 파일을 포함시키는 방법을 제공한다. 이를 통해 템플릿 파일 간의 재사용성을 높일 수 있다. 예를 들어, 같은 페이지의 여러 부분에서 동일한 HTML 코드를 사용해야 할 때 유용하다.

예시: 다음은 header.html 파일과 footer.html 파일을 page.html 파일에 포함시키는 예제이다.

header.html

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>

footer.html

<footer>
    &copy; 2023 My Website
</footer>
</body>
</html>

page.html

{% include "header.html" %}

<h1>Welcome to My Website</h1>
<p>This is the content of the page.</p>

{% include "footer.html" %}

{% include "filename" %} 문법을 사용하여 다른 템플릿 파일을 포함할 수 있다. 위 예제에서는 header.html과 footer.html 파일이 page.html 파일에 각각 포함된다.

2. Extends

extends는 템플릿에서 기본 템플릿을 확장하고, 추가적인 내용이나 블록을 삽입할 수 있게 해준다. 이를 통해 웹 페이지의 공통된 레이아웃을 정의하고, 각 페이지의 고유한 부분을 포함시킬 수 있다.

예시: 다음은 base.html 파일을 기본 템플릿으로 사용하고, page.html 파일에서 내용을 확장하는 예제이다.

base.html

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Default Title{% endblock %}</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about/">About</a></li>
            <li><a href="/contact/">Contact</a></li>
        </ul>
    </nav>

    {% block content %}{% endblock %}

    <footer>
        &copy; 2023 My Website
    </footer>
</body>
</html>

page.html

{% extends "base.html" %}

{% block title %}Page Title{% endblock %}

{% block content %}
    <h1>Welcome to My Page</h1>
    <p>This is the content of the page.</p>
{% endblock %}

{% extends "filename" %} 문법을 사용하여 기본 템플릿을 확장하며, {% block %} 태그를 사용하여 기본 템플릿에서 정의한 블록을 덮어쓰거나 확장한다. 위 예제에서는 title과 content 블록을 사용하여 각각 페이지의 제목과 내용을 지정한다.

이렇게 함으로써 extends를 통해 기본 템플릿의 레이아웃을 재사용하면서 각 페이지마다 필요한 부분만을 변경하거나 추가할 수 있다.

block은 장고 템플릿 시스템에서 사용되는 중요한 태그로, 템플릿 확장(extends) 시에 부모 템플릿의 블록을 자식 템플릿에서 재정의하거나 확장하는 데 사된다. 이를 통해 템플릿의 일부분을 다른 템플릿에서 변경하거나 추가할 수 있다.

기본적인 block 문법은 다음과 같다.

{% block block_name %}
    ...content...
{% endblock %}

여기서 block_name은 블록의 이름을 나타냅다. 부모 템플릿에서 이 블록을 정의하고, 자식 템플릿에서 이 블록을 확장하거나 재정의할 수 있다.

부모 템플릿에서 블록을 정의하는 예시:

<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Default Title{% endblock %}</title>
</head>
<body>
    {% block content %}
    {% endblock %}
</body>
</html>

자식 템플릿에서 블록을 확장하는 예시:

<!-- page.html -->
{% extends "base.html" %}

{% block title %}Page Title{% endblock %}

{% block content %}
    <h1>Welcome to My Page</h1>
    <p>This is the content of the page.</p>
{% endblock %}

자식 템플릿에서 블록을 확장하거나 재정의함으로써, 부모 템플릿의 해당 블록을 수정하거나 대체할 수 있다. 이를 통해 웹 페이지의 레이아웃을 재사용하면서도 각 페이지마다 다른 내용을 표현할 수 있다.

위 문법을 이용하여 base.html 수정

  • head.html
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Full Stack Project With Django</title>
</head>
  • header.html
<div style="height: 10rem; background-color:aqua; border-radius: 1rem; margin: 2rem">
        
</div>
  • footer.html
<div style="height: 10rem; background-color:aqua; border-radius: 1rem; margin: 2rem">
        
</div>
  • base.html
<!DOCTYPE html>
<html lang="ko">
{%include  'head.html'%}

<body>
   
    {%include  'header.html'%}
    {%block content%}
    {%endblock%}
    {%include  'footer.html'%}
    
</body>
</html>

위 뼈대를 토대로 accountApp에 templates/accountapp 폴더 생성 후 extend + blcok

  • accountapp/templates/accountapp/hello_world
{% extends 'base.html' %}

{%block content%}
<div style="height: 20rem; background-color:aqua; border-radius: 1rem; margin: 2rem">
        TEST
</div>
{% endblock %}
  • accountapp/view.py
from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
def hello_world(request):
    return render(request, "accountapp/hello_world.html")

저작자표시

'웹개발 > Django' 카테고리의 다른 글

3. Style, 구글 폰트를 통해 Header, Footer 꾸미기  (0) 2023.08.19
1. Django Tutorial  (0) 2023.08.19
0. Full Stack Project with Django  (0) 2023.08.17
'웹개발/Django' Related Articles more