Джанго трясогузка:- RichTextField против Streamfields RichTextBlock стиль первой буквы абзаца.

Question

Теперь у меня есть немного раздражения с этими двумя. Мне нужно специально оформить первую букву абзацев. При использовании RichTextField пример кода в шаблоне работает. В некоторой степени он стилизует первую букву RichTextField, но не первую букву каждого абзаца с ним.

<span class="first-letter-styling">{{ page.translated_body | striptags | make_list | first }}</span>

{{ page.translated_body | slice:"4:" |  richtext }}

Однако при попытке сделать то же самое с блоком в поле потока, который является RichTextBlock, вышеприведенное не работает. Он просто выводит весь блок, который мне даже не нужен, чтобы добавить фильтр "| richtext ".

{% for block in blocks %}
    {% if block.block_type == 'block' %}
        {% with bs=block.value %}
            <h2>{{ bs.title }}</h2>
            <p>
                <span class="first-letter-styling">{{ bs.content | striptags | make_list | first }}</span>
            </p>
            <p>{{ bs.content | slice:"4:" |  richtext }}</p>
        {% endwith %}
    {% endif %}
{% endfor %}

Таким образом, цель этого кода - выбрать стиль первой буквы, а затем продолжить с остальной частью абзаца. Это, однако, не работает, он берет первую букву, стилизует его, а затем печатает весь абзац, включая первую букву.

Итак, вопросы:

Как я могу стилизовать каждую первую букву абзаца для RichTextField и RichTextBlock, а не только для первой буквы всего элемента.

Как я могу убедиться, что это относится только к содержанию в абзаце. то есть, если кто-то заполнил контент только пулями (ul). Первая буква стиля не будет применяться. Лучший способ для этого был бы, если бы мы могли просто сделать все эти стили из админ-панели трясогузки для RichTextFiel и RichTextBlock.

Answer 1

Там нет необходимости, чтобы обернуть первую букву в <span> стилизовать его - CSS обеспечивает first-letter псевдоэлемент для этого. Объединяя это с <div class="rich-text"> которую Wagtail автоматически размещает вокруг каждого элемента расширенного текста, ваше правило CSS будет выглядеть примерно так:

.rich-text > p:first-letter {
    color: red;
}