What is the syntax for linking to a different file in the frontmatter of a markdown file?

Question

What is the syntax for linking to a different file in the frontmatter of a markdown file?

Currently, I am in the process of setting up Astro's Content Collections. One particular task I would like to achieve is referencing a specific author from my `authorCollection` within an article.

In attempting to accomplish this, I considered utilizing the following method in the frontmatter of my article:

--- 

title: My Article 

author: [John Doe](./authors/author-john-doe.md)

---

If the above approach is feasible, how do I go about defining it in the config file?

Presently, my `articleCollection` definition appears as follows:

const articleCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    publishedAt: z.date(),
    updatedAt: z.date(),
    excerpt: z.string(),
    seoDescription: z.string(),
    category: z.array(z.string()),
    image: z.string().optional(),
    author: z.string().default("Anonymous"),
  }),
})

javascript markdown astrojs

Answer 1

Answer №1

One approach to consider is transforming the author property into an object and utilizing it in querying the collection.

An example of how your article structure could look:

---
title: My Article
author:
    name: John
    link: './authors/author-john'
---

Article content

The schema definition for this setup would involve:

import { defineCollection, z } from 'astro:content';

const articleCollection = defineCollection({
    schema: z.object({
        title: z.string(),
        author: z.object({
            name: z.string(),
            link: z.string()
        }).optional().default({
            name: 'Anonymous',
            link: './authors/author-anonymous'
        })
        // Additional properties
    }),
});

export const collections = {
    articles: articleCollection,
};

When querying the collection within your Astro component:

---
import { getCollection } from 'astro:content';
const allArticles = await getCollection('articles');
---

<ul>
    {allArticles.map(article => (
        <li>
            <h1>{article.data.title}</h1>
            <a href={article.data.author.link}>{article.data.author.name}</a>
        </li>
    ))}
</ul>

NOTE: To ensure links to individual authors are functional, setting up dynamic routing for each author page is crucial.

Answer 2

One approach to consider is transforming the author property into an object and utilizing it in querying the collection.

An example of how your article structure could look:

---
title: My Article
author:
    name: John
    link: './authors/author-john'
---

Article content

The schema definition for this setup would involve:

import { defineCollection, z } from 'astro:content';

const articleCollection = defineCollection({
    schema: z.object({
        title: z.string(),
        author: z.object({
            name: z.string(),
            link: z.string()
        }).optional().default({
            name: 'Anonymous',
            link: './authors/author-anonymous'
        })
        // Additional properties
    }),
});

export const collections = {
    articles: articleCollection,
};

When querying the collection within your Astro component:

---
import { getCollection } from 'astro:content';
const allArticles = await getCollection('articles');
---

<ul>
    {allArticles.map(article => (
        <li>
            <h1>{article.data.title}</h1>
            <a href={article.data.author.link}>{article.data.author.name}</a>
        </li>
    ))}
</ul>

NOTE: To ensure links to individual authors are functional, setting up dynamic routing for each author page is crucial.

What is the syntax for linking to a different file in the frontmatter of a markdown file?

Answer №1

Similar questions

An error was encountered while attempting to proxy the request [HPM]

No data, response or issue received from the Internet API

Bidirectional data connection in a Meteor application

Undefined React custom hooks can be a tricky issue to troub

What is the best way to increase a count in MongoDB?

Creating a radio button along with a submit button that redirects to a different local HTML file

Modify File Name with Fine Uploader: Personalize Your File Titles

Event object not being passed to function in UIWebView Javascript onclick event

The Issue of Horizontal Scrolling - None of the elements are out of

What is the process for obtaining intersection set data from an array?

Is there a way to showcase a single HTML canvas across multiple div elements?

displaying only the date in bootstrap-datetimepicker

I attempted to initiate a transition using JavaScript, but unfortunately it failed to execute

Tips on ensuring data cleanliness in jQuery input fields

What is the ternary operation syntax for setting the img src attribute in Angular 8?

Error in executing Javascript function

Exploring Nextjs with server-side rendering and fetching data from

What is the best way to execute a .js file with a Mocha suite repeatedly within a loop?

How come WhatsApp is not recognizing my og:tags correctly?

gulp.watch executes tasks without following a specific sequence