Django wagtail：- 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 的 wagtail 管理面板简单地完成所有这些样式，那么最好的方法就是这样做。

Answer 1

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

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

Django wagtail：- RichTextField 与 Streamfields RichTextBlock 样式段落的第一个字母。

Django wagtail:- RichTextField vs Streamfields RichTextBlock styling first letter of paragraph.

css

django

wagtail

wagtail-streamfield