首字母和单词在jekyll帖子和页面

Question

我想在我的博客上创建我的帖子和页面的首字母和首字。事情是这样的：

: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; 
 
}

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

给出一个杰基尔后开始的介绍文字：

我可以用下面的风格和span标签达到这个结果

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

从@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：

: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; 
 
}

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

Answer 2

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

而对于选择第一段，p:first-of-type可能有帮助吗？