Aggiungere uno slug ai tuoi documenti

Quando si costruisce un CMS, è comune voler generare slug per i propri documenti in base a un campo specifico, come il titolo. Questo è utile per creare URL SEO-friendly e migliorare la reperibilità dei contenuti.

In questo tutorial, ti mostreremo come generare automaticamente slug per i tuoi documenti usando FireCMS. È molto semplice aggiungere un callback che verrà eseguito prima di salvare il documento, permettendoti di generare lo slug in base al campo titolo.

Dichiara la tua collezione

Per scopi illustrativi, creiamo una semplice collezione pages, con solo un campo titolo, a cui aggiungeremo uno 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,
        }
    }
});

Aggiungi il callback pre-salvataggio

Per aggiungere uno slug ai tuoi documenti, puoi usare il callback onPreSave fornito da FireCMS. Questo callback verrà eseguito prima di salvare il documento, permettendoti di modificarlo prima che venga scritto nel database.

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;
    }
};

Codice completo

Ecco il codice completo per questo esempio:

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,
        }
    }
});