Menu

Smarter Excerpts

2 min read February 28, 2017 at 12:27pm on Rebuilding Postleaf

Here's something I really wanted to solve in Postleaf, and I think I've finally nailed it. Post excerpts are going to be so much smarter from now on.

The Trouble with Excerpts

In most cases, excerpts are generated by a CMS using a handful of approaches:

  1. Fetch the first n words and add an ellipsis
  2. Fetch everything up to a placeholder (e.g. <!--more-->)
  3. Make the user manually enter them

The first approach is what I've used up to this point. It's not terrible, but it has side effects. For example, content gets truncated at random points. And what if your post starts with a heading, code sample, images, or similar? You can strip the HTML, but the excerpt can still read funny.

The second approach requires the user to manually insert a placeholder into their content. If they forget, the system falls back to #1. It's also an ugly approach when you use a visual editor, because the placeholder won't appear on the live version of the post. This is more suited to form-based systems.

The third approach gives the user complete control over their excerpts, but at the expense of making them add it manually for every post. In my experience, this isn't usually desirable (and again, people forget).

Making Excerpts Smarter

To make smarter excerpts, I created a brand new helper that intelligently parses your content. It's highly configurable and supports both HTML (with allowed tags) and plain text.

To output the first two paragraphs of your content, simply use it like this:

{@excerpt paragraphs="2"/}

The helper will grab the first two paragraphs from your content and output them as HTML. If you have a heading, image, or other content that occurs before the first two paragraphs, those elements will be ignored.

If you still want to limit the number of words that appear, you can use the optional words attribute. This will grab up to the first 100 words from the first two paragraphs:

{@excerpt paragraphs="2" word="100"/}

If you only want to allow certain HTML tags in your excerpts, set the tags attribute. This will only allows links, emphasized text, and strong text:

{@excerpt paragraphs="2" tags="a,em,strong"/}

Making excerpts smarter is one of the many details I'm focusing on with this rebuild. I've already implemented it on the dev site and it makes a world of difference when I'm browsing through posts!