List View
현재 만들고 있는 게시판같은 형태로 만들때는 여러개의 객체를 다룰 수 있는 view가 필요하다.
class ArticleListView(ListView):
modle = Article
context_object_name = 'article_list'
template_name = 'articleapp/list.html'
paginate_by = 25 #한 페이지에 몇 개의 객체를 보여줄 것인지
Python
복사
Pagination이란?
: 게시판 내에 페이지 객체를 생성한다.
Infinite Scroll → Facebook, Instagram, Pinterest
“acrticle_list” - 레이아웃 내에 정보를 뿌려주는 역할
“page_obj” - 뷰 하단에 페이지를 생성해주는 역할
ListView작성
path 변경
path('list/', ArticleListView.as_view()
list.html에서 picsum을 지워주고,
<div class="container">
{% for article in article_list %}
<a href="{% url 'articleapp:detail' pk-article.pk %}">
{% include 'snippets/card.html' with article=article %}
</a>
Python
복사
그 후 snippets 디렉토리 생성 후,
<div>
<img src="{{ article.image.url }}" alt="">
</div>
Python
복사
추후엔 snippets의 레이아웃만 변경한다면, list에서 출력되는 게시글이 바뀜
{% if article list %}
<script src="{% static 'js/magicgrid.js' %}?\></script>
{% else %}
<div>
<h1>
NO Article YET!
</h1>
<div>
{% endif %}
Python
복사
Pagination
{% include 'snippets/pagination.html' with page.obj=page.obg
Python
복사
snippets/pagination.html을 생성 후 다음과 같은 코드를 작성한다
<div style="text-algin: center; margin: 1rem 0;">
{% if page_obj.has_previous %}
<a href="{% url'articleapp:list' %}?page={{ page_obj.previous_page_number }}"
class="btn btn-secondary rounded-pill">
{{ page_obj.previous_page_number }}
</a>
{% endif %}
<a href="{% url'articleapp:list' %}?page={{ page_obj.number }}"
class="btn btn-secondary rounded-pill active">
{{ page_obj.number }}
</a>
{% if page_obj.has_next %}
<a href="{% url'articleapp:list' %}?page={{ page_obj.next_page_number }}"
class="btn btn-secondary rounded-pill">
{{ page_obj.next_page_number }}
</a>
{% endif %}
</div>
Python
복사
•
첫번째 if
has_previous: 현재 페이지에서부터 이전 페이지가 있는지 없는지 확인한다.
갖고있다면, 이전 페이지로 향하는 링크를 생성해준다
•
현재 있는 페이지를 향하는 링크
•
두번째 if
has_next : 현재 페이지에서부터 다음 페이지가 있는지 없는지 확인한다
갖고있다면, 다음 페이지로 향하는 링크를 생성해준다