Navigating between articles with pagination
We are able to show visitors the latest articles, but they are unable to view previous posts. We are going to include a button that allows us to render other articles on the welcome page, and we will incorporate them in blocks of five.
We add a component with the button. In app/website/templates/components/all_posts/_button_paginator.html
, add the following HTML:
{% if not is_last_page %} <button class="button" id="paginator" data-next-page="{{ next_page }}">More posts</button> {% endif %}
We will only show the button if we are not on the last page, which we will manage with the is_last_page
variable. In addition, we will include a dataset with the next_page
variable to tell the backend the next page we want to render.
The component is embedded in app/website/templates/components/all_posts/list.html
:
<h1>All posts</h1> <hr> <section>...