jekyll帖子和页面中的首字母和单词

Question

我想在我的jekyll博客中设置首字母和帖子和页面的首字母。像这样：

我可以使用以下样式和span标记来实现此结果：

＆＃13;

＆＃13;

:not(.post-excerpt) > .initial-word {
  color: #166079;
  font-variant: small-caps;
  font-weight: bold;
}

:not(.post-excerpt) > .initial-word .initial-letter {
  float: left;
  font-size: 3.15em;
  line-height: 0.5;
  margin: 0.225em 0.159em 0 0;
  color: #166079;
  font-weight: normal;
  text-transform: uppercase;
}

＆＃13;

<p>
  <span class="initial-word"><span class="initial-letter">L</span>orem</span> ipsum dolor sit amet
</p>

＆＃13;

＆＃13;

＆＃13;

给出一篇以简介文字开头的jekyll帖子：

Lorem ipsum dolor sit amet

# Main title of the post

Lorem ipsum dolor sit amet

可以通过流媒体代码{{ content }}在我的布局中访问的帖子内容如下：

<p>Lorem ipsum dolor sit amet</p>

<h1>Main title of the post</h1>

<p>Lorem ipsum dolor sit amet</p>

我想修改帖子的内容，以添加符合以下要求的span代码：

• 初始标签只能添加到介绍中;如果内容不以p标记开头，我就不想要它们，而我只想在第一段中使用它们。

• 可以在帖子中直接使用<span class="initial-word">标记来封装多个单词，如下所示：

  <span class="initial-word">Lorem ipsum</span> dolor sit amet
  
  # Main title of the post
  
  Lorem ipsum dolor sit amet`
  

在这种情况下，只应添加<span class="initial-letter">。

我最终得到了这个复杂的帖子代码：

{% assign content_start=content | slice: 0, 3 %}
{% assign tokens=content | split: '<span class="initial-word">' %}
{% assign count=tokens | size %}
{% if content_start == "<p>" or count > 1 %}
  {% if count > 1 %}
    {% assign tokens=tokens[1] | split: "</span>" %}
    {% assign initial_word=tokens[0] %}
  {% else %}
    {% assign initial_word=content | remove_first: "<p>" | truncatewords: 1, "" %}
  {% endif %}
  {% assign initial_letter=initial_word | slice: 0 %}
  {% assign span_letter=initial_letter | prepend: '<span class="initial-letter">' | append: '</span>' %}
  {% assign span_word=initial_word | replace_first: initial_letter, "" | prepend: span_letter %}
  {% unless count > 1 %}
    {% assign span_word=span_word | prepend: '<span class="initial-word">' | append: '</span>' %}
  {% endunless %}
  {% assign content=content | replace_first: initial_word, span_word %}
{% endif %}

与页面类似但略有不同的版本。有人有任何暗示以更简单的方式做到这一点吗？我错过了一些神奇的过滤器？

Answer 1

不是一个完整的答案而且我可能误解了一些内容，但对于第一个字母，我建议使用:first-letter选择器而不是将其包装在span中。

为了选择第一段，p:first-of-type可以提供帮助吗？

Answer 2

从@IanDevlin的评论开始，我首先更改了excerpt separator模型后第一个单词的显式标记：

Lorem ipsum<!--first-word--> dolor sit amet

# Main title of the post

Lorem ipsum dolor sit amet

使用::first-letter选择器，我更改了流量代码以检测符合我要求的第一个p标记（基本上，只有在启动内容时才会考虑该段落）：

{% assign content_start=content | slice: 0, 3 %}
{% if content_start == '<p>' %}
  {% if content contains '<!--first-word-->' %}
    {% assign content=content | replace_first: '<!--first-word-->', '</span>' %}
  {% else %}
    {% assign first_word=content | remove_first: '<p>' | truncatewords: 1, '' %}
    {% assign span_word=first_word | append: '</span>' %}
    {% assign content=content | replace_first: first_word, span_word %}
  {% endif %}
  {% assign content=content | replace_first: '<p>', '<p class="first-p"><span class="first-word">' %}
{% endif %}

这将生成以下html代码，其中包含更新的css：

＆＃13;

＆＃13;

:not(.post-excerpt) > .first-word {
  color: #166079;
  font-variant: small-caps;
  font-weight: bold;
}

:not(.post-excerpt) > .first-p::first-letter {
  float: left;
  font-size: 3.15em;
  line-height: 0.5;
  margin: 0.159em 0.159em 0 0;
  color: #166079;
  font-weight: normal;
  text-transform: uppercase;
}

＆＃13;

<p class="first-p">
  <span class="first-word">Lorem ipsum</span> dolor sit amet
</p>

＆＃13;

＆＃13;

＆＃13;