In my markdoc content, I can access frontmatter fields with double-curly braces like {{title}}. However, it is unclear how to do this within a Markdoc node as the double braces do not work.
#markddoc frontmatter
opaque loom
north phoenixBOT
Hi @opaque loom. 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 extracts, you can access frontmatter in your Markdoc content by passing the entry data property where you render your content. This can be done using the getEntry function from 'astro:content'. Here is an example:
---import { getEntry } from 'astro:content';
const entry = await getEntry('docs', 'why-markdoc');
const { Content } = await entry.render();---
<Content frontmatter={entry.data} />
After this, the frontmatter can be accessed as $frontmatter in your Markdoc. However, the extracts do not provide information on how to access frontmatter within a Markdoc node using double-curly braces like {{title}}.
For more detailed information, you may want to refer to the Astro documentation (https://docs.astro.build/en/guides/integrations-guide/markdoc#access-frontmatter-from-your-markdoc-content).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
opaque loom
@north phoenix when you say "where you render your content", do you generally mean something like the src/pages/articles/[slug].astro?
north phoenixBOT
Let me check the knowledge base for you. One moment! :books:
Yes, that's correct. When we say "where you render your content", it generally refers to the specific Astro component file where you want to display the content. This could be a file like src/pages/articles/[slug].astro or any other Astro component file where you're rendering the content of your Markdoc files.
In these files, you can use the getEntry or getEntryBySlug functions from 'astro:content' to fetch the specific content entry and then render it using the Content component. Here's an example:
---import { getEntryBySlug } from 'astro:content';
const entry = await getEntryBySlug('docs', 'why-markdoc');
const { Content } = await entry.render();---
<!--Access frontmatter properties with `data`-->
<h1>{entry.data.title}</h1>
<!--Render Markdoc contents with the Content component-->
<Content />
In this example, entry.data gives you access to the frontmatter of the Markdoc file. You can then use these properties when rendering your content.