如何在 Jekyll liquid 标签中定义类选择器？

Question

我的 Jekyll 网站中有一些 html 代码，其中有一些 Jekyll 生成的内容，带有 liquid 标签。当我为内容设置样式时，CSS 不会应用于所述内容。

具体来说，我有这个html代码：

<p class="post-excerpt">
    {{post.excerpt | truncatewords : 40 }}
</p>

我尝试使用相关的类选择器在我的 CSS 中设置样式：

.post-excerpt{
   font-size: 1.2vw;
   // and so on and so forth
}

然而，CSS 样式被忽略了。检查 Jekyll 生成的 .html 后，我看到它是这样生成的：

<p class="post-excerpt">
    <p> This is the content of the post's excerpt blah blah </p>
</p>

里面的段落元素没有样式。如果我然后手动将生成的 .html 中的样式添加到内部

元素，那么它就可以工作了。

我怎样才能解决这个问题，使样式正确应用于实际内容，而不仅仅是包装段落？

谢谢:)

Answer 1

我会尝试降价

{: .post-excerpt }
{{post.excerpt | truncatewords: 40 }}

所以你将与班级一起创建一个

<p>

post-excerpt

更新：

使用 HTML

{% capture my_post_excerpt %}{{post.excerpt | truncatewords: 40 }}{% endcapture %}

{: .post-excerpt }
{{ my_post_excerpt }}

或者用这个

{% capture my_post_excerpt %}{{post.excerpt | truncatewords: 40 }}{% endcapture %}

<p class="post-excerpt">
    {{ my_post_excerpt }}
</p>

肮脏的解决方法也可以是更改 css，将内部和外部 p 添加到 css。

p.post-excerpt p {
   font-size: 1.2vw;
   // and so on and so forth
}

Answer 2

在@kargware 的帮助下，我找到了一个半hacky 的方法来让它工作。您可以捕获内容，然后将

<p>

替换为

<p class='class-selector-name'>

，如下所示：

<p>
{% capture my_post_excerpt %}{{post.excerpt | truncatewords: 40 }}{% endcapture %}
{% assign my_post_excerpt = my_post_excerpt | replace: "<p>", "<p class='post-excerpt'>" %}
{{ my_post_excerpt }}
</p>

这会在生成的文件中生成以下 HTML：

<p>
<p class='post-card-excerpt'>This is the content of the post's excerpt blah blah</p>
</p>

CSS 样式得到正常应用 :)

如果有更正确的方法来做到这一点，我很想知道！

Answer 3

根据您想要的结果，有 2 个选项。

选项 1：

{: .post-excerpt }
{{post.excerpt | truncatewords: 40 }}

输出：

<p class="post-excerpt">
  <p> This is the content of the post's excerpt blah blah </p>
</p>

选项 2：

{{post.excerpt | truncatewords: 40 }}{: .post-excerpt }

输出：

<p>
  <p class="post-excerpt"> This is the content of the post's excerpt blah blah </p>
</p>

当处理降价时，元素被包装在一个

<p>

标签中。在第一个选项中，标记将类放在包装内容的

<p>

上。当它像第二个选项一样放在内容之后时，类将直接分配给该元素。

编写类或任何其他属性的另一种方法如下：

{: class="post-excerpt another-class" style="color:#333" data-js="true" }
{{post.excerpt | truncatewords: 40 }}