{{ self.article_title }} tag did not show up webapplications on wagtail

Question

what I want

I will build up one web application by wegtail like News distribution app. I made class on Blocks.py, inherited into models.py and coded on html to show them up. This class means to input article information like title and url and to list them up. although I coded html and it was recognzed, however it doesn't show up on display.

error messages

I've not got some error messages. pls see this photo, I coded {{ self }} and show them up. We can see article title and more information.

In detail

Project tree

this is the constitution of my project. project tree

coding

#streams/blocks.py
#python file

#block model to input article info
class ArticleIndexBlock(blocks.StructBlock):
    articles = blocks.ListBlock(
        blocks.StructBlock(
            [
                ("article_image", ImageChooserBlock(required=True)),
                ("article_title", blocks.CharBlock(required=True, max_length=40)),
                ("article_text", blocks.TextBlock(required=True, max_length=200)),
                ("article_url", blocks.URLBlock(required=False)),
            ]
        )
    )

    class Meta:
        template = "streams/article_index_block.html"
        icon = "edit"
        label = "Article"

#articles/models.py
#python file

#models inherited from Streams/blocks.py
class ArticleIndexPage(Page):
    template = "articles/article_index.html"

    content = StreamField(
        [
            ("article_index_block", blocks.ArticleIndexBlock()),
        ],
        null=True,
        blank=True,
    )

    content_panels = Page.content_panels + [
        StreamFieldPanel("content"),
    ]

    def get_context(self, request, *args, **kwargs):
        context = super().get_context(request, *args, **kwargs)
        context["posts"] = ArticleIndexPage.objects.live().public()
        return context

    class Meta:
        verbose_name = "Article index Page"
        verbose_name_plural = "Article index Pages"

<!--article_index.html-->

{% extends 'base.html' %}
{% load wagtailcore_tags %}

{% block content %}
    <h1>{{ self.title }}</h1>


    {% for block in page.content %}
        {% include_block block%}
    {% endfor %}

{% endblock content %}

<!--article_index_block.html-->

<div class="container">
  <h3>{{ self.article_title }}</h3>

</div>

</hr>

Answer 1

Your ArticleIndexBlock does not have an article_title property. As currently defined, it has a single property, articles, which is a list of StructBlocks that have various properties including article_title

Most likely, you don't need all of these nested blocks - a StreamField is already a list of blocks, so you don't need to define a list inside of the block. Just define your fields directly on the class instead:

class ArticleIndexBlock(blocks.StructBlock):
    article_image = ImageChooserBlock(required=True)
    article_title = blocks.CharBlock(required=True, max_length=40)
    article_text = blocks.TextBlock(required=True, max_length=200)
    article_url = blocks.URLBlock(required=False)

    class Meta:
        template = "streams/article_index_block.html"
        icon = "edit"
        label = "Article"

Then your template will work.

However, if you really did intend your "Article" block to contain a list of articles (so the page as a whole is a list of lists), you'll need to loop over them in article_index_block.html.

<div class="container">
    {% for article in self.articles %}
        <h3>{{ article.article_title }}</h3>
    {% endfor %}
</div>