Here are the models for our new BlogApp:

from django.db import models
from wagtail.admin.panels import FieldPanel
from wagtail.models import Page
from wagtail.fields import StreamField

from streams import blocks

class BlogListingPage(Page):
    """Listing all the Blog Detail Pages."""

    template = "blog/blog_listing_page.html"

    custom_title = models.CharField(
        max_length=100,
        blank=False,
        null=False,
        help_text='overwrite default title'
    )

    content_panels = Page.content_panels + [
        FieldPanel("custom_title"),
    ]

    def get_context(self, request, *args, **kwargs):
        """Adding Custom stuff to our context."""
        context = super().get_context(request, *args, **kwargs)
        context["posts"] = BlogDetailPagePage.objects.live().public()
        return context

class BlogDetailPage(Page):
    """Blog detail page"""

    template = "blog/blog_detail_page.html"

    custom_title = models.CharField(
        max_length=100,
        blank=False,
        null=False,
        help_text='overwrite default title'
    )
    blog_image = models.ForeignKey(
        "wagtailimages.Image",
        blank=False,
        null=True,
        related_name="+",
        on_delete=models.SET_NULL
    )

    content = StreamField(
        [
            ("title_and_text", blocks.TitleAndTextBlock(classname="text_and_title")),
            ("full_rich_text", blocks.RichTextBlock(classname="full_rich_text")),
            ("my_rich_text", blocks.MyRichTextBlock(classname="my_rich_text")),
            ("cards", blocks.CardBlock()),
            ("cta", blocks.CTABlock()),
        ],
        null=True,
        blank=True,
        use_json_field=True
    )
    content_panels = Page.content_panels + [
        FieldPanel("custom_title"),
        FieldPanel("blog_image"),
        FieldPanel("content")
    ]

Then we have to make a template file before we can view this page. Here is blog_listing_page.html:

{% extends "base.html" %}

{% load wagtailimages_tags %}

{% block content %}
    {% for post in posts %}
        <div class="flex space-x-2 min-w-screen">
            <div class="flex-initial w-4/12">
                {% image post.blog_image fill-250x200 as blog_img %}
                <a href="{{ post.url }}" class="pr-[10rem]">
                    <img src="{{ blog_img.url }}" alt="{{ blog_img.alt }}">
                </a>
            </div>
            <div class="flex-grow w-6/12">
                {{ post.custom_title }}
            </div>
            <div class="flex-0 w-1/12">
                <a href="{{ post.url }}" class="pr-[10rem]">
                    click
                </a>
            </div>
            <div class="flex-grow w-1/12">
            </div>
        </div>
        <br>
    {% endfor %}
{% endblock content %}

and blog_detail_page:

{% extends "base.html" %}

{% load wagtailimages_tags wagtailcore_tags %}

{% block content %}
{% image self.blog_image fill-1200x300 as banner %}
    <img src="{{ banner.url }}" alt="{{ banner.alt }}"
    style="width: 100%; height: auto;">

    <div class="flex-row">
        <div class="flex-grow">
            <h1 class="header-1">{{ self.custom_title }}</h1>
        </div>
        <div class="flex-grow mx-2">
            {% for block in page.content %}
                {% include_block block %}
            {% endfor %}
        </div>
    </div>

{% endblock %}