6

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.

Kaiwei Chen
  • 73
  • 4
  • 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? – approxiblue Oct 21 '15 at 02:29
  • 1.yes 2.the same line 3.no. Thank you – Kaiwei Chen Oct 21 '15 at 09:23
  • Do you want to preserve multiple paragraphs in the excerpts? – approxiblue Oct 22 '15 at 02:14
  • Yes, it appears just like the post page, only ommit latter part. – Kaiwei Chen Oct 22 '15 at 02:51
  • 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](http://stackoverflow.com/questions/5269713/css-ellipsis-on-second-line). If you really need this you need JS hacks. – approxiblue Oct 22 '15 at 04:08
  • `replace_last` doesn't exist in [Liquid](https://docs.shopify.com/themes/liquid-documentation/filters/string-filters). – David Jacquel Oct 19 '15 at 16:05
  • I know, so is there any other way to solve my problem? – Kaiwei Chen Oct 19 '15 at 23:19

4 Answers4

6

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.

Ross
  • 2,701
  • 16
  • 25
1

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.

Saeb Amini
  • 23,054
  • 9
  • 78
  • 76
0

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>
mnishiguchi
  • 2,051
  • 23
  • 17
0

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;
}
T. Arboreus
  • 1,067
  • 1
  • 9
  • 17