Blog 앱 만들기 6, 템플릿 코딩

이제 지금까지 구현한 것들을 화면에 보여줄 템플릿을 코딩해야 합니다. 상당히 많습니다.
post_all.html, post_detail.html, post_archive.html, post_archive_year.html, post_archive_month.html, post_day_archive.html 의 6가지를 구현합니다.



그 전에 변경된 bookmark_list.html부터 약간 손 봐줍니다.
...\bookmark\templates\bookmark 폴더에 있습니다.

{% for bookmark in object_list %}     <li><a href="{% url 'bookmark:detail' bookmark.id %}">{{ bookmark }}</a></li> {% endfor %} Colored by Color Scripter

cs

가운데 줄 url 부분 'detail'이라고 되어 있던 부분을 'bookmark:detail'이라 고칩니다.

post_all.html

포스트의 전체 내용을 보여주는 페이지입니다. 먼저 blog 폴더 내에 새로운 폴더들을 만들어야 합니다.

(myvenv) D:\myDjango\blog>mkdir templates

(myvenv) D:\myDjango\blog>cd templates

(myvenv) D:\myDjango\blog\templates>mkdir blog

(myvenv) D:\myDjango\blog\templates>cd blog

(myvenv) D:\myDjango\blog\templates\blog>subl post_all.html

위와 같이 하여 기존에 있던 blog폴더내에 templates/blog 폴더를 만들고 그 안에서 post_all.html 파일을 만듭니다.

<h1>Blog List</h1> {% for post in posts %}     <h2><a href='{{ post.get_absolute_url }}'>{{ post.title }}</a></h2>     {{ post.modify_date|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> Colored by Color Scripter

cs

Blog List를 h1 폰트로 지정하고

앞서 view에서 콘텍스트 변수명으로 지정한 posts 객체 내용을 순회하면서 title, modify_date, description을 출력합니다.

<br/>로 공백을 한 줄 주고,

이전 페이지, 현재 페이지, 다음페이지를 <span> 태그로 한줄에 표시합니다.

post_detail.html

같은 폴더에 post-detail.html 파일을 생성합니다.

(myvenv) D:\myDjango\blog\templates\blog>subl post_detail.html

<h2>{{ object.title }}</h2> <p class="other_posts">     {% if object.get_previous_by_modify_date %}     <a href="{{ object.get_previous_post.get_absolute_url }}" title="View previous post">&laquo;--{{ object.get_previous_post }}</a>     {% endif %}     {% if object.get_next_by_modify_date %}     | <a href="{{ object.get_next_post.get_absolute_url }}" title="View next post">{{ object.get_next_post }}--&raquo;</a>     {% endif %} </p> <p class="date">{{ object.modify_date|date:"j F Y" }}</p> <br/> <div class='body'>     {{ object.content|linebreaks }} </div> Colored by Color Scripter

cs

PostDV 클래스형 뷰에서 넘어온 객체인 object의 제목을 <h2> 폰트 크기로 출력합니다.

포스트에 이전 글, 다음 글이 있으면 <<또는 >>표시와 함께 링크를 걸어주어 이동할 수 있도록 출력해 주고, 수정일도 "j F Y" 포맷(예: 14 December 2016)으로 출력합니다.

공백을 준 다음 포스트 객체의 내용을 출력합니다.

post_archive.html

이 화면은 archive 요청에 따라 포스트 리스트를 날짜별로 구분해 보여줍니다.

역시 같은 폴더에 post_archive.html을 작성합니다.

(myvenv) D:\myDjango\blog\templates\blog>subl post_archive.html

<h1>Post Archives until {% now "N d, Y" %}</h1> <ul>     {% for date in date_list %}     <li style="display: inline;">         <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_date|date:"Y-m-d" }}&nbsp;&nbsp;&nbsp;         <a href="{{ post.get_absolute_url }}"><strong>{{ post.title }}</strong></a></li>         {% endfor %}     </ul> </div> Colored by Color Scripter

cs

<h1>폰트로 제목을 출력합니다.

그 아래에 DateQuerySet 객체 리스트를 담고 있는 컨텍스트 변수인 date_list를 for문으로 돌면서 선택 가능한 년도를 출력합니다.

공백을 주고

날짜와 제목 리스트를 출력합니다.

post_archive_year.html

archive에서 year를 클릭하면 해당 년도의 포스트를 보여줍니다.

(myvenv) D:\myDjango\blog\templates\blog>subl post_archive_year.html

<h1>Post Archives for {{ year|date:"Y" }}</h1> <ul>     {% for date in date_list %}     <li style="display:inline;">         <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_date|date:"Y-m-d" }}&nbsp;&nbsp;&nbsp;         <a href="{{ post.get_absolute_url }}"><strong>{{ post.title }}</strong></a></li>         {% endfor %}     </ul> </div> Colored by Color Scripter

cs

역시 <h1>크기 폰트로 제목을 출력합니다. 뭘 메뉴를 다음 줄에 표시하고, 

공백을 준 뒤, 해당하는 포스트 리스트를 출력해 줍니다.

post_archive_month.html

year에서 월 메뉴를 클릭할때 나타나는 화면입니다.

(myvenv) D:\myDjango\blog\templates\blog>subl post_archive_month.html

<h1>Post Archives for {{ month|date:"N, Y" }}</h1> <div>     <ul>         {% for post in object_list %}         <li>{{ post.modify_date|date:"Y-m-d" }}&nbsp;&nbsp;&nbsp;         <a href="{{ post.get_absoulte_url }}"><strong>{{ post.title }}</strong></a></li>         {% endfor %}     </ul> </div> Colored by Color Scripter

cs

제목으로 월 표시를 해주고,

아래 줄에 해당 월의 날짜와 제목을 표시해 줍니다.

post_archive_day.html

월과 일까지 지정된 화면입니다.

(myvenv) D:\myDjango\blog\templates\blog>subl post_archive_day.html

<h1>Post Archives for {{ day|date:"N d, Y" }}</h1> <div>     <ul>         {% for post in object_list %}         <li>{{ post.modify_date|date:"Y-m-d" }}&nbsp;&nbsp;&nbsp;         <a href="{{ post.get_absolute_url }}"><strong>{{ post.title }}</strong></a></li>         {% endfor %}     </ul> </div> Colored by Color Scripter

cs

TodayArchiveView와 DayArchiveView 제너릭뷰는 디폴트 템플릿 파일명이 동일하여 TodayArchiveView에 대한 템플릿은 딱히 따로 작성하지 않아도 됩니다,

이로서 템플릿코딩을 마쳤습니다.

이제 실행을 해 봅니다. 앞서와 마찬가지로 runserver를 실행하고 Admin사이트에 접속해보면...

'Posts' 항목이 뜬 것을 볼 수 있습니다. +Add 버튼을 누르면,

위와 같이 Post를 작성하는 화면이 뜹니다. 결과를 확인하기 위해 포스트를 세개 이상 입력해 봅시다.

그리고 각각의 페이지들을 클릭하여 잘 작동되는지 봅시다.
저는 여기서 상당히 당황했습니다. 잘 되어야 마땅한데 도무지 detail화면이 연결되지 않는 것이었습니다.

그래서 온갖 파일들을 하나하나 며칠을 들여다 본 결과 제가 모델 코딩 시,
get_absolute_url 메소드 이름을 오타냈다는 것을 알게 되었습니다.
알파벳 하나의 오타로 사이트의 모든 기능이 망가질 수도 있다는 것을 억지로 알게 되었네요. ㅠㅠ

혹시 보시는 여러분들은 이런 일이 없도록 오타를 항상 체크하시기 바랍니다.