“blog 홈페이지” 만들기 단계에서 생성한 첫 페이지의 디자인에 맞추어 bookmakr, blog 앱을 수정하기 위한 단계이며, base.html 파일을 상속받아 사용하면 되므로 모델, 뷰는 변경 사항이 없으며 템플릿 파일만 수정
추가할 기능
- 첫 페이징의 메뉴에서 애플리케이션을 클릭하여, 해당 애플리케이션으로 넘어가기
- 첫 페이지의 룩앤필을 맞추기 위해서 base.html 템플릿을 상속받아 각 애플리케이션의 페이지들을 개발
작업 순서
- 뼈대 만들기
- startproject (앞에서 이미 진행했으므로 pass )
- settings.py
- migrate
- createsuperuser
- startapp ( 새로운 app 을 생성하지 않을 것이므로 pass )
- settings.py
- 모델 코딩하기
- models.py ( 새로운 table 생성 하지 않으므로 pass )
- admin.py
- makemigrations
- migrate
- URLconf 코딩하기
- urls.py ( URL 변경 사항이 없으므로 pass )
- view 코딩하기
- views.py ( view 변경 사항이 없으므로 pass )
- template 코딩하기
- templates 디렉터리
- base.html 파일의 메뉴에 대한 링크 수정
- home.html 파일의 링크 수정
- 북마크 앱의 템플릿 파일들 수정
- 블로그 앱의 템플릿 파일들 수정
- templates 디렉터리
템플릿 수정
base.html
base.html 은 모든 페이지에 공통으로 사용되는 것
변경 사항
- menu 에 대한 링크
### 위치 이동
cd /Users/user/test/django/project/web/templates
### base.html
vi base.html
---
### 기존 코드
<div id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Bookmark</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Photo</a></li>
<li><a href="#">Add▽</a>
<ul>
<li><a href="#">Bookmark</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Photo</a></li>
</ul>
</li>
<li><a href="#">Change▽</a>
<ul>
<li><a href="#">Bookmark</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Photo</a></li>
</ul>
</li>
<li><a href="#">Archive</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Admin</a></li>
</div>
### 수정 후, 코드
<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="#">Add▽</a>
<ul>
<li><a href="#">Bookmark</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Photo</a></li>
</ul>
</li>
<li><a href="#">Change▽</a>
<ul>
<li><a href="#">Bookmark</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Photo</a></li>
</ul>
</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>
</div> 변경된 내용 정리 ( Home, Bookmark, Blog, Archive, Admin )
- 기존
- 단순하게 Home, Bookmark, Blog, Photo 를 텍스트로 가진 링크를 나타냄
- 즉, 해당 단어를 클릭해도 아무런 동작을 하지 않음
: 현재 페이지의 맨 위로 이동하는 URL 프래그먼트
- 변경 후
- bookmark, blog, admin 과 같은 애플리케이션의 index view를 가리키는 URL 생성
- 즉, 사용자가 해당 단어를 클릭하면 해당하는 애플리케이션의 view 로 이동하는 링크가 생성
home.html
모든 페이지에 공통으로 적용되는 home.html
애플리케이션 링크 수정
### 위치 이동
cd /Users/user/test/django/project/web/templates
### home.html
vi home.html
---
### 기존 코드
<table id="applist">
<tr>
<td><b><i><a href="#">Bookmark</a></i></b></td>
<td>You can write your own post and share to others. Donec id elit non miporat gravida at eget metus. Fusce dapibus, tellus ac cursus commodo</td>
<td class="Edit"><i><a href="#">Add</a></i></td>
<td class="Edit"><i><a href="#">Change</a></i></td>
</tr>
<tr>
<td><b><i><a href="#">Blog</a></i></b></td>
<td>You can write your own post and share to others. Donec id elit non miporta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo</td>
<td class="Edit"><i><a href="#">Add</a></i></td>
<td class="Edit"><i><a href="#">Change</a></i></td>
</tr>
</table>
### 수정 후, 코드
<table id="applist">
<tr>
<td><b><i><a href="{% url 'bookmark:index' %}">Bookmark</a></i></b></td>
<td>You can write your own post and share to others. Donec id elit non miporat gravida at eget metus. Fusce dapibus, tellus ac cursus commodo</td>
<td class="Edit"><i><a href="#">Add</a></i></td>
<td class="Edit"><i><a href="#">Change</a></i></td>
</tr>
<tr>
<td><b><i><a href="{% url 'blog:index' %}">Blog</a></i></b></td>
<td>You can write your own post and share to others. Donec id elit non miporta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo</td>
<td class="Edit"><i><a href="#">Add</a></i></td>
<td class="Edit"><i><a href="#">Change</a></i></td>
</tr>
</table>bookmark_list.html
base.html 을 상속받도록 bookmark_list.html 파일을 수정
### 위치 이동
cd /Users/user/test/django/project/web/bookmark/templates/bookmark
### bookmark_list.html
vi bookmark_list.html
---
### 기존 코드
<!DOCTYPE html>
<html>
<head>
<tile>Django Bookmark List</title>
</head>
<body>
<div id="content">
<h1>Bookmark List</h1>
<ul>
{% for bookmark in object_list %}
<li><a href="{% url 'detail' bookmark.id %}">{{ bookmark }}</a></li>
{% endfor %}
</ul>
</div>
</body>
</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 %}bookmark_detail.html
base.html 을 상속 받을 수 있도록 수정
### 위치 이동
cd /Users/user/test/django/project/web/bookmark/templates/bookmark
### bookmark_detail.html
vi bookmark_detail.html
---
### 기존 코드
<!DOCTYPE html>
<html>
<head>
<title>Django Bookmark Detail</title>
</head>
<body>
<div id="content">
<h1>{{ object.title }} </h1>
<ul>
<li>URL: <a href="{{ object.url }}">{{ object.url }}</a></li>
</ul>
</div>
</body>
</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 %}post_all.html
base.html 을 상속 받도록 post_all.lhtml 수정
### 위치 이동
cd /Users/user/test/django/project/web/blog/templates/blog
### post_all.html
vi 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>
### 수정 후, 코드
{% extends "base.html" %}
{% block title %}post_all.html{% endblock %}
{% block content %}
<div id="content">
<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>
{% endblock %}
post_detail.html
base.html 을 상속 받도록 post_detail.html 파일을 수정
### 위치 이동
cd /Users/user/test/django/project/web/blog/templates/blog
### post_detail.html
vi 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"> «--{{ 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 }}–»
{% endif %}
</p>
<p class="date">{{ object.modify_date|date:"j F Y" }}</p>
<br/>
<div class="body">
{{ object.content|linebreaks }}
</div>
### 수정 후, 코드
{% extends "base.html" %}
{% block title %}post_detail.html{% endblock %}
{% block content %}
<div id="content">
<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"> «--{{ 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 }}--»</a>
{% endif %}
</p>
<p class="date">{{ object.modify_date|date:"j F Y" }}</p>
<br/>
<div class="body">
{{ object.content|linebreaks }}
</div>
{% endblock %}post_archive.html
base.html 을 상속 받도록 post_archive.html 파일을 수정
### 위치 이동
cd /Users/user/test/django/project/web/blog/templates/blog
### post_archive.html
vi 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" }}
<a href="{{ post.get_absolute_url }}"><strong>{{ post.title }}</strong></a>
</li>
{% endfor %}
</ul>
</div>
### 수정 후, 코드
{% extends "base.html" %}
{% block title %}post_archive.html{% endblock %}
{% block content %}
<div id="content">
<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" }}
<a href="{{ post.get_absolute_url }}"><strong>{{ post.title }}</strong></a>
</li>
{% endfor %}
</ul>
</div>
{% endblock %}post_archive_year.html
base.html을 상속 받도록 post_archive_year.html 파일 수정
### 위치 이동
cd /Users/user/test/django/project/web/blog/templates/blog
### post_archive_year.html
vi 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
<a href="{{ post.get_absolute_url }}"><strong>{{ post.title }}</strong></a></li>
{% endfor %}
</ul>
</div>
### 수정 후, 코드
{% extends "base.html" %}
{% block title %}post_archive_year.html{% endblock %}
{% block content %}
<div id="content">
<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
<a href="{{ post.get_absolute_url }}"><strong>{{ post.title }}</strong></a></li>
{% endfor %}
</ul>
</div>
{% endblock %}post_archive_month.html
base.html 을 상속 받도록 post_archive_month.html 파일을 다음과 같이 수정
### 위치 이동
cd /Users/user/test/django/project/web/blog/templates/blog
### post_archive_month.html
vi 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" }}
<a href="{{ post.get_absolute_url }}"><strong>{{ post.title }}</strong></a></li>
{% endfor %}
</ul>
</div>
### 수정 후, 코드
{% extends "base.html" %}
{% block title %}post_archive_month.html{% endblock %}
{% block content %}
<div id="conetne">
<h1>Post Archives for {{ month|date:"N, Y" }}</h1>
<div>
<ul>
{% for post in object_list %}
<li>{{post.modify_date|date:"Y-m-d" }}
<a href="{{ post.get_absolute_url }}"><strong>{{ post.title }}</strong></a></li>
{% endfor %}
</ul>
</div>
{% endblock %}post_archive_day.html
base.html 을 상속 받도록 post_arhive_day.html 파일을 수정
### 위치 이동
cd /Users/user/test/django/project/web/blog/templates/blog
### post_archive_day.html
vi 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" }}
<a href="{{ post.get_absolute_url }}"><strong>{{ post.title }}</strong></a>
</li>
{% endfor %}
</ul>
</div>
### 수정 후, 코드
{% extends "base.html" %}
{% block title %}post_archive_day.html{% endblock %}
{% block content %}
<div id="content">
<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" }}
<a href="{{ post.get_absolute_url }}"><strong>{{ post.title }}</strong></a>
</li>
{% endfor %}
</ul>
</div>
{% endblock %}참고 자료
새로운 것을 시도하고 도전하는 것을 좋아하는 Engineer 입니다..