Was working on improving this jekyll blog, when I cam across the issue of truncating blog post for the front page view.

By default it only shows the first paragraph with . However I wanted to show pictures. Thus…

There is 3 approaches I could have done here.

1. Limit post by number of words. But this may cut off html tags, thus messing up the presentation. {{ post.content | truncatewords: 50 }} or you could try stripping html, but you lose images. which is unacceptable to me. {{ post.content | strip_html | truncatewords: 50 }}
2. Truncate by paragraph like shown in this stack overflow page. This is not as bad, but it lack the ability to control presentation.



{% assign truncatedContent = '' %}
{% assign paragraphs = post.content | split:'</p>' %}
{% for paragraph in paragraphs limit:N %}
{{ truncatedContent | append: paragraph }}
{{ truncatedContent | append: '</p>' }}
{% endfor %}


3. Truncate by splitting at <!--more--> (which is how wordpress typically does things). Here is an example from http://mikeygee.com/blog/truncate.html :



{% for post in site.posts limit:10 %}
<div class="post-preview">
<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
<div class="post-date">{{ post.date | date: "%B %d, %Y" }}</div>
{{ post.content | split:'<!--break-->' | first }}
{% if post.content contains '<!--break-->' %}
{% endif %}
</div>
<hr>
{% endfor %}



I chose option 3, since it gives most flexibility. However my issue with this previous code is that it doesn’t stick to the standard of wordpress using <!--more--> as the tag. Also if I forget to place the <!--more--> tag, then the entire post just gets dumped into the front page. This is undesirable. Thus the code was customised as shown below to correct for this issue.

If the <!--more--> tag is detected, then an excerpt based on <!--more--> is used. If <!--more--> is not detected then by default the first paragraph is used instead.

## Use me!


{% if post.content contains '<!--more-->' %}
{{ post.content | split:'<!--more-->' | first }}
{% else %}
{{ post.excerpt }}
{% endif %}