블로그 앱 만들기 ④ "개발 코딩하기 - 템플릿 코딩하기" with Django

⑤ 템플릿 코딩하기

 

블로그 앱의 포스트 리스트 및 포스트 상세 내용을 화면에 보여주는 템플릿 파일을 코딩하는 것이다.

• post_all.html

• post_detail.html

• post_archive.html

• post_archive_year.html

• post_archive_month.html

• post_archive_day.html

post_all.html : 포스트 리스트를 보여주는 html

<h1>Blog List</h1>
<br>

{% for post in posts %}
	<h3><a href='{{post.get_absolute_url}}'>{{post.title}}</a></h3>
	{{ post.modify_dt|date:"N d, Y"}}
	<p>{{ post.description }}</p>
{% endfor %}

<br>

<div>
	<span>
		{% if page_obj.has_previous %}
			<a href="?page={{page_obj.previous_page_number}}">PreviousPage</a>
		{% endif %}

		Page {{page_obj.number}} of {{page_obj.paginator.num_pages}}

		{% if page_obj.has_next %}
			<a href="?page={{page_obj.next_page_number}}">NextPage</a>
		{% endif %}
	</span>
</div>

 

★ 템플릿에서 URL 추출 함수

템플릿 파일에서 URL을 추출하는 문법은 2가지가 있다. get_absolute_url() 메서드를 호출하는 방법과 {% url %} 템플릿 태그를 사용하는 방법이다.

<a href="{{post.get_absolute_url}}">{{post.title}}</a>
<a href="{% url 'blog:post_detail' post.slug %}">{{post.title}}</a>

동일한 문장이다.

 

post_detail.html : 포스트 내용을 보여주는 html

<h2>{{object.title}}</h2>

<p>
	{% if object.get_previous %}
	<!-- get_previous.get_absolute_url 함수를 지징하는 URL 패턴을 반환한다. -->
	<!-- &laquo; 는 HTML 특수문자 '<<<' 를 의미한다.  -->
	<a href="{object.get_previous.get_absolute_url}" title="View previous post">&laquo;- {{object.get_previous}}</a>
	{% endif %}

	{% if object.get_next %}
	<!-- get_next.get_absolute_url 함수를 지칭하는 URL 패넡을 반환한다. -->
	<!-- &raquo; 는 HTML 특수문자 '>>>'를 의미한다.  -->
	| <a href="{{object.get_next.get_absolute_url}}" title="View next post">{{object.get_next}} -&raquo;</a>
	{% endif %}

</p>

<!-- modify_dt 속성값을 j F Y 로  포맷으로 출력한다. -->
<p>{{object.modify_dt|date:"j F Y"}}</p>
<br>

<!-- linebrearks 템플릿 필터는 \n 을 인식하게 한다. -->
<div>
	{{object.content|linebreaks}}
</div>

★ 장고의 날짜/시간 포맷 문자

장고의 템플릿 필터 date 와 time 을 사용하면 다양한 형식으로 날짜와 시간을 출력할 수 있다.
위에서 사용된 j, F, Y 문자 외에도 다양한 포맷 문자가 있으니, 장고문서를 참고하면된다.

 

post_archive.html : 포스트 리스트를 날짜별로 구분해서 보여주는 html

<h1>Post Archive until {% now "N d, Y" %}</h1>
<ul>
	{% for date in date_list %}
	<li style="display: inline;">
		<!--  Year - YYYY 연도에 작성된 정확하게는 생성되거나 수정된 포스트를 보여주는  URL이 링크되어있다. -->
		<a href="{% url 'blog:post_year_archive'date|date:'Y' %}">Year{{date|date:"Y"}}</a>
	</li>
	{% endfor %}
</ul>
<br>

<div>
	<ul>
		{% for post in object_list %}
		<li>{{post.modify_dt|date:"Y-m-d"}}&nbsp;&nbsp;&nbsp;
			<a href="{{ post.get_absolute_url }}"><strong>{{post.title}}</strong></a>
		</li>
		{% endfor %}
	</ul>
</div>

 

post_archive_year.html : "Year-2019" 링크를 클릭했을 때, 나타나는 html

<h1>Post Archive for {{year|date:"Y"}}</h1>

<ul>
	{% for date in date_list %}
	<li style="display: inline;">
		<!-- 월 메뉴는 'F' 즉 July 같은 텍스트로 수정된 포스트를 보여주는 URL이 링크되어있다. -->
		<a href="{% url 'blog:post_month_archive' year|date:'Y' date|date:'b' %}">{{date|date:"F"}}</a>
	</li>
	{% endfor %}
</ul>
<br>

<div>
	<ul>
		{% for post in object_list %}
		<li>{{post.modify_dt|date:"Y-m-d"}}&nbsp;&nbsp;&nbsp;
			<a href="{{post.get_absolute_url}}"><strong>{{post.title}}</strong></a>
		</li>
		{% endfor %}
	</ul>
</div>

 

post_archive_month.html : June 링크를 눌렀을 때, 나오는 html

<h1>Post Archives for {{month|date:"N, Y"}}</h1>

<div>
	<ul>
		{% for post in object_list %}
		<li>{{post.modify_dt|date:"Y-m-d"}}
			<a href="{{post.get_absolute_url}}"><strong>{{post.title}}</strong></a>
		</li>
		{% endfor %}
	</ul>
</div>

 

post_archive_day.html : 연/월/일이 주어진 URL 요청에 대해 해당 날짜에 생성 또는 수정된 포스트 리스트를 보여주는 html

<h1>Post Archives for {{day|date:"N d, Y"}}</h1>

<div>
	{% for post in object_list %}
	<li>{{post.modify_dt|date:"Y-m-d"}}
		<a href="{{post.get_absoulte_url}}"><strong>{{post.title}}</strong></a>
	</li>
	{% endfor %}
</div>

 

---

(이전 포스팅)

2020/08/21 - [Project/Blog APP 만들기 (Django)] - 블로그 앱 만들기 ③ "개발 코딩하기 - URLconf 코딩하기 & View 코딩하기" with Django

블로그 앱 만들기 ③ "개발 코딩하기 - URLconf 코딩하기 & View 코딩하기" with Django

(다음 포스팅)

2020/08/22 - [Project/Blog APP 만들기 (Django)] - 블로그 앱 만들기 ⑤ "지금까지 작업 확인하기" with Django

블로그 앱 만들기 ⑤ "지금까지 작업 확인하기" with Django