Generate excerpt when no excerpt_separator present in content

[keithjgrant]

Is your feature request related to a problem? Please describe.

I'm trying to use excerpts to generate my site's meta description tags, but the current implementation only generates an excerpt when the separator is present in my markdown. It's null/undefined otherwise.

Some of my posts use the <!-- excerpt --> separator, but most do not, and I expect I will forget to add it many times in the future.

Describe the solution you'd like

I'd love for a way to generate excerpts for all pages, even when the separator isn't present. This could be done via character limit, word limit, or paragraph count — any of these would be better than the current behavior, IMO.

I'd like to be able to do something like this to configure it:

eleventyConfig.setFrontMatterParsingOptions({
  excerpt: true,
  excerpt_alias: '<!-- excerpt -->',
  excerpt_char_limit: 180,         // specify a truncation option to use if the excert_alias is missing
});

It might make sense to leave the current behavior as is, unless this new option is specified.

Describe alternatives you've considered

There's clearly a need here, as I found several blog posts — however most of these solutions were tailored towards collections, not individual pages, and it's taking some work for me to adapt their approaches:

• https://www.belenalbeza.com/articles/better-excerpts-in-eleventy/
• https://www.jonathanyeong.com/garden/excerpts-with-eleventy/
• https://keepinguptodate.com/pages/2019/06/creating-blog-with-eleventy/#displaying-excerpts-on-the-homepage

I'm currently using {{ content | striptags() | truncate(160) }} in my include'd template partial, but this uses the final rendered HTML, so it has extra content such as the post date and title that I render before the main body of my page. I'd like to keep that stuff out of my summary.

Additional context

No response

[pdehaan]

Here's a very rough LiquidJS based example for generating excerpts from the current page using a handful of probably Very Bad Ideas(tm):

  eleventyConfig.setFrontMatterParsingOptions({
    excerpt: true,
    excerpt_separator: "<!-- excerpt -->",
  });

  eleventyConfig.addFilter("excerptify", function (page, wordcount = 10) {
    const {
      liquid: { filters: f },
      context: { environments: env },
    } = this;
    const formatExcerpt = (html = "") => f.strip_html(html).replace(/\s+/g, " ").trim();
    let excerpt = page.excerpt;
    if (excerpt) {
      return formatExcerpt(excerpt);
    }

    const self = env.collections.all.find((p) => p.url === page.url);
    const templateContent = self.template._dataCache.content || "";
    excerpt = formatExcerpt(templateContent);
    return f.truncatewords(excerpt, wordcount);
  });

USAGE

src/_includes/layouts/base.liquid

<meta description="{{ page | excerptify }}" />
...

src/index.liquid

Has an excerpt. Uses it, but strips the HTML (since I was imagining using it in meta description tags):

---
title: Page Index
layout: layouts/base.liquid
---

This is an excerpt. Huzzah!

<p>More of an excerpt, but its kinda neat</p>

<!-- excerpt -->

<h2>{{ title }}</h2>

THis is more content, but not part of an excerpt

OUTPUT

<meta description="This is an excerpt. Huzzah! More of an excerpt, but its kinda neat" />

src/one.liquid

Doesn't have an excerpt <!-- excerpt --> marker, so takes the template content and uses the first 10 words (after removing HTML tags):

---
title: PAGE One
layout: layouts/base.liquid
---

# {{ title }}

Thjis is some content, but it's not very good.
but does it do the job? kinda.

OUTPUT

<meta description="PAGE One Thjis is some content, but it's not very..." />

Using Eleventy v2. Didn't try in Nunjucks or older versions of Eleventy, so your mileage may vary.

---

UPDATE: I got bored/curious, so here's an equally poor Nunjucks filter example. Main differences are just filter names and context juggling when using this to sneakily get access to built-in template engine filters and collections.all.

  eleventyConfig.addFilter("excerptify_n", function (page, length = 20) {
    const { env: { filters: f }, ctx } = this;
    const formatExcerpt = (html = "") => f.striptags(html).replace(/\s+/g, " ").trim();
    let excerpt = page.excerpt;
    if (excerpt) {
      return formatExcerpt(excerpt);
    }
    const self = ctx.collections.all.find((p) => p.url === page.url);
    const templateContent = self.template._dataCache.content || "";
    excerpt = formatExcerpt(templateContent);
    return f.truncate(excerpt, length);
  });

[pdehaan]

I'm currently using {{ content | striptags() | truncate(160) }} in my include'd template partial, but this uses the final rendered HTML, so it has extra content such as the post date and title that I render before the main body of my page. I'd like to keep that stuff out of my summary.

Another unpopular idea would possibly be to use something like https://cheerio.js.org/ to scrape the <main> block (or wherever your want to put your content that you're trying to generate an excerpt for).

PROS: You can control what level of HTML you want to generate an excerpt for.
CONS: Probably computationally expensive to parse the DOM constantly for every build. Although I've found cheerio to be pretty speedy. Might also be an issue if you aren't parsing a full HTML document and it's just a fragment.

[nhoizey]

I had this article in a draft state for too long, so here it is: How I built my own excerpt for Markdown content in Eleventy.

Not really what you're looking for, but it might be interesting anyway.

[pdehaan]

I forgot that gray-matter's excerpt can take a function:

const sanitizeHtml = require("sanitize-html");

  eleventyConfig.setFrontMatterParsingOptions({
    excerpt_separator: "<!-- excerpt -->",
    excerpt_char_limit: 180,
    excerpt(file, options) {
      if (file.content.includes(options.excerpt_separator)) {
        // Return the raw excerpt. This might include HTML. 🤷 
        file.excerpt = file.content
          .slice(0, file.content.indexOf(options.excerpt_separator))
          .trim();
        return;
      }
      // No excerpt marker found, extract the first n characters after removing HTML tags.
      file.excerpt = sanitizeHtml(file.content, { allowedTags:[] })
        .replace(/\s+/g, " ")
        .slice(0, options.excerpt_char_limit)
        .trim();
    },
  });

Although the big caveat with this is that gray-matter is one of the first things to run in the pipeline (so it can extract front-matter from page contents). So your excerpt might have unparsed Nunjucks/Liquid templating. May or may not be a concern depending on your use case.
You might be able to rehydrate the excerpt's variables using https://www.11ty.dev/docs/plugins/render/, but that will probably have a few hiccups w/ data cascade and execution timing.

[nhoizey]

the big caveat with this is that gray-matter is one of the first things to run in the pipeline (so it can extract front-matter from page contents). So your excerpt might have unparsed Nunjucks/Liquid templating.

Indeed, that's a limitation I've accepted in my own usage.