Displaying Post Excerpts in 11ty
If you want to display content in the list of all posts, 11ty only allows you to show the entire post content by default. However, if you want to display just the first sentence of a post, you’ll need to teach Eleventy’s JavaScript how to do that.
The 11ty Starter Blog will be used as the foundation.
When you start this, you get the following view. It shows the post list with the title, date, and tags but without a content excerpt.
The red text indicates where the content should be inserted. To implement this, I referred to the following sources:
Muenzpraeger's Eleventy Chirpy Blog Template and Creating a Blog with Eleventy.
The .eleventy.js file needs the following function:
const extractExcerpt = (post) => {
if (!Object.prototype.hasOwnProperty.call(post, "templateContent")) {
return null;
}
const content = post.templateContent;
const markerIndex = content.indexOf("<!-- endOfPreview -->");
return markerIndex > 0 ? content.slice(0, markerIndex) + "..." : "";
};First, it checks if the post object has the "templateContent" field, which Eleventy should provide. Then, the content is cached in the content variable. The content is sliced from the beginning up to the snippet "". Of course, you can use any tag, but make sure it’s something unique that stands out from the content. This marker indicates where the excerpt, or preview, should end. If no marker is found, an empty string is returned.
Next, you need to teach Eleventy how to use this function. You could do this via a filter, but I find a "shortcut" more practical. A shortcut looks like this:
// remove whitespace between {} and %
{ % excerpt pageObject % }Please remove the spaces between the parentheses and the percentage signs. Unfortunately, 11ty renders the snippet with spaces!
eleventyConfig.addShortcode("excerpt", (post) => extractExcerpt(post));The Eleventy config object now has a new keyword "excerpt" (for the post excerpt), and as shown in the previous code snippet, it passes the post object as a parameter.
Now, if you include this shortcut in the /_includes/postlist.njk file within the list tags (< li > </ li >), you will see the desired post excerpt:
{ % excerpt post % }This marker can now be used in the Markdown files of the blog posts (/posts/*.md). Simply insert at the desired length of the excerpt.
Leverage agile frameworks to provide a robust
<!-- endOfPreview -->
synopsis for high-level overviews. Iterative
You can find the code examples on Github/derKuba.
Do you have any questions or suggestions? Feel free to reach out to me on Twitter.