NewViewsNews/news/templates/news/home.html

{% extends "news/base.html" %}
{% block content %}

<div class="row">
  {% for article in articles %}
      <div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
          <div class="card shadow border-0 h-100"><a href="">
              <img src="{{ article.header.url }}" alt="..." class="img-fluid card-img-top"></a>
              <div class="card-body"><a href="{% url 'article-detail' article.id %}" class="text-uppercase text-muted text-sm letter-spacing-2">{{ article.tag }} </a>
                  <h5 class="my-2"><a href="{% url 'article-detail' article.id %}" class="nounderline text-dark">{{ article.headline }}</a></h5>
                   <a href="{% url 'user-articles' article.author.username %}">{{ article.author.get_full_name }}<small class="text-muted"> · @{{ article.author }} · {{ article.date_published }}</small></a>
                  <p class="my-2 text-muted text-sm">{{ article.content|safe|truncatechars_html:70|linebreaks }}</p>
              </div>
          </div>
      </div>

  {% if forloop.counter|divisibleby:3 %}
    </div><!-- close existing row and open another one-->
    <div class="row">
      {% endif %}
         {% endfor %}
    </div>
  {% 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 %}