如何渲染wagtail页面中的内容尤其是listblock内容

Question

这是我的模型文件，我在其中向 wagtail 管理员定义卡片 从 wagtail.models 导入页面

从 wagtail.fields 导入 StreamField

从 wagtail.admin.panels 导入 FieldPanel

从 strems 导入 Blocks

测试页面类（页面）：

"""测试卡块渲染的页面。"""

模板=“strems/test.html”

卡片 = StreamField(

[(“卡片”, Blocks.cardblocks())],

空白=真，

空=真，

）

内容面板 = 页面.内容面板 + [

FieldPanel（“卡片”），

]

类元：

verbose_name =“测试页”

verbose_name_plural =“测试页”

这是我的 block.py，我在其中指定了 strems 应用程序中的列表块

类卡块（StructBlock）：

title =CharBlock(required=True,help_text="在此处添加文本")

卡片=列表块(

结构块(

[

（“图像”，ImageChooserBlock（需要= True）），

（“标题”，CharBlock（必需= True，max_length = 23）），

（“文本”，TextBlock（必需= True，max_length = 50）），

（“button_page”，PageChooserBlock（必需= False）），

（“button_url”，URLBlock（必需= False）），

],

）

）

模板=“strems/card_block.html”

类元：

图标=“占位符”

标签=“块卡”

这也是我用于渲染内容的 html 模板 {% 扩展“base.html” %}

{% 加载 wagtailcore_tags %}

{%加载wagtailimages_tags%}

{% 块内容 %}

{{ self.title }}

{self.cards 中的卡%}

{% if card.image %}

{% endif %}

{{ 卡.标题 }}

{{ 卡.文本 }}

{% if card.button_page %}

转到{{card.button_page.title}}

{% elif card.button_url %}

访问链接

{% endif %}

{% endfor %}

{% 末端嵌段 %}

但我的问题是我无法在用户页面视图中呈现结构块内容我的输出看起来像这样在此处输入图像描述并且我希望看起来像这样在此处输入图像描述以便显示卡片和它的内容

我尝试更改我的模板代码，但没有任何反应

当使用像 StructBlock 这样的自定义块时，StreamField 结构需要访问 block.value。您需要先遍历块，然后访问列表块内容，而不是直接循环 self.cards。

{% for block in self.cards %}
    {% if block.block_type == 'cards' %}
        {% for card in block.value.cards %}
            <div class="card col-md-4" style="width: 18rem; margin: 10px;">
                {% if card.image %}
                    <img src="{{ card.image.url }}" class="card-img-top">
                {% endif %}
                <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">Go to {{ card.button_page.title }}</a>
                    {% elif card.button_url %}
                        <a href="{{ card.button_url }}" class="btn btn-primary">Visit Link</a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    {% endif %}
{% endfor %}

Answer 1

当使用像 StructBlock 这样的自定义块时，StreamField 结构需要访问 block.value。您需要先遍历块，然后访问列表块内容，而不是直接循环 self.cards。

{% for block in self.cards %}
    {% if block.block_type == 'cards' %}
        {% for card in block.value.cards %}
            <div class="card col-md-4" style="width: 18rem; margin: 10px;">
                {% if card.image %}
                    <img src="{{ card.image.url }}" class="card-img-top">
                {% endif %}
                <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">Go to {{ card.button_page.title }}</a>
                    {% elif card.button_url %}
                        <a href="{{ card.button_url }}" class="btn btn-primary">Visit Link</a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    {% endif %}
{% endfor %}