eleventy-plugin-read-more

A plugin that provides shortcodes and filters for easily displaying post summaries and read-more links.

• Installation
• Usage
  • readMore
  • excerpt
  • hasMoretag
• Options
• License

Installation

# npm 
npm i eleventy-plugin-read-more
 
# yarn 
yarn add eleventy-plugin-read-more

Usage

Register the plugin in you .eleventy.js file:

const eleventyReadMorePlugin = require("eleventy-plugin-read-more");
 
module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(eleventyReadMorePlugin);
});

In your post content, insert a readMoreTag break point using <!--more-->.

For example:

Post content to be shown in summary and full view
 
<!--more-->
 
The rest of the post

In your template (nunjucks example):

{% readMore content %}
<p>
  <a href="{{ page.url }}">Continue reading &rarr;</a>
</p>
{% endreadMore %}

This will output:

Post content to be shown in summary and full view
<p>
  <a href="/posts/2020/01/01/my-awesome-post">Continue reading &rarr;</a>
</p>

readMore

A paired eleventy shortcode (see Usage). It will only show before the readMoreTag and, if found, will append the provided read more link.

Nunjucks example:

{% readMore __CONTENT__ %} __READ_MORE_LINK__ {% endreadMore %}

excerpt

An eleventy filter. Will return all the supplied content before the readMoreTag.

Nunjucks example:

{{ "A post summary <!--more--> The full content" | excerpt }}

Outputs "A post summary".

hasMoretag

An eleventy filter. Will return true or false if the supplied content contains the readMoreTag. This can be used in conditional statements.

Nunjucks example:

{{ "A post summary <!--more--> The full content" | hasMoretag }}

Outputs true.

Options

var options = {
  readMoreTag: "<!--my-read-more-tag-->",
};
 
eleventyConfig.addPlugin(eleventyNavigationPlugin, options);

• readMoreTag (string, default <!--more-->) - a text string to use to break content and insert a read-more link.

License

This software is released under the MIT License.