Hi @winged plinth. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#sub category selfreference
quick coralBOT
Oui, il est possible d'avoir une collection avec un champ qui s'auto-référence dans Astro. Voici comment vous pouvez implémenter cela pour votre navigation avec des sous-catégories :
- Définissez votre collection "categories" avec un champ qui référence la même collection :
import { defineCollection, reference } from 'astro:content';
const categories = defineCollection({
schema: z.object({
title: z.string(),
level: z.number(),
parent_category: reference('categories').optional(),
})
});
export const collections = { categories };
- Pour récupérer et utiliser ces données dans votre navigation, vous pouvez faire comme suit :
---
import { getCollection } from 'astro:content';
const allCategories = await getCollection('categories');
// Fonction pour obtenir les sous-catégories
function getSubcategories(parentId) {
return allCategories.filter(cat => cat.data.parent_category?.id === parentId);
}
// Obtenir les catégories de niveau supérieur
const topLevelCategories = allCategories.filter(cat => cat.data.level === 1);
---
<nav>
<ul>
{topLevelCategories.map(category => (
<li>
<a href={`/categories/${category.slug}`}>{category.data.title}</a>
{getSubcategories(category.id).length > 0 && (
<ul>
{getSubcategories(category.id).map(subcat => (
<li>
<a href={`/categories/${subcat.slug}`}>{subcat.data.title}</a>
</li>
))}
</ul>
)}
</li>
))}
</ul>
</nav>
Cette approche vous permet de créer une structure de navigation hiérarchique basée sur vos catégories et sous-catégories.
Pour plus d'informations sur la définition des références dans les collections et l'accès aux données référencées, vous pouvez consulter la documentation officielle d'Astro :
- Defining collection references (https://docs.astro.build/en/guides/content-collections/#defining-collection-references)
- Accessing referenced data (https://docs.astro.build/en/guides/content-collections/#accessing-referenced-data)
N'oubliez pas que vous devrez ajuster ce code en fonction de votre structure spécifique et de vos besoins en matière de style et de comportement pour les dropdowns.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
winged plinth
euh mon cas précis c'est ca :
surreal foxBOT