如何在 Jekyll 液体标签中定义 class 选择器？

Question

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

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


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

我尝试使用相关的 class 选择器在 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> 与 class 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 样式得到正常应用:)

如果有更正确的方法，我很想知道！

如何在 Jekyll 液体标签中定义 class 选择器？

How to define class selector in a Jekyll liquid tag?

html

css

jekyll