WagtailのSubBlockを使ってみました #Django

In addition to the basic block types above, it is possible to define new block types made up of sub-blocks: for example, a ‘person’ block consisting of sub-blocks for first name, surname and image, or a ‘carousel’ block consisting of an unlimited number of image blocks. These structures can be nested to any depth, making it possible to have a structure containing a list, or a list of structures.

...サブブロックを使えば新しいブロックタイプをつくることが可能です。例えば「姓」ブロック、「名」ブロック、「画像」ブロックから「人物」ブロックを作れます。無数の画像から「カルーセル」ブロックをつくることもできます。これらの構造はどんな深さにもネスト（入れ子に）でき、リストや子構造のリストを持つこともできます。

私はbootstrapのjumbotronを作りたかったので、paragraphとimageを持つJumbotronBlockをつくりました

blog/models.py

...
class JumbotronBlock(blocks.StructBlock):
    paragraph = blocks.RichTextBlock()
    image = ImageChooserBlock()

    class Meta:
        template = 'blog/blocks/jumbotron.html'
...

blog/templates/blog/blocks/jumbotron.html

{% load wagtailcore_tags wagtailimages_tags %}

{% image value.image original as img %}
<div class="jumbotron jumbotron-fluid" style="background-image: url('{{ img.url }}');">
  <div class="container">
    {% include_block value.paragraph %}
  </div>
</div>

blog/models.py

...
class JumbotronPage(Page):
    body = StreamField([
        ('jumbotron', JumbotronBlock()),
    ])

    content_panels = Page.content_panels + [
        StreamFieldPanel('body'),
    ]
...