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

The functionality of arguments in the whenAllDone promise/deferred javascript helper seems to fail when attempting to encapsulate existing code within a Deferred

What is the best way to transform an array of string values into an array of objects?

Issue occurring while trying to select an item from the dynamically generated options using AJAX

Comparing front end automation between JavaScript and Java or Ruby

Modify the Div background color by accessing the HEX value saved in a JSON file

Minimize the amount of external asynchronous calls made by the client

The Angular JSONP feature is malfunctioning

Show or hide a specific element based on whether a certain radio button is selected or deselected

Node.js with Socket.io causes multiple events to be triggered

Issue with JQuery UI Tabs not displaying additional HTML pages in JavaScript

When I use the jQuery foreach loop, I notice that it produces identical results for both values

Passport Node: Issue with Password Comparison results in an undefined function error, causing return done(null, user) to fail

Having trouble getting your custom Angular directive to function properly with dynamically changing images?

Failed to locate lodash during npm installation

Updating state using the react `setState()` function will automatically trigger a re-render

Creating responsive tabs that transition into a drop-down menu for mobile devices is a useful feature for

Definition of Stencil Component Method

What is the process of replacing fetch with JavaScript?

Send the user back to the previous page once authentication is complete

Generating a fresh array based on the size of its existing elements is the key feature of the ForEach method