page_number.html

templates

mixins/page_number.html

• page.has_previous : 이전 page를 가지고 있는지 True or False를 반환한다.
• page.paginator.num_pages : 총 page 수를 반환한다.
• page.has_next : 다음 page를 가지고 있는지 True or False를 반환한다.
• template filter : 2 번째 line에 if page_sector|add:-4가 있다. page_sector 오른쪽에 |add:-4는 template filter라고 한다. {%%} 안에서 여러 가지 연산을 할 수 있다. add 이외에도 |make_list 처럼 '12345'를 list로 만들어준다.

{% if page.has_previous %}
  {% if page_sector|add:-4 <= 1 %}
    <a href="?page=1" class="mr-3 text-lg font-semibold">Prev</a>
  {% else %}
    <a href="?page={{page_sector|add:-4}}">Prev</a>
  {% endif %}
{% endif %}

{% for number in '12345'|make_list %}
  {% if page_sector|add:number <= page.paginator.num_pages %}
    <a href="?page={{page_sector|add:number}}"
    >{{page_sector|add:number}}</a>
  {% endif %}
{% endfor %} 

{% if page.has_next %}
  {% if page_sector|add:6 >= page.paginator.num_pages %}
    <a href="?page={{page.paginator.num_pages}}">Next</a>
  {% else %}
    <a href="?page={{page_sector|add:6}}">Next</a>
  {% endif %}
{% endif %}

 

home page

  왼쪽 하단에 있는 번호가 page_number다.

참고 자료

• 노마드 코더의 Airbnb 클론 강의
• paginator
• template tag and filter

소스 코드

github.com/zpskek/airbnb-clone-v3/commit/a16a23fd73f7ba22dc431e1d03c483cf2bdfbe9a