#Use contents from frontmatter

1 messages · Page 1 of 1 (latest)

vale axle
#

I added a my own frontmatter entry hidetitle to determine whether a page should display PageTitle or not. Now I need to work in the PageTitle component rewriting part. How do I read the page's frontmatter to see if the hidetitle is true or false?

cunning urchinBOT
#

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

#

To conditionally display the page title in your custom PageTitle component based on a hidetitle frontmatter property, you should access the page’s frontmatter data. In Starlight, when overriding components, you can use the starlightRoute object to access all frontmatter fields for the current page.

Here’s how you can do it in your PageTitle.astro component:

---
// Access frontmatter from the current page
const { title, hidetitle } = Astro.locals.starlightRoute.entry.data;
---

// Conditionally render the title based on the 'hidetitle' frontmatter property
{!hidetitle && <h1 id="_top">{title}</h1>}

This code checks if hidetitle is not true, and only then renders the <h1> with the page title. If hidetitle is true in the frontmatter, the title will be hidden.

You can find more about accessing page data in Starlight’s component overrides documentation: Use page data.

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

#

@vale axle Kapa.ai is still learning and improving, please let me know how I did by reacting below.

stoic viper
#

@cunning urchin Is there not some way I could use a custom loader to fetch all of the files and filter by the tag

cunning urchinBOT
#

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

#

Yes, you can use a custom loader in Astro’s content collections to fetch all files and then filter by tag. Astro allows you to define custom loaders for your collections, which can fetch data from any source (local or remote). Once your collection is set up with a loader, you can use the getCollection() function to retrieve all entries and then filter them by tag.

Example workflow:

  1. Define a custom loader in your src/content.config.ts file. This loader could fetch data from anywhere (filesystem, API, etc.) and must return an array of entries, each with an id and other properties.

  2. Query the collection using getCollection(), and filter the results by the tag you want.

Example:

// src/content.config.ts
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  loader: async () => {
    // Fetch or read your data here
    // Example: return [{ id: 'post-1', tags: ['astro', 'web'], ... }, ...]
  },
  schema: z.object({
    title: z.string(),
    tags: z.array(z.string()),
    // ...other fields
  }),
});

export const collections = { blog };

Then, in your Astro page or component:

import { getCollection } from 'astro:content';

const allPosts = await getCollection('blog');
const filteredPosts = allPosts.filter(post => post.data.tags.includes('your-tag'));

This approach gives you full control over how files are loaded and filtered. The loader can be as simple or complex as you need, and filtering by tag is straightforward once you have all entries loaded.