blog 애플리케이션에 대한 뷰와 URL 패턴을 작성했다.
URL 패턴은 URL을 뷰에 매핑하고 뷰는 사용자에게 반환되는 데이터를 결정한다.
템플릿은 데이터가 표시되는 방식을 정의하는데, 일반적으로 쟝고 템플릿 언어와 함께 HTML로 작성된다.
애플리케이션에 템플릿을 추가해보자.
blog 애플리케이션 디렉토리 안에 다음 디렉토리와 파일을 생성한다.
templates/
blog/
base.html
post/
list.html
detail.htmlbase.html은 웹사이트의 기본 HTML과 구조를 가지고 컨텐츠를 기본 컨텐츠 영역과 사이드 바로 나눈다.
list.html과 detail.html은 블로그 게시글 목록 및 세부 정보 보기를 렌더링하기 위해 base.html에서 상속된다.
쟝고에는 데이터 표시 방법을 지정할 강력한 템플릿 언어가 있다.
템플릿 태그, 템플릿 변수, 템플릿 필터를 기반으로 한다.
- 템플릿 태그는 템플릿의 렌더링을 제어하며
{% 태그 %}처럼 쓴다. - 템플릿 변수는 템플릿이 렌더링될 때 값으로 대체되며
{{ 변수 }}처럼 쓴다. - 템플릿 필터를 사용하면 표시할 변수를 수정하고
{{ 변수|필터 }}와 같이 표시할 수 있다.
기본 템플릿 만들기
base.html을 수정해 기본 템플릿을 만들어 보자.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static 'css/blog.css' %}" rel="stylesheet" />
</head>
<body>
<div id="content">{% block content %} {% endblock %}</div>
<div id="sidebar">
<h2>My blog</h2>
<p>This is my blog.</p>
</div>
</body>
</html>
{% load static %} 은 INSTALLED_APPS 설정에 포함된 django.contrib.staticfiles 애플리케이션에서 제공하는 정적 템플릿 태그를 로드하도록 한다.
이것을 로드한 후에는 이 템플릿 전체에서 {% static %} 템플릿 테그를 사용할 수 있다.
위 코드에는 두 개의 {% block %} 태그가 있는 것을 볼 수 있는데,
이들은 쟝고에 해당 영역에 블록을 정의한다고 알려준다.
이 템플릿에서 상속된 템플릿은 컨텐츠로 블록을 채울 수 있다.
코드에서는 title이라는 블록과 content라는 블록을 정의했다.
게시물 목록 템플릿 만들기
post/list.html 파일을 편집해 아래와 같이 만들자.
{% extends "blog/base.html"%}
{% block title %} My blog {% endblock %}
{% block content %}
<h1>My Blog</h1>
{% for post in posts %}
<h2>
<a href="{% url 'blog:post_detail' post.id %}">
{{post.title}}
</a>
</h2>
<p class="date">
Published {{ post.publish }} by {{ post.author }}
</p>
{{ post.body|truncatewords:30|linebreaks}}
{% endfor %}
{% endblock %}
{% extends %} 템플릿 태그를 사용하면 blog/base.html 템플릿을 상속받도록 할 수 있다.
그 다음 base.html의 title과 content 블록을 이 컨텐츠로 채운다.
게시물들을 순회하며 게시글들의 상세 페이지로 이동하기 위한 URL 링크를 포함한 정보들을 표시한다.
링크의 URL은 쟝고에서 제공하는 {% url %} 템플릿 태그를 사용해 구성했다.
이 템플릿 테그를 사용하면 URL을 이름을 가지고 동적으로 구성할 수 있다.
blog 네임스페이스에서 post_detail의 URL을 참조하기 위해서는 blog:post_detail과 같이 사용하면 된다.
그리고 필수 매개변수인 post.id를 전달해 해당 게시물의 URL을 작성한다.
게시물 body에 두 가지의 템플릿 필터를 적용했는데,
truncatewords는 값을 지정된 단어 수로 자르고 linebreaks는 출력을 HTML 줄 바꿈으로 변환한다.
이렇게 중첩해 템플릿 필터를 연결할 수 있는데, 각 템플릿 필터는 이전 필터에서 생성된 출력에 적용된다.
게시글 목록 템플릿 확인하기
이제 http://localhost:8000/blog/ 에 접속해보자.
사진과 같이 Published인 게시글들이 목록에 표시되게 된다.
게시글 상세 템플릿 만들기
다음으로 post/detail.html을 작성해 게시글 상세 템플릿을 만들어 보자.
{% extends "blog/base.html" %} {% block title %}{{post.title}}{% endblock %}
{% block content %}
<h1>{{post.title}}</h1>
<p class="date">
Published {{post.publish}} by {{post.author}}
</p>
{{post.body|linebreaks}}
{% endblock %}
작성한 후 목록의 게시글 제목 중 하나를 클릭하면 게시글의 상세 정보를 볼 수 있다.
URL을 유심히 살펴보면 localhost:8000/blog/3/ 과 같이 자동으로 생성된 게시글 ID가 있다.
