#Variable content inside collections

7 messages · Page 1 of 1 (latest)

limpid swallow
#

How can I include variable content inside collections, comming from Astro.props or Astro.params?

random crescentBOT
#

Hi @limpid swallow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

You can pass variable content inside collections in Astro by using Astro.props or Astro.params. Here's how you can do it:

  1. Passing an entire content entry as a prop:
    You can pass an entire content entry as a prop to a component. If you do this, you can use the CollectionEntry utility to correctly type your components props using TypeScript. This utility takes a string argument that matches the name of your collection schema, and will inherit all of the properties of that collection’s schema.
---import type { CollectionEntry } from 'astro:content';
interface Props { post: CollectionEntry<'blog'>;}
// `post` will match your 'blog' collection schema type
const { post } = Astro.props;---

Source: Astro Documentation (https://docs.astro.build/en/guides/content-collections/)

  1. Passing variables to your content:
    Variables can be passed as props via the Content component. This is useful when passing SSR parameters like A/B tests.
---import { getEntryBySlug } from 'astro:content';
const entry = await getEntryBySlug('docs', 'why-markdoc');
const { Content } = await entry.render();---
<!--Pass the `abTest` param as a variable-->
<Content abTestGroup={Astro.params.abTestGroup} />

Source: Astro Documentation (https://docs.astro.build/en/guides/integrations-guide/markdoc/)

Remember to replace 'blog', 'docs', 'why-markdoc', and 'abTestGroup' with your actual collection name, document name, and variable name respectively.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@limpid swallow kapa.ai is still learning and improving, please let us know how it did by reacting below

limpid swallow
#

@random crescent this example is not working. How should be the content entry?

random crescentBOT
#

Let me check the knowledge base for you. One moment! :books:

#

I'm sorry for the confusion. The content entry should be structured according to your collection schema. Here's an example of how you can pass an entire content entry as a prop:

---import type { CollectionEntry } from 'astro:content';
interface Props { post: CollectionEntry<'blog'>;}
// `post` will match your 'blog' collection schema type
const { post } = Astro.props;---

In this example, post is a prop that matches the 'blog' collection schema type. This means that the 'blog' collection should have a schema that defines the structure of its entries. The post prop will inherit all properties of that collection’s schema.

If you're having trouble, make sure that:

  1. Your collection schema is correctly defined.
  2. The content entry you're passing as a prop matches the structure defined in your collection schema.
  3. You're correctly importing and using the CollectionEntry utility.

If you're still having issues, could you please provide more details about the error you're encountering or the specific use case you're trying to implement? This will help me provide a more accurate solution.

Source: Astro Documentation (https://docs.astro.build/en/guides/content-collections/)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: