Ajouter un slug à vos documents

Lors de la construction d’un CMS, il est courant de vouloir générer des slugs pour vos documents basés sur un champ spécifique, comme le titre. Ceci est utile pour créer des URLs SEO-friendly et améliorer la découvrabilité de votre contenu.

Dans ce tutoriel, nous vous montrerons comment générer automatiquement des slugs pour vos documents en utilisant FireCMS. C’est très simple d’ajouter un callback qui sera exécuté avant la sauvegarde de votre document, vous permettant de générer le slug basé sur le champ titre.

Déclarer votre collection

À des fins d’illustration, créons une collection pages simple, avec juste un champ titre, auquel nous allons ajouter un slug :

import { buildCollection } from "@firecms/core";

export type Page = {
    title: string;
    slug: string;
}

export const pagesCollection = buildCollection<Page>({
    name: "Pages",
    id: "pages",
    path: "pages",
    properties: {
        title: {
            name: "Title",
            validation: { required: true },
            dataType: "string"
        },
        slug: {
            name: "Slug",
            dataType: "string",
            readOnly: true,
        }
    }
});

Ajouter le callback pré-sauvegarde

Pour ajouter un slug à vos documents, vous pouvez utiliser le callback onPreSave fourni par FireCMS. Ce callback sera exécuté avant la sauvegarde du document, vous permettant de modifier le document avant qu’il soit écrit dans la base de données.

import { EntityCallbacks, slugify } from "@firecms/core";

const callbacks: EntityCallbacks = {
    onPreSave: ({
                    collection,
                    path,
                    entityId,
                    values,
                    status,
                    context
                }) => {
        const updatedSlug = slugify(values.title);
        values.slug = updatedSlug;
        return values;
    }
};

Code complet

Voici le code complet pour cet exemple :

import { buildCollection, slugify } from "@firecms/core";

export type Page = {
    title: string;
    slug: string;
}

export const pagesCollection = buildCollection<Page>({
    name: "Pages",
    id: "pages",
    path: "pages",
    callbacks: {
        onPreSave: ({
                        values,
                    }) => {
            const updatedSlug = slugify(values.title);
            values.slug = updatedSlug;
            return values;
        }
    },
    properties: {
        title: {
            name: "Title",
            validation: { required: true },
            dataType: "string"
        },
        slug: {
            name: "Slug",
            dataType: "string",
            readOnly: true,
        }
    }
});