Die Erstellung eines StudioCMS-Plugins ist eine leistungsstarke Möglichkeit, die Funktionalität von StudioCMS zu erweitern. Sie bieten eine einfache und flexible Möglichkeit, neue Funktionen zu deinem StudioCMS-Projekt hinzuzufügen. Das folgende Beispiel zeigt dir, wie du ein StudioCMS-Plugin erstellst und wie es funktioniert.
Um loszulegen, musst du ein neues StudioCMS-Plugin erstellen. Im Folgenden findest du ein grundlegendes Beispiel für die Dateistruktur eines StudioCMS-Plugins:
In der Hauptdatei src/index.ts definierst du das StudioCMS Plugin. Das folgende Beispiel zeigt, wie du ein StudioCMS-Plugin definierst, das eine Astro-Integration enthält, um ein einfaches Blog-Beispiel zu erstellen:
Creates a Vite virtual module and updates the Astro config.
Virtual imports are useful for passing things like config options, or data computed within the integration.
Creates a Vite virtual module and updates the Astro config.
Virtual imports are useful for passing things like config options, or data computed within the integration.
// In diesem Beispiel ist es in Ordnung, den Standard-Editor (Markdown) zu verwenden.
pageTypes: {
identifier: string;
label: string;
}[]
pageTypes:[{
identifier: string
identifier:'my-plugin',
label: string
label:'Blog Post (My Plugin)'}],
// Definiere die Gitterelemente für das Dashboard
// Dies sind die Elemente, die auf dem StudioCMS Dashboard angezeigt werden
// Du kannst so viele Elemente definieren, wie du willst
// In diesem Beispiel definieren wir ein einzelnes Element, das eine Spannweite von 2 hat und die Berechtigung „Editor“ benötigt. Außerdem injizieren wir eine Astro-Komponente, die das einfache benutzerdefinierte HTML-Element ersetzt.
dashboardGridItems: {
name: string;
span: number;
variant: string;
requiresPermission: string;
header: {
title: string;
icon: string;
};
body: {
html: string;
components: {
examplegriditem: string;
};
};
}[]
dashboardGridItems:[
{
name: string
name:'example',
span: number
span:2,
variant: string
variant:'default',
requiresPermission: string
requiresPermission:'editor',
header: {
title: string;
icon: string;
}
header:{
title: string
title:'Example',
icon: string
icon:'bolt'},
body: {
html: string;
components: {
examplegriditem: string;
};
}
body:{
// Verwende immer einfaches HTML ohne `-` oder Sonderzeichen in den Tags. Sie werden durch die Astro-Komponente ersetzt und dieses HTML wird nie gerendert.
html: string
html:'<examplegriditem></examplegriditem>',
components: {
examplegriditem: string;
}
components:{
// Injiziere die Astro-Komponente, um das einfache benutzerdefinierte HTML-Element zu ersetzen
Das obige Beispiel definiert ein StudioCMS-Plugin, das eine Astro-Integration enthält, um ein einfaches Blog-Beispiel zu erstellen. Das Plugin enthält eine Route, die in das StudioCMS-Projekt injiziert wird, und ein Grid-Element, das auf dem StudioCMS-Dashboard angezeigt wird.
In der Datei src/routes/[...slug].astro definierst du die Route für das Plugin. Das folgende Beispiel zeigt, wie du eine Route für das Plugin definierst. Der erste Teil ist das Frontmatter (zwischen den ----Zeichen) und der zweite Teil ist die HTML-Vorlage, die unter dem zweiten --- eingefügt wird.
Returns the value of the first element in the array where predicate is true, and undefined
otherwise.
@param ― predicate find calls predicate once for each element of the array, in ascending
order, until it finds one where predicate returns true. If such an element is found, find
immediately returns that element value. Otherwise, find returns undefined.
@param ― thisArg If provided, it will be used as the this value for each invocation of
predicate. If it is not provided, undefined is used instead.
Das obige Beispiel definiert eine dynamische Route^ für das Plugin, die eine Liste von Blogposts anzeigt, wenn kein Slug angegeben wird, und die den Inhalt eines Blogposts anzeigt, wenn ein Slug angegeben wird.
In der Datei src/dashboard-grid-items/MyPluginGridItem.astro definierst du das Grid Item für das Plugin. Das folgende Beispiel zeigt, wie du ein Grid Item für das Plugin definierst:
MyPluginGridItem.astro
---
import{StudioCMSRoutes}from'studiocms:lib';
importsdkfrom'studiocms:sdk';
// 'my-plugin' wird hier als Bezeichner für
// den pageType aus der Plugin-Definition verwendet
Das obige Beispiel definiert ein Grid-Element für das Plugin, das die 5 zuletzt aktualisierten Seiten der letzten 30 Tage anzeigt. Das Grid-Element enthält eine Liste mit Links zu den Bearbeitungsseiten der einzelnen Seiten im Content Management.
Integration mit den FrontendNavigationLinks Helfern
Wenn du die eingebauten StudioCMS-Navigationshilfen in deinem Projekt verwenden möchtest, ähnlich wie das Plugin @studiocms/blog, kannst du eine eigene Komponente Navigation.astro erstellen:
Das obige Beispiel definiert eine benutzerdefinierte Komponente Navigation.astro, die die eingebauten StudioCMS-Navigationshilfen verwendet, um ein Navigationsmenü für das Projekt zu erstellen. Die Komponente enthält Links zur Haupt-URL der Website, zur Indexseite und zu allen anderen Seiten, die in der Navigation angezeigt werden sollen.
Du musst nur noch ein paar Stile hinzufügen und schon hast du ein voll funktionsfähiges Navigationsmenü, das mit den eingebauten StudioCMS-Navigationshelfern funktioniert.
