Django - blog 만들기 5 (templates)

yunseul·2024년 6월 17일

Django

목록 보기
16/30

post_all.html

포스트 리스트를 보여주는 post_list.html 템플릿 파일

해당 파일의 위치 : /blog/templates/blog/

### 위치 이동
cd /Users/user/test/django/project/web/blog

### 디렉토리 생성
mkdir -p templates/blog

### 위치 이동
cd 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>
  • {% for post in posts %} : posts 객체는 PostLV 클래스 뷰에서 넘겨주는 컨텍스트 변수로 Post 객체 리스트가 담겨 있으며, posts 객체의 내용을 순회하면서 Post 객체의 title, modify_date, description 속성을 출력
  • '{{ post.get_absolute_url }}'>{{ post.title }} : title 텍스트에 URL 링크 연결, URL 링크는 객체의 get_absolute_url() 메소드를 호출하여 값을 구해오는데, /blog/post/slug단어/와 같은 형식이 될 것
  • {{ post.modify_date|date:"N d, Y" }} : 객체의 modify_date 속성 값을 "N d, Y" 포멧으로 출력 ( ex: July 05, 2015 )
  • {{ post.description }}

    n : 객체의 description 속성 값을 출력

  • : 공백 생성
  • : 태그 내의 요소들은 같은 줄에 배치되며 페이징 기능을 위한 줄
  • {% if page_obj.has_previous %} : page_obj 는 django의 Page 객체가 들어 있는 컨텍스트 변수 ( 현재 페이지를 기준으로 이전 페이지가 있는지 확인 )
  • "?page={{ page_obj.previous_page_number }}">PreviousPage : page_obj.previous_page_number 는 이전 페이지의 번호, PreviousePage 라는 텍스트를 출력하고 해당 텍스트에 URL 링크를 연결
  • Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }} : page_obj.number 는 현재 페이지 번호. page_obj.paginator.num_pages 는 총 페이지 개수를 의미
  • "?page={{ page_obj.next_page_number }}">NextPage : page_obj.nextj_page_number 는 다음 페이지의 번호, NextPage 라는 텍스트를 출력하고 해당 텍스트에 URL 링크를 연결

post_detail.html

포스트의 내용을 보여주는 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"> &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 }}–»
        {% endif %}
</p>

<p class="date">{{ object.modify_date|date:"j F Y" }}</p>
<br/>

<div class="body">
        {{ object.content|linebreaks }}
</div>
  • {{ object.title }} : object 객체는 PostDV 클래스형 view에서 컨텕스트 변수로 넘겨주는 Post 클래스의 특정 객체
  • {% if object.get_previous_by_modify_date %} : get_previous_by_modify_date 함수는 modify_date 컬럼 기준으로 이전 객체를 반환
  • "{{ object.get_previous_post.get_absolute_url }}" title="View previous post"> «--{{ object.get_previous_post }} : get_previous_post 함수는 이전 객체(post)를 get_previous_post.get_absolute_url 함수는 이전 객체를 지칭하는 URL 패턴을 반환, 그러므로 해당 문장은 이전 객체의 문자열 텍스트를 출력하고 그 텍스트에 URL 링크를 연결
  • {% if object.get_next_by_modify_date %} : get_next_by_modify_date 함수는 modify_date 컬럼 기준으로 다음 객체를 반환, 즉 변경 날짜가 현재 객체보다 최신 객체가 있는지 확인
  • "{{ object.get_next_post.get_absolute_url }}" title="View next post">{{ object.get_next_post }}–» : get_next_post 함수는 다음 객체(post)를 get_next_post.get_absolute_url 함수는 다음 객체를 지칭하는 URL 패턴을 반환, 그러므로 이 문장은 다음 객체의 문자열 텍스트를 출력하고 해당 텍스트에 URL 링크를 연결
  • {{ object.modify_date|date:"j F Y" }} : 객체의 modify_date 속성값을 "j F Y 포멧으로 출력
  • {{ object.content|linebreaks }} : 포스트 객체의 내용 (content 속성값) 을 출력, linebreaks 템플릿 필터는 \n 을 인식할 수 있도록 함

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" }}&nbsp;&nbsp;&nbsp;
<a href="{{ post.get_absolute_url }}"><strong>{{ post.title }}</strong></a>
</li>
{% endfor %}
</ul>
</div>

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;nbsp
                <a href="{{ post.get_absolute_url }}"><strong>{{ post.title }}</strong></a></li>
                {% endfor %}
        </ul>
</div>
  • Post Archives for {{ year|date:"Y" }} : year 컨텍스트 변수는 해당 연도에 대한 datetime.date 타입의 객체
  • {% for date in date_list %} : date_list 컨텍스트 변수는 DateQuerySet 객체 리스트를 담고 있으며, DateQuerySet 객체 리스트는 QuerySet 객체 리스트에서 날짜 정보만을 추출해 담고 있는 객체 리스트이며 객체의 타입은 datetime.date 타입
  • <style="display: inline;"> : li 요소를 lnline 으로 지정

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" }}&nbsp;&nbsp;&nbsp;
<a href="{{ post.get_absolute_url }}"><strong>{{ post.title }}</strong></a></li>
{% endfor %}
</ul>
</div>

post_archive_day.html

/연/월/일이 주어진 URL 요청에 대해 해당 날짜에 생성 또는 수정된 post의 리스트를 보여주는 화면


참고 자료

profile
새로운 것을 시도하고 도전하는 것을 좋아하는 Engineer 입니다..

0개의 댓글