템플릿 확장이란?
템플릿 확장(template extending)은 사이트 안의 서로 다른 페이지에서 HTML의 일부를 재사용할 수 있는 것이다.
이것을 활용하면 모든 파일마다 같은 내용을 반복해서 입력할 필요가 없고, 수정할 부분이 생겼을 때, 딱 한번만 수정하면 된다.
기본 템플릿 생성하기
blog/templates/blog/에 base.html 파일을 만든다.
xblog└───templates└───blogbase.htmlpost_list.html
그 다음 post_list.html에 있는 모든 내용을 base.html에 입력한다.
{% load static %}<html> <head> <title>Django Girls blog</title> <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"> <link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="{% static 'css/blog.css' %}"> </head> <body> <div class="page-header"> <h1><a href="/">Django Girls Blog</a></h1> </div> <div class="content container"> <div class="row"> <div class="col-md-8"> {% for post in posts %} <div class="post"> <div class="date"> {{ post.published_date }} </div> <h1><a href="">{{ post.title }}</a></h1> <p>{{ post.text|linebreaksbr }}</p> </div> {% endfor %} </div> </div> </div> </body></html>그 다음 base.html의 <body> 태그 내의 내용을 다음과 같이 수정한다.
<body> <div class="page-header"> <h1><a href="/">Django Girls Blog</a></h1> </div> <div class="content container"> <div class="row"> <div class="col-md-8"> {% block content %} {% endblock %} </div> </div> </div></body>{% block content %}{% endblock %}위 코드는 템플릿 태그 {% block %}으로 HTML 내에 들어갈 수 있는 공간을 만든 것이다. 이제부터 base.html을 확장해 다른 템플릿에서 가져다 쓸 수 있다.
이제 blog/templates/blog/post_list.html 파일을 다시 열고 {% for post in posts %}부터 {% endfor %}까지만 남기고 모든 내용을 지운다.
xxxxxxxxxx{% for post in posts %} <div class="post"> <div class="date"> {{ post.published_date }} </div> <h1><a href="">{{ post.title }}</a></h1> <p>{{ post.text|linebreaksbr }}</p> </div>{% endfor %}base.html 파일의 콘텐츠 블록에 포함하게 하기 위해서 {% block content %}와 {% endblock %} 사이에 모든 코드를 넣는다.
{% block content %} {% for post in posts %} <div class="post"> <div class="date"> {{ post.published_date }} </div> <h1><a href="">{{ post.title }}</a></h1> <p>{{ post.text|linebreaksbr }}</p> </div> {% endfor %}{% endblock %}이제 두 템플릿을 연결하기 위해서 post_list.html의 맨 윗줄에 다음과 같은 코드를 추가한다.
{% extends 'blog/base.html' %}{% block content %} {% for post in posts %} <div class="post"> <div class="date"> {{ post.published_date }} </div> <h1><a href="">{{ post.title }}</a></h1> <p>{{ post.text|linebreaksbr }}</p> </div> {% endfor %}{% endblock %}마지막으로 서버를 실행하고 페이지를 확인해본다.
'Python > Django' 카테고리의 다른 글
| 장고 걸즈 튜토리얼 따라하기 14 - 장고 폼 (0) | 2019.01.07 |
|---|---|
| 장고 걸즈 튜토리얼 따라하기 13 - 어플리케이션 확장 (0) | 2019.01.05 |
| 장고 걸즈 튜토리얼 따라하기 11 - CSS (0) | 2019.01.03 |
| 장고 걸즈 튜토리얼 따라하기 10 - 장고 템플릿 (0) | 2019.01.02 |
| 장고 걸즈 튜토리얼 따라하기 9 - 템플릿 동적 데이터 (0) | 2018.12.27 |