NewViewsNews/news/templates/news/home.html

{% extends "news/base.html" %}
{% block content %}
  {% for article in articles %}
  <article class="media content-section">
    <img class="rounded-circle article-img" src="{{ article.author.profile.profile_pic.url}}" alt="Profile Picture">
    <div class="media-body">
      <div class="article-metadata">
        <a class="mr-2" href="{% url 'user-articles' article.author.username %}">{{ article.author.get_full_name }}</a>
        <a href="{% url 'user-articles' article.author.username %}"><small class="text-muted">@{{ article.author }} · {{ article.date_published }}</small></a>
      </div>
      <p class="article-content font-weight-light"><a class="nounderline" href="{% url 'article-detail' article.id %}">{{ article.headline }}</a></p>
    </div>
  </article>
  {% endfor %}
  {% if is_paginated %}

    {% if page_obj.has_previous %}
      <a class="btn btn-outline-info mb-4" href="?page=1">First</a>
      <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>
    {% endif %}

    {% for num in page_obj.paginator.page_range %}
      {% if page_obj.number == num %}
        <a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
      {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
        <a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
      {% endif %}
    {% endfor %}

    {% if page_obj.has_next %}
      <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
      <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
    {% endif %}

  {% endif %}
{% endblock content %}