전체 페이지뷰

2017년 1월 6일 금요일

기존 Bookmark, Blog 개선하기

앞서 사이트의 첫 페이지를 만들면서 이에 따라 기존에 있던 Bookmark와 Blog도 그 UI에 따라 개선이 필요합니다.



왜 애초에 첫 페이지를 먼저 만들고 거기에 따르지 않았냐고 한다면 아마도 간단한 것부터 예를 보여주어 감을 잡게 하기 위함이었던 것 같습니다. 거기에 덧붙여 김석훈님은 디자인 변경 등의 요소에 따라 첫 페이지가 늦게 개발 되가나 수차례 변경되는 일이 잦기 때문에 그것을 염두에 두었다고 말하고 있습니다.

여기서 할 일은 앞에서 전체 윤곽을 잡기 위해 만든 base.html템플릿을 북마크와 블로그가 상속받게 하는 것입니다. 따라서 다른 요소들은 변동이 없으며, 기존 앱의 템플릿들만 변경할 것입니다.

먼저 기존 base.html을 수정합니다.

먼저 늘 하던 대로 가상환경을 실행하고 templates 폴더로 가서 base.html을 띄웁니다.
D:\myDjango>myvenv\Scripts\activate
(myvenv) D:\myDjango>cd templates
(myvenv) D:\myDjango\templates>subl base.html

# 전략
<div id="menu">
    <li><a href="{% url 'home' %}">Home</a></li>  
    <li><a href="{% url 'bookmark:index' %}">Bookmark</a></li>
    <li><a href="{% url 'blog:index' %}">Blog</a></li>
    <li><a href="#">Photo</a></li>
# 중략
    <li><a href="{% url 'blog:post_archive' %}">Archive</a></li>
    <li><a href="#">Search</a></li>
    <li><a href="{% url 'admin:index' %}">Admin</a></li>
# 하략
cs

앞서 #으로 채워두었던 url을 구체적으로 작성합니다.
아직 바꾸지 않은 것들은 추후 또 바꿀 기회가 있을 겁니다.

home.html도 수정합니다.
# 전략
<table id="applist">
        <tr>
            <td><b><i><a href="{% url 'bookmark:index' %}">Bookmark</a></i></b></td>
    
# 중략
        </tr>
        <tr>
            <td><b><i><a href="{% url 'blog:index' %}">Blog</a></i></b></td>
# 하략
cs

Bookmark와 Blog 부분을 찾아 바꿔줍니다.
이제 각 앱들의 템플릿을 수정할 차례입니다.

먼저  bookmark_list.html을 수정합니다.

(myvenv) D:\myDjango\bookmark\templates\bookmark>subl bookmark_list.html

{% extends "base.html" %}
{% block title %}Django Bookmark List{% endblock %}
{% block content %}
<div id ="content">
    <h1>Bookmark List</h1>
    <ul>
        {% for bookmark in object_list %}
            <li><a href="{% url 'bookmark:detail' bookmark.id %}">{{ bookmark }}</a></li>
        {% endfor %}
    </ul>
</div>
{% endblock %}
cs

상속받게될 부모인 base.html에 html선언부들이 이미 있으므로 중복되는 부분을 삭제합니다.

다음으로 bookmark_detail.html도 수정합니다.
(myvenv) D:\myDjango\bookmark\templates\bookmark>subl bookmark_detail.html
{% extends "base.html" %}
{% block title %}Django Bookmark Detail{% endblock %}
{% block content %}
<div id="content">
    <h1>{{ object.title }}</h1>
    <ul>
        <li>URL:<a href="{{ object.url }}">{{ object.url }}</a></li>
    </ul>
</div>
{% endblock %}
cs

역시 상속을 고려하여 선언부등을 지워줍니다.

이제 post_all.html을 수정하겠습니다.
(myvenv) D:\myDjango\blog\templates\blog>subl post_all.html
{% extends "base.html" %}
{% block title %}post_all.html{% endblock %}
{% block content %}
<div id="content">
<h1>Blog List</h1>
{% for post in posts %}
# 중략 
    </span>
</div>
</div>
{% endblock %}
cs


post_detail.html
(myvenv) D:\myDjango\blog\templates\blog>subl post_detail.html
{% extends "base.html" %}
{% block title %}post_detail.html{% endblock %}
{% block content %}
<div id="content">
<h2>{{ object.title }}</h2>
#중략
</div>
</div>
{% endblock %}
cs


post_archive.html
(myvenv) D:\myDjango\blog\templates\blog>subl post_archive.html
{% extends "base.html" %}
{% block title %}post_archive.html{% endblock %}
{% block content %}
<div id="content">
<h1>Post Archives until {% now "N d, Y" %}</h1>
# 중략 
    </ul>
</div>
</div>
{% endblock %}
cs

post_archive_year.html
(myvenv) D:\myDjango\blog\templates\blog>subl post_archive_year.html
{% extends "base.html" %}
{% block title %}post_archive_year.html{% endblock %}
{% block content %}
<div id="content">
<h1>Post Archives for {{ year|date:"Y" }}</h1>
# 중략
</div>
</div>
{% endblock %}
cs

post_archive_month.html
(myvenv) D:\myDjango\blog\templates\blog>subl post_archive_month.html
{% extends "base.html" %}
{% block title %}post_archive_year.html{% endblock %}
{% block content %}
<div id="content">
<h1>Post Archives for {{ month|date:"N, Y" }}</h1>
# 중략
</div>
</div>
{% endblock %}
cs

post_archive_day.html
(myvenv) D:\myDjango\blog\templates\blog>subl post_archive_day.html
{% extends "base.html" %}
{% block title %}post_detail.html{% endblock %}
{% block content %}
<div id="content">
<h1>Post Archives for {{ day|date:"N d, Y" }}</h1>
# 중략
</div>
</div>
{% endblock %}
cs

이제 서버를 가동해서 잘 작동하는지 확인합시다.


상단의 Bookmark, Blog, Archive, Admin 버튼을 눌러서 정상 작동하면 성공입니다.

댓글 없음:

댓글 쓰기