Block content not rendering

Question

I want to retrieve all posts from my Post model on one view template(allposts.html), and all posts from the politics category on another view template(political.html), and then display them on different sections of the index.html template. However, I am getting a blank page. What could be the issue? Here is my code

index.html

 <!-- ======= Post Grid Section ======= -->
    
    <section id="posts" class="posts">
      <div class="container" data-aos="fade-up">
        <div class="row g-5">
          {% block allposts %}
          {% endblock %}
              <!-- Some sections skipped -->
<div>
              <div class="post-meta"><span class="date">Culture</span> <span class="mx-1">&bullet;</span> <span>Jul 5th '22</span></div>
              <h3><a href="single-post.html">What is the son of Football Coach John Gruden, Deuce Gruden doing Now?</a></h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio placeat exercitationem magni voluptates dolore. Tenetur fugiat voluptates quas, nobis error deserunt aliquam temporibus sapiente, laudantium dolorum itaque libero eos deleniti?</p>
              <div class="d-flex align-items-center author">
                <div class="photo"><img src="assets/img/person-2.jpg" alt="" class="img-fluid"></div>
                <div class="name">
                  <h3 class="m-0 p-0">Wade Warren</h3>
                </div>
              </div>
            </div>
          </div>
          {% block content %}
          {% endblock %}

Here is the political.html content that I am trying to render

{% extends 'index.html' %}
{% block content %}
    {% for politics in politics %}
    <div class="row">
        <div class="post-entry-1 border-bottom">
        <a href="single-post.html"><img src="{{post.image.url}}" alt="" class="img-fluid"></a>
        <div class="post-meta"><span class="date">{{post.category}}</span> <span class="mx-1">&bullet;</span> <span>{{post.created_at}}</span></div>
        <h2 class="mb-2"><a href="single-post.html">{{post.title}}</a></h2>
        <span class="author mb-3 d-block">Ole Pundit</span>
        <p class="mb-4 d-block">{{post.body|truncatewords:75}}</p>
        </div>
    </div>
    {% endfor %}
{% endblock %}

And allposts.html

{% extends 'index.html' %}
{% block allposts %}
{% for post in posts %}
  <div class="post-entry-1 col-lg-4 box mx-1">
    <a href="single-post.html"><img src="{{post.image.url}}" class="post_img"></a>
      <div>
        <div class="post-meta"><span class="date">{{post.category}}</span> <span class="mx-1">&bullet;</span> <span>{{post.created_at}}</span></div>
        <h2><a href="">{{post.title}}</a></h2>
      </div>
    <p class="mb-4 d-block">{{post.body|truncatewords:75}}</p>

    <div class="d-flex align-items-center author">
      <div class="photo"><img src="{% static 'assets/img/person-1.jpg' %}" alt="" class="img-fluid"></div>
      <div class="name">
        <h3 class="m-0 p-0">OlePundit</h3>
      </div>
    </div>
  </div>
{% endfor %}
{% endblock %}

Here is my models.py

from django.db import models
from datetime import datetime
from django_resized import ResizedImageField

# Create your models here.
class Post(models.Model):
    title = models.CharField(max_length=100)
    body = models.CharField(max_length=1000000)
    created_at = models.DateTimeField(default=datetime.now, blank = True)
    image =  ResizedImageField(size=[250, 200], upload_to='img')
    category = models.CharField(max_length=100)

And my urls

from django.urls import path
from . import views
from django.conf.urls.static import static
from django.conf import settings
from django.contrib import admin

urlpatterns= [
    path('', views.index, name='index'),
    path('<category>/<str:pk>', views.post, name='post'),
    path('political', views.political, name='political'),
    path('allposts', views.allposts, name='allposts')
]

if settings.DEBUG:
     urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Views.py

from django.shortcuts import render
from .models import Post
from django.views.generic import DetailView

# Create your views here.

def index(request):
    return render(request, 'blog/index.html')

def allposts(request):
    posts = Post.objects.all()
    return render(request, 'blog/allposts.html', {'posts':posts})

def political(request):
    politics = Post.objects.filter(category__contains='politics')
    return render(request, 'blog/political.html', {'politics':politics})

def post(request, pk):
    posts = Post.objects.get(id=pk)
    return render(request, 'blog/posts.html', {'posts':posts})  

Answer 1

I discovered that the application is working in reverse of what I was expecting. I mean that the data is being displayed on the political.html and allposts.html. Meaning its just using, the index.html as a base template. I thought that the data is supposed to display on the index.html, but quite the contrary, the block tags on the index.html just instruct the server on where the data should go. So I am going to work retrogressively, i.e., keep extending each of the templates until I come up with a final template with all the sections, and then I can use this as the landing page. I also created a separate model for category

class Politics(models.Model):
    title = models.CharField(max_length=100)
    body = models.CharField(max_length=1000000)
    created_at = models.DateTimeField(default=datetime.now, blank = True)
    image =  ResizedImageField(size=[250, 200], upload_to='img')

I am going to do this for each of the categories, so that the admin is the one who decides where each post should go.

Answer 2

In your political.html. your forloop starts

{% for politics in politics%}

But then inside the forloop you use {{post.image}} {{post.title}} ect..

All of those should be politics not post. It looks like you copy and pasted from allposts.html, created the correct start of the forloop with politics, but didn't change the rest of the forloop: {{politics.image.url}} {{politics.title}} ect..

Answer 3

Have you tried this solution?

In the political.html file, in the beginning, simply add

 {% block allposts %}
  {% endblock %}

And in the allposts.html file, add this syntax at the end of your file:

  {% block content %}
  {% endblock %}