如何以编程方式将 CSS 类应用于 Jekyll 中的段落？

Question

看起来 Jekyll 插件提供了一种方法来改变从 Markdown 到 HTML 的转换，但我不确定从哪里开始。

假设我想将 CSS 类应用于帖子中的所有段落。我怎么做？例如我有一个帖子：

---
title: "my cool post"
...
---

Hey I want this paragraph wrapped in a class called my-custom-class

和 HTML 输出：

...
<p class="my-custom-class">Hey I want this paragraph wrapped in a class called my-custom-class</p>
...

如果我对插件有误解，我对另一个解决方案很酷（除了手动将类添加到 Markdown 中的每个段落）。

Answer 1

使用 Kramdown IAL

要将样式仅应用于一个段落，您可以使用 kramdown 的 IAL，在编写段落后应用您想要的类 {: class="my-custom-class"}

---
title: "my cool post"
...
---

Hey I want this paragraph wrapped in a class called my-custom-class
{: class="my-custom-class"}

使用 SCSS

如果您想将自定义样式应用于所有帖子段落，

• 用特定的类包装您的帖子内容，例如 <div class="post">...</div>

• 使用仅影响.post p喜欢的自定义样式编辑您的 SASS ：

  .post {
        p {
            #my-custom-style properties..
        }
   }
  

作为旁注，还请记住，您始终可以在 Markdown 中添加纯html，例如：

<div class="my-custom-style">
    Some cool paragraph
</div>