How can I replace the last <p> tag in Jekyll

Question

In my index.html page, I want to append '...' after the post.excerpt. The idealized way is to use code {{ post.excerpt |replace_last:'</p>', '……</p>' }},but the filter replace_last seems not defined. So how can I do this in jekyll? thank you.

Answer 1

In my opinion, a better way is CSS:

.excerpt p:last-child::after {
    content: '..';
}

This adds ".." to the last paragraph's after psuedo-element inside the excerpt div.

<div class="excerpt">
    <p>Normal paragraph.</p>
    <p>Paragraph with trailing ellipsis.</p>
</div>

---

If you need to do it with Jekyll, you could use the slice filter to cut off the trailing </p> and the append filter to add '...</p>' to the end. This will not work if your excerpt does not end with a paragraph.

Answer 2

I prefer to strip the p tags from post.excerpt first, then append '...'. This way, we can even add "read more" link inside of the p.

<p>
  {{ post.excerpt | strip_html | append: "..." }}

  {% if post.excerpt != post.content %}
    <a href="{{ post.url | prepend: site.baseurl }}"> >></a>
  {% endif %}
</p>

Answer 3

I've found a workaround for this to achieve an ellipsis with a "Read More" link. Both the truncate filter and setting excerpt_separator have shortcomings, however, it's simple to do implement it yourself via split. Use this in your index.html where you iterate the posts:

{{ post.content | split:'<!--read more-->' | first | append: "…"}} <a href="{{ site.baseurl }}{{ post.url }}">Read more</a>

And you just have to place <!--read more--> wherever in your blog post where you want it to cut off and be replaced by a "… Read More" link.