Ein Slug zu Ihren Dokumenten hinzufügen

Beim Aufbau eines CMS ist es üblich, Slugs für Dokumente zu generieren basierend auf einem bestimmten Feld, wie dem Titel. Dies ist nützlich für die Erstellung SEO-freundlicher URLs und die Verbesserung der Auffindbarkeit Ihrer Inhalte.

In diesem Tutorial zeigen wir Ihnen, wie Sie automatisch Slugs für Ihre Dokumente mit FireCMS generieren. Es ist sehr einfach, einen Callback hinzuzufügen, der vor dem Speichern Ihres Dokuments ausgeführt wird, und der Ihnen ermöglicht, den Slug basierend auf dem Titelfeld zu generieren.

Ihre Kollektion deklarieren

Zu Illustrationszwecken erstellen wir eine einfache pages-Kollektion mit nur einem Titelfeld, zu dem wir einen Slug hinzufügen werden:

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

Den Pre-Save-Callback hinzufügen

Um Ihren Dokumenten einen Slug hinzuzufügen, können Sie den von FireCMS bereitgestellten onPreSave-Callback verwenden. Dieser Callback wird vor dem Speichern des Dokuments ausgeführt und ermöglicht es Ihnen, das Dokument zu ändern, bevor es in die Datenbank geschrieben wird.

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

Vollständiger Code

Hier ist der vollständige Code für dieses Beispiel:

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