Django - Wagtail: Как добавить классы в генерируемые HTML-элементы из RichTextField

Используя Wagtail 2.16.1, я имею BlogPage модель, содержащую body поле, которое является RichTextField.

Когда я помещаю {{ page.body|richtext }} в шаблон, HTML, который отображается, содержит различные html-элементы, как и ожидалось. Я хотел бы указать (tailwind) классы для этих элементов.

Например, каждый элемент <p> в richtextfield должен иметь <p class="mx-2 my-3">, элементы h2 должны иметь <h2 class="mt-5"> и т.д.

Один из подходов заключается в том, чтобы обернуть тег {{ page.body|richtext }} в родительский div с некоторым определенным классом, например "wagtail-richtext", а затем использовать селекторы CSS для применения определенных стилей к элементам <p> с wagtail-richtext родительским.

Я не знаю, существует ли другой метод, позволяющий избежать написания новых классов CSS.

В данном примере добавлены классы tailwind. Если вам нужен обычный css без tailwind, удалите все, что начинается с @.

template:

<div class="wagtail-richtext">
  {{ page.body|richtext }}
</div>

CSS файл:

@tailwind base;
@tailwind components;

.wagtail-richtext p {
    @apply mt-5
}
Вернуться на верх