首字母和單詞在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可能有幫助嗎？