如何在 StreamField 的 TableBlock 模板中添加 "caption" 标签？

Question

我想为使用 StreamField 中的 TableBlock 创建的 table 添加 <caption> 标记，以使 table 更易于访问且语义正确。现在，默认模板没有那个标签。我不确定我应该如何自定义 table.html 模板（从默认设置，如果我为 table 块添加字幕。 <caption> 必须是 <table> 的第一个 child，这就是我需要修改模板的原因。有人以前做过吗？

<table>
    <caption>Example Caption</caption> <--- Need this here
    <thead>
        <th>Header col 1</th>
        <th>Header col 2</th>
    </thead>
    <tbody>
    <tr>
        <td>Cell col 1</td>
        <td>Cell col 2</td>
    </tr>
    </tbody>
</table>

Answer 1

看看下面的代码。

TableBlock.py

class TableHead(blocks.StructBlock):
    table_head_text = blocks.ListBlock(blocks.CharBlock(max_length=120))

class TableRow(blocks.StructBlock):
    table_row_text = blocks.ListBlock(blocks.CharBlock(max_length=120))

class TableBlock(blocks.StructBlock):
    caption_text = blocks.CharBlock(max_length=120)
    table_head = TableHead()
    table_rows = blocks.ListBlock(TableRow())

    class Meta:
        template = 'wagtail_blocks/table.html'

您会注意到我在 'Meta' class 中设置了 'template' 属性，因此您也必须创建该文件。

table.html

{% load wagtailcore_tags %}

<table>
    <caption>{{ value.caption_text }}</caption>
    <thead>
    {% for header_text in value.table_head.table_head_text %}
        <th>{{ header_text }}</th>
    {% endfor %}
    </thead>
    <tbody>
    {% for table_row in value.table_rows %}
        <tr>
            {% for table_row_text in table_row.table_row_text %}
                <td>{{ table_row_text }}</td>
            {% endfor %}
        </tr>
    {% endfor %}
    </tbody>
</table>

您终于可以像这样在任何页面中轻松使用您的新 TableBlock

body = StreamField([
    ('table', TableBlock()),
])

如何在 StreamField 的 TableBlock 模板中添加 "caption" 标签？

How to add "caption" tag in TableBlock template in StreamField?

wagtail

wagtail-streamfield