How do I use an excerpt from Eleventy's gray-matter?

Question

Goal: Display a post excerpt for each post in the post list of an Eleventy blog

I'm adapting this starter project as my own blog. I'm referring to this Eleventy document to get the post excerpt.

My code:

I started by editing my .eleventy.js to enable gray-matter excerpt, per the above document, like so:

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(pluginRss);
  eleventyConfig.addPlugin(pluginSyntaxHighlight);
  eleventyConfig.addPlugin(pluginNavigation);

  eleventyConfig.setDataDeepMerge(true);
  eleventyConfig.setFrontMatterParsingOptions({ excerpt: true
                                              });
  /* file continues below */

Next, I added "---" following the first paragraph in some blog posts, per the example.

Finally, I updated /_includes/postslist.njk to include a reference to the excerpt for each post, so my new file now reads:

<ol reversed class="postlist" style="counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }}">
{% for post in postslist | reverse %}
  <li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
    <a href="{{ post.url | url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
    <time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | htmlDateString }}</time>
    {% for tag in post.data.tags %}
      {%- if collections.tagList.indexOf(tag) != -1 -%}
      {% set tagUrl %}/tags/{{ tag }}/{% endset %}
      <a href="{{ tagUrl | url }}" class="tag">{{ tag }}</a>
      {%- endif -%}
    {% endfor %}
    {%- if post.excerpt -%}
        <p>{{ post.excerpt }}</p>
    {%- endif -%}
  </li>
{% endfor %}
</ol>

but no excerpts appear.

What I've Tried

I've checked for empty paragraph tags in the output HTML, and they are not there, so the if condition itself is failing.

I've tried setting the excerpt separator to something other than the default "---", with the same result.

Importantly, I've tried disabling excerpts in the .eleventy.js, which causes the separator to be read as regular markdown. This is important because it shows that gray-matter is correctly reading my separators in the blog posts as separators, and therefore the problem must be in my /_includes/postslist.njk.

Conclusion

How do I reference the excerpt that Eleventy generates from gray-matter?

(P. S.: I don't have enough reputation to create a StackOverflow tag for the gray-matter npm package, but imho it wouldn't be a bad idea if somebody wanted to do that. I've tagged it with yaml-front-matter, which isn't wholly inaccurate, but as I understand it my issue is pretty specific to the gray-matter dialect of yaml front matter. )

Answer 1

As per the documentation, eleventy makes the excerpt available under the page variable (see Eleventy supplied data), not as a 'top-level' property of a collection item. The page variable is part of the data object of a collection item. If you use post.data.page.excerpt instead of post.excerpt it will work as expected:

{%- if post.data.page.excerpt -%}
    <p>{{ post.data.page.excerpt }}</p>
{%- endif -%}

Alternatively, you can use the excerpt_alias option to make the excerpt available as a top-level property. With this configuration, your template will work as is:

eleventyConfig.setFrontMatterParsingOptions({
    excerpt: true,
    excerpt_alias: 'excerpt',
});