Wagtailチュートリアル 10 カードを表示しよう

#Wagtailチュートリアル 10
<=9 blocks.pyで新しいフィールドを作る(2)
=>11 トップページに表示させよう

##カードを表示しよう

23

streams/blocks.py

from wagtail.core import blocks

# 23 追加
from wagtail.images.blocks import ImageChooserBlock


# 18 TitleAndTextBlockを定義
class TitleAndTextBlock(blocks.StructBlock):

    title = blocks.CharBlock(required=True, help_text="Add your title")
    text = blocks.TextBlock(required=True, help_text="Add additional text")

    class Meta:
        template = "streams/title_and_text_block.html" # 18 テンプレートの場所
        icon = "edit" # 18 admin画面のアイコン
        label = "Title & Text" # 18 admin画面の表示

# 23 追加
class CardBlock(blocks.StructBlock):

    title = blocks.CharBlock(required=True, help_text="Add your title")

    cards = blocks.ListBlock(
        blocks.StructBlock(
            [
                ("image",ImageChooserBlock(required=True)),
                ("title",blocks.CharBlock(required=True, max_length=40)),
                ("text",blocks.TextBlock(required=True, max_length=200)),
                ("button_page",blocks.PageChooserBlock(required=False)),
                ("button_url",blocks.URLBlock(required=False,help_text="If the button page above is selected, that will be used first.")),
            ]
        )
    )

    class Meta:
        template = "streams/card_block.html"
        icon = "placeholder"
        label = "Poke Cards"



# 20 追加
class RichtextBlock(blocks.RichTextBlock):

    class Meta:
        template = "streams/richtext_block.html"
        icon = "doc-full"
        label = "Full RichText"

# 22 追加
class SimpleRichtextBlock(blocks.RichTextBlock):

    # 22 field_block.pyからオーバーライド
    def __init__(self, required=True, help_text=None, editor='default', features=None, **kwargs):
        super().__init__(**kwargs)
        self.features = [
            "bold",
            "italic",
            "link",
        ]


    class Meta:
        template = "streams/richtext_block.html"
        icon = "edit"
        label = "Simple RichText"

24

wagtailtutorial/tamplates/streams/card_block.html

{# 24 カードを表示する #}
{% load wagtailimages_tags %}

<div class="container">
 <h1 class="text-center">{{self.title}}</h1>
 <div class="card-deck">
 {% for card in self.cards %}
    {% image card.image fill-300x200 as img%}
    <div class="card">
        <img src="{{img.url}}" alt="{{img.alt}}" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">{{ card.title }}</h5>
            <p class="card-text">{{ card.text }}</p>
            {% if card.button_page%}
                <a href="{{ card.button_page.url }}" class= "btn btn-primary">
                    Read More (internal)
                </a>
            {% elif card.button_url %}
                <a href="{{ card.button_url }}" class= "btn btn-primary">
                    Read More (external)
                </a>
            {% endif %}

            
        </div>
    </div>
 {% endfor %}
 </div>
</div>

23

23

24