Colin's Blog
[파이썬][Django] 템플릿 상속 및 확장 방법과 예제

Django에서 템플릿 상속과 확장을 사용하여 웹 페이지의 공통 레이아웃을 만들고 재사용하는 방법을 설명하겠습니다. 템플릿 상속은 중복을 줄이고 유지보수를 쉽게 하기 위한 강력한 기능 중 하나입니다.

템플릿 상속

  1. 기본 템플릿 생성:

    먼저 기본 템플릿(부모 템플릿)을 만듭니다. 이 템플릿은 공통 레이아웃을 정의하고, 다른 템플릿에서 확장됩니다. 예를 들어, base.html을 다음과 같이 만들 수 있습니다.

<pre>
<code>

<!DOCTYPE html>
    <html>
    <head>
        <title>{% block title %}Default Title{% endblock %}</title>
    </head>
    <body>
        <header>
            <h1>My Website</h1>
        </header>
        <nav>
            <!-- Navigation menu -->
        </nav>
    
        <div class="content">
            {% block content %}{% endblock %}
        </div>
    
        <footer>
            &copy; 2023 My Website
        </footer>
    </body>
    </html>

    위의 템플릿은 `{% block %}` 태그를 사용하여 블록을 정의합니다. 이 블록은 자식 템플릿에서 확장됩니다.

</code>
</pre>
  1. 자식 템플릿 생성:

    
    다른 템플릿에서 상속하려면 자식 템플릿을 만듭니다. 자식 템플릿은 `{% extends '부모_템플릿.html' %}` 문을 사용하여 부모 템플릿을 지정하고, 필요한 블록을 오버라이드(재정의)합니다.



예를 들어, `child.html`을 다음과 같이 만들 수 있습니다.

<pre>
<code>

{% extends 'base.html' %}
    
    {% block title %}Custom Title{% endblock %}
    
    {% block content %}
        <h2>Welcome to my website!</h2>
        <p>This is the content of the child template.</p>
    {% endblock %}

    이 템플릿은 `base.html`을 확장하고, `{% block title %}`과 `{% block content %}`를 오버라이드합니다.

</code>
</pre>

  1. 뷰 함수 설정:

    뷰 함수에서는 자식 템플릿을 렌더링합니다.

from django.shortcuts import render
    
    def my_view(request):
        return render(request, 'child.html')

위의 예제에서 `child.html` 템플릿이 렌더링됩니다.

이제 base.html 템플릿은 웹 사이트의 모든 페이지에서 공통적으로 사용되는 레이아웃을 정의하고, child.html과 같은 자식 템플릿은 공통 레이아웃을 상속하고 컨텐츠를 추가할 수 있습니다.

템플릿 블록 오버라이드



위의 예제에서 `{% block %}` 태그를 사용하여 템플릿 블록을 오버라이드했습니다. 자식 템플릿에서 블록을 정의하면 해당 블록은 부모 템플릿에서 선언한 내용으로 대체됩니다. 이것은 템플릿을 확장하여 컨텐츠를 추가하거나 수정하는 데 사용됩니다.

템플릿 상속과 블록 오버라이드를 통해 Django에서 일관된 디자인과 레이아웃을 쉽게 구현할 수 있으며, 코드 재사용과 유지보수가 향상됩니다.

© 2018 Colin. All rights reserved.