css - Django 鹡鸰 :- RichTextField vs Streamfields RichTextBlock styling first letter of paragraph.

Question

现在我对这两个人有点恼火。我需要对段落的第一个字母进行特殊设计。使用 RichTextField 时，模板中的示例代码有效。在某种程度上，它设置 RichTextField 的第一个字母的样式，但不是其中每个段落的第一个字母的样式。

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

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

但是，当尝试对流字段中的 RichTextBlock block 执行相同操作时，上述方法不起作用。它只是简单地输出整个 block ，我什至不需要添加“| 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 的 wagtail 管理面板中完成所有这些样式设置。

Answer 1

无需将第一个字母括在 <span> 中对其进行样式设置 - CSS 提供了 first-letter伪元素。将其与<div class="rich-text">相结合Wagtail 自动放置在每个富文本元素周围，您的 CSS 规则将类似于:

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