2

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

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

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

但是，当尝试对RichTextBlock流字段中的块执行相同操作时，上述操作不起作用。它简单地把整个块我什至不需要添加“|富文本”过滤器。

{% 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 管理面板中完成所有这些样式设置。

4

1 回答 1

4

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

.rich-text > p:first-letter {
    color: red;
}
于 2017-06-20T19:06:53.167 回答