Блог

Я хотел бы добавить <caption> тег для таблиц, созданных с помощью TableBlock в StreamField, чтобы сделать таблицы более доступными и семантически корректными. Прямо сейчас шаблон по умолчанию не имеет этого тега. Я не уверен, как мне следует настраивать table.html шаблон (по умолчанию, и я не уверен, как отобразить таблицу, если я создам пользовательский класс для табличного блока для добавления субтитров. <caption> должен быть <table> первым дочерним элементом, поэтому мне нужно повозиться с шаблоном. Кто-нибудь делал это раньше?

 <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>
  

Взгляните на следующий код.

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'
  

Вы заметите, что я установил свойство ‘template’ в классе ‘Meta’, поэтому вам также придется создать этот файл.

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>
  

Наконец, вы можете легко использовать свой новый табличный блок на любой странице, подобной этой

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