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-->' %}
                <a href="{{ post.url }}">read more</a>
            {% 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 %}
            <a href="{{ post.url }}">read more</a>

If you like this, then dont forget to credit the modification to me, and the original code to mikeygee http://mikeygee.com/blog/truncate.html .

Reference:

  • http://sarathlal.com/escape-liquid-template-tags-in-jekyll-posts/ -- used this to escape/comment out liquid template code in jekyll
  • http://mikeygee.com/blog/truncate.html