8e63ba89db
Implemented pagination in the blog to display 3 posts per page. This change allows users to navigate through posts using a pagination control at the bottom of the page. The pagination follows the pattern: << < 1 2 3 ... n > >>, enabling navigation to the first, previous, specific, next, or last pages. This improves user experience by preventing long scrolls on pages with many posts. Issue ID: FLAS-33
48 lines
1.5 KiB
HTML
48 lines
1.5 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block header %}
|
|
<h1 id="toggle-all">Posts</h1>
|
|
{% if g.user %}
|
|
<a class="action" href="{{ url_for('blog.create') }}">New</a>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
{% for post in posts %}
|
|
<article class="post">
|
|
<header class="post-header">
|
|
<div>
|
|
<h1 onclick="togglePostBody({{ post['id'] }})">{{ post['title'] }}</h1>
|
|
<div class="about">by {{ post['username'] }} on {{ post['created'].strftime('%Y-%m-%d') }}</div>
|
|
</div>
|
|
{% if g.user['id'] == post['author_id'] %}
|
|
<a class="action" href="{{ url_for('blog.update', id=post['id']) }}">Edit</a>
|
|
{% endif %}
|
|
</header>
|
|
<p class="body" id="post-body-{{ post['id'] }}">{{ post['body']|safe }}</p>
|
|
</article>
|
|
{% if not loop.last %}
|
|
<hr>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
<div class="pagination">
|
|
{% if page > 1 %}
|
|
<a href="{{ url_for('blog.index', page=1) }}"><<</a>
|
|
<a href="{{ url_for('blog.index', page=page-1) }}"><</a>
|
|
{% endif %}
|
|
{% for p in range(1, total_pages + 1) %}
|
|
{% if p == page %}
|
|
<strong>{{ p }}</strong>
|
|
{% else %}
|
|
<a href="{{ url_for('blog.index', page=p) }}">{{ p }}</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if page < total_pages %}
|
|
<a href="{{ url_for('blog.index', page=page+1) }}">></a>
|
|
<a href="{{ url_for('blog.index', page=total_pages) }}">>></a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='collapse.js') }}"></script>
|
|
{% endblock %}
|