Django 템플릿 확장하기

Django

Django 템플릿 확장하기

nyanguk 2021. 1. 20. 11:14

장고는 템플릿 확장기능을 가지고 있다. post_list.html의 양식을 내용만 바꿔서 사용하고자 할때 유용하게 쓰일 수 있다.

먼저 base.html을 만들고 post_list.html 의 내용을 복사하여 붙여넣기 한후 for 구문을 삭제 한 후 아래코드를 를 추가한다

{% block content %}
{% endblock %}

<!-- blog/templates/blog/post_list.html -->
{% load static %}
<html>
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Roboto&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <title>nyanguk의 Django 튜토리얼</title>
    </head>
    <body>
        <div class = title-1>
            <h1> <a href="">nyanguk의 블로그</a></h1>
        </div>
        <div class = post>
            {% block content %}
            {% endblock %}
        </div>
    </body>
</html>

블록을 생성하여 base.html 안에서는 블록을 끼울자리를, 여러 다른 html파일 에서는 블록에 각 파일마다 다른 내용을 넣어주면 base.html에 내용만 바뀌어서 출력되게 된다.

자 그럼 post_list.html파일을 바꿔보자

가장먼저 base.html과 연동하기 위해서 코드 가장 위에 {% extends 'blog/base.html' %} 을 추가하고 post_list기능을 수행하는 핵심적인 부분인 for문 즉, 블록에 들어갈 부분만 제외하고 모두 없애주면 아래와 같이 코드가 완성된다.

이때 블록임을 표시해주는 {% block content %} {% endblock %} 쌍으로 감싸주는 것을 잊지말자!

{% extends 'blog/base.html' %}
{% block content %}
    {% for post in posts %}
        <div>
            <p>created: {{ post.created_date }}</p>
            <h1><a href="">{{ post.title }}</a></h1>
            <p>{{ post.text|linebreaksbr }}</p>
            <div class="line">
                <p>---------------------------------------------------------------------</p>
            </div>    
        </div>
    {% endfor %}
{% endblock %}

base.html 파일이 추가된 이후 다시 runserver를 실행시킨뒤 접속하면 동일한 페이지가 나오는 것을 확인 할수 있다.