How to create blog post excerpts
This recipe shows you how to generate automatic excerpts for your posts. Excerpts are shorter versions of your post to lead your visitors to read the whole post.
Overview
For this recipe our directory structure will look like this:
/foo-blog-post.md
/index.jade // or index.ejs
The foo-blog-post.md
will be the file that holds the full content of our post. The index
file is going to display an excerpt version of the content in foo-blog-post.md
.
Following the most popular blogging conentions, we’re going to use the <!-- more -->
flag to tell the content up to what point we want the excerpt to be cut at.
Setting up blog post content
The content in foo-blog-post.md
looks like this:
# Foo blog post
Lorem ipsum Id dolor ut esse anim ut ad in tempor minim nisi in.
<!-- more -->
Lorem ipsum Fugiat pariatur ex dolor et ullamco non sunt anim labore nisi sit. Lorem ipsum Elit veniam ex do nisi mollit irure amet occaecat quis mollit do in.
Notice the <!-- more -->
flag. Its job is to indicate where the excerpt ends. Everything before that flag will become the excerpt of this post.
Setting up the index page
Both, Jade and EJS, support in-template functions that get added to the local context as template helpers. These helper functions work the same as any other JavaScript function.
Using Jade
This is what our index.jade
looks like:
- function excerpt(content) {
- if(content.indexOf("<!-- more -->") == -1) return content;
- else return content.split("<!-- more -->")[0];
- }
!= excerpt(partial("foo-blog-post"))
Using EJS
This is what our index.ejs
looks like:
<% function excerpt(content) {
if(content.indexOf("<!-- more -->") == -1) return content;
else return content.split("<!-- more -->")[0];
} %>
<%- excerpt(partial("foo-blog-post")) %>
How does it work?
The first 3 lines is where the excerpt
function is defined. We give it the whole content of the post and it gives us back the excerpt.
It does that by splitting the content wherever the <!-- more -->
tag is, and it returns the first part of that split content.split("<!-- more -->")[0]
.
In the last line we use our common partial
function to get the content from the foo-blog-post.md
file, and use that as the content that we pass to our excerpt
function.