Как добавить тег «заголовок» в шаблон TableBlock в StreamField? - PullRequest
Новая
       31

Как добавить тег «заголовок» в шаблон TableBlock в StreamField?

0 голосов
/ 17 апреля 2019

Я хотел бы добавить тег <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>

1 Ответ

0 голосов
/ 18 апреля 2019

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

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>

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

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