N
Nuxt•4d ago
Angius

Excerpt does not work

I have .md files with <!--more--> delimiter in them. I'm trying to render just that excerpt with 
<ContentRenderer :value="post" :excerpt="true" :tag="'div'" class="excerpt" />
<ContentRenderer :value="post" :excerpt="true" :tag="'div'" class="excerpt" />
but it just doesn't work, it renders the entire post instead. What's more, after inspecting post, it turns out this object doesn't have the excerpt property, despite the docs stating that every item that has <!--more--> will have it.
6 Replies
kapa.ai
kapa.ai•4d ago
Hi @Angius. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can address your issue regarding excerpts in Nuxt Content. The <!--more--> delimiter is indeed used to define excerpts in Markdown files for Nuxt Content. However, there are a few important points to consider: 1. Excerpt Definition: According to the Markdown documentation, the <!--more--> divider is used to extract content excerpts or summaries from the content. 2. Excerpt Property: The documentation states that if there is no <!--more--> divider in the text, then the excerpt is undefined. This could explain why you're not seeing the excerpt property in your post object. 3. Rendering Excerpt: The <ContentRenderer> component does have an excerpt prop, but it might not be working as expected in your case. To troubleshoot this issue, you can try the following: 1. Double-check that your Markdown files have the <!--more--> divider correctly placed. 2. Instead of using <ContentRenderer>, you could try accessing the excerpt directly. If the excerpt is properly defined, it should be available in the post object. You could try rendering it like this: 
<div v-if="post.excerpt" class="excerpt">
  {{ post.excerpt }}
</div>
<div v-if="post.excerpt" class="excerpt">
  {{ post.excerpt }}
</div>
3. If you're using queryCollection() to fetch your posts, make sure you're including the excerpt in your query. For example: 
const post = await queryCollection('your-collection').where({ ... }).first()
const post = await queryCollection('your-collection').where({ ... }).first()
4. If none of the above work, there might be an issue with how Nuxt Content is processing your Markdown files. You may want to check your Nuxt Content configuration to ensure it's set up correctly to handle excerpts. If you're still experiencing issues after trying these suggestions, it might be worth reporting this as a potential bug to the Nuxt Content team, as the behavior you're experiencing doesn't match what's described in the documentation. Nuxt Content Markdown documentation provides more details on how excerpts should work, which you can reference for further information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4d ago
<@85903769203642368> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Angius
AngiusOP•4d ago
@kapa.ai None of that worked. All files have the more delimiter, none of them have an .excerpt property
kapa.ai
kapa.ai•4d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize that the previous suggestions didn't resolve your issue. Based on the information you've provided and the knowledge sources available, it seems you're encountering a problem that isn't directly addressed in the current documentation. Given that you've confirmed all your files have the <!--more--> delimiter and none of them have an .excerpt property, there might be an issue with how Nuxt Content is processing your Markdown files or a potential bug in the current version you're using. At this point, I would recommend the following steps: 1. Double-check your Nuxt Content version. Make sure you're using the latest version, as there might have been fixes or changes related to excerpt handling. 2. Verify your content.config.ts file (if you have one) to ensure there are no configurations that might be interfering with excerpt processing. 3. As this appears to be unexpected behavior based on the documentation, it would be beneficial to report this issue to the Nuxt Content team. As suggested in the Getting Help documentation, you can: - Open a GitHub Discussion to get community help. - If you suspect it's a bug, consider reporting it following the guidelines for reporting bugs. When reporting the issue, be sure to include: - Your Nuxt and Nuxt Content versions - A minimal reproduction of the problem (if possible) - Examples of your Markdown files with the <!--more--> delimiter - Any relevant configuration files The Nuxt community is generally very helpful, and by reporting this issue, you'll not only potentially find a solution for yourself but also help improve the framework for other users who might be experiencing similar problems. If you need immediate assistance and can't wait for a community response, you might consider reaching out to Nuxt Experts for professional support, as mentioned in the documentation. I apologize that I couldn't provide a direct solution to your problem. The behavior you're experiencing seems to deviate from what's described in the current documentation, suggesting it might be a bug or an undocumented change in recent versions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4d ago
<@85903769203642368> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Mittchel
Mittchel•3d ago
import MarkdownIt from 'markdown-it';

const md = new MarkdownIt();

function extractExcerpt(markdownContent) {
  if (!markdownContent) return "";
  const moreIndex = markdownContent.indexOf('Bla bla bla');

  if (moreIndex === -1) {
    return md.render(markdownContent); 
  }

  const excerpt = markdownContent.substring(0, moreIndex).trim();
  return md.render(excerpt); 
}

export default extractExcerpt;
import MarkdownIt from 'markdown-it';

const md = new MarkdownIt();

function extractExcerpt(markdownContent) {
  if (!markdownContent) return "";
  const moreIndex = markdownContent.indexOf('Bla bla bla');

  if (moreIndex === -1) {
    return md.render(markdownContent); 
  }

  const excerpt = markdownContent.substring(0, moreIndex).trim();
  return md.render(excerpt); 
}

export default extractExcerpt;
Using the Extraction Function 
<template>
  <div v-if="post">
    <ContentRenderer :value="excerpt" tag="div" class="excerpt" />
    <button v-if="hasMore" @click="showFullPost">Read More</button>
  </div>
</template>

<script>
import extractExcerpt from './utils/extractExcerpt'; // Import your utility function
import MarkdownIt from 'markdown-it';

const md = new MarkdownIt();

export default {
  props: {
    post: {
        type: String,
        default: null
    }
  },
  data() {
    return {
      excerpt: null,
      hasMore: false,
    };
  },
  mounted() {
    if(this.post) {
        this.excerpt = extractExcerpt(this.post);
        this.hasMore = this.post.includes('');
    }
  },
  methods: {
    showFullPost() {
      this.$emit('showFullPost', md.render(this.post));
    }
  }
};
</script>
<template>
  <div v-if="post">
    <ContentRenderer :value="excerpt" tag="div" class="excerpt" />
    <button v-if="hasMore" @click="showFullPost">Read More</button>
  </div>
</template>

<script>
import extractExcerpt from './utils/extractExcerpt'; // Import your utility function
import MarkdownIt from 'markdown-it';

const md = new MarkdownIt();

export default {
  props: {
    post: {
        type: String,
        default: null
    }
  },
  data() {
    return {
      excerpt: null,
      hasMore: false,
    };
  },
  mounted() {
    if(this.post) {
        this.excerpt = extractExcerpt(this.post);
        this.hasMore = this.post.includes('');
    }
  },
  methods: {
    showFullPost() {
      this.$emit('showFullPost', md.render(this.post));
    }
  }
};
</script>

Did you find this page helpful?