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.

Interrex

replace_last doesn't exist in Liquid. – Jukebox

I know, so is there any other way to solve my problem? – Interrex

Do your excerpts have multiple paragraphs? Do you want the '...' on the same line as the excerpt's last line, or the line after that? Do you want space between '...' and the text? – Geoponic

1.yes 2.the same line 3.no. Thank you – Interrex

Do you want to preserve multiple paragraphs in the excerpts? – Geoponic

Yes, it appears just like the post page, only ommit latter part. – Interrex

There are no jekyll filter that does what you want (truncate requires a character count). Because you want the ellipsis at the end of a multi-line text block, there's no pure CSS solution as of 2015 either. If you really need this you need JS hacks. – Geoponic

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.

Cotidal

Answer 2

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.

Cedric

Answer 3

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>

Sandglass

Answer 4

The simplest way I found to do this was to wrap the excerpt and "Read More" link in a div with a class that makes

tags inline. This will only work if your excerpt should look like one paragraph.

<div class="no-paragraphs">
  {{ post.excerpt }} <a href="{{ post.url }}">Read More</a>
</div>

.no-paragraphs p {
    display: inline;
}

Sinuous