A plugin that provides shortcodes and filters for easily displaying post summaries and read-more links.
# npm
npm i eleventy-plugin-read-more
# yarn
yarn add eleventy-plugin-read-more
Register the plugin in you .eleventy.js
file:
const eleventyReadMorePlugin = require("eleventy-plugin-read-more");
module.exports = (eleventyConfig) => {
eleventyConfig.addPlugin(eleventyNavigationPlugin);
});
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 →</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 →</a>
</p>
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 %}
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"
.
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
.
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.
This software is released under the MIT License.