Crear un complemento para StudioCMS es una forma poderosa de extender la funcionalidad de StudioCMS. Los complementos proporcionan una manera simple y flexible de agregar nuevas características a tu proyecto StudioCMS. A continuación se muestra un ejemplo básico de cómo crear un complemento de StudioCMS y cómo funciona.
Para comenzar, necesitarás crear un nuevo complemento de StudioCMS. A continuación se muestra un ejemplo básico de la estructura de archivos para un complemento de StudioCMS:
En el archivo principal src/index.ts, definirás el complemento de StudioCMS. A continuación se muestra un ejemplo de cómo definir un complemento de StudioCMS que incluye una Integración Astro para crear un ejemplo simple de blog:
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 this example we are okay using the default content editor (markdown).
pageTypes: {
identifier: string;
label: string;
}[]
pageTypes:[{
identifier: string
identifier:'my-plugin',
label: string
label:'Blog Post (My plugin)'}],
// Definir los elementos de la cuadrícula para el panel
// Estos son los elementos que serán mostrados en el panel de StudioCMS
// Puedes definir tantos elementos como desees
// En este ejemplo, estamos definiendo un solo elemento, que tiene un span de 2 y requiere el permiso 'editor' e inyecta un componente Astro que reemplaza el elemento personalizado de html plano.
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:{
// Siempre usa html plano sin `-` o caracteres especiales en las etiquetas, se reemplazarán con el componente Astro y este HTML nunca se renderizará
html: string
html:'<examplegriditem></examplegriditem>',
components: {
examplegriditem: string;
}
components:{
// Inyecta el componente de Astro para reemplazar el elemento personalizado en html plano
El ejemplo anterior define un complemento de StudioCMS que incluye una Integración Astro para crear un ejemplo simple de blog. El complemento incluye una ruta que se inyecta en el proyecto StudioCMS y un elemento de cuadrícula que se muestra en el Panel de Control de StudioCMS.
En el archivo src/routes/[...slug].astro, definirás la ruta para el complemento. A continuación se muestra un ejemplo de cómo definir una ruta para el complemento, lo dividiremos en dos partes, la primera parte es el frontmatter (entre las marcas ---), y la segunda parte es la plantilla HTML que se coloca debajo del segundo ---.
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.
El ejemplo anterior define una ruta dinámica^ para el complemento que muestra una lista de entradas de blog cuando no se proporciona un slug y muestra el contenido de una entrada de blog cuando se proporciona un slug.
En el archivo src/dashboard-grid-items/MyPluginGridItem.astro, definirás el elemento de cuadrícula para el complemento. A continuación se muestra un ejemplo de cómo definir un elemento de cuadrícula para el complemento:
MyPluginGridItem.astro
---
import{StudioCMSRoutes}from'studiocms:lib';
importsdkfrom'studiocms:sdk';
// 'my-plugin' aqui es usado como el identificador para
El ejemplo anterior define un elemento de cuadrícula para el complemento que muestra las 5 páginas actualizadas más recientemente de los últimos 30 días. El elemento de cuadrícula incluye una lista de enlaces a la página de edición de gestión de contenido para cada página.
Integrando con los ayudantes de FrontendNavigationLinks
Si deseas usar los ayudantes de navegación incorporados de StudioCMS en tu proyecto, similar a como lo hace el complemento @studiocms/blog, puedes crear un componente personalizado Navigation.astro:
El ejemplo anterior define un componente personalizado Navigation.astro que utiliza los ayudantes de navegación incorporados de StudioCMS para crear un menú de navegación para el proyecto. El componente incluye enlaces a la URL principal del sitio, la página de índice y cualquier otra página que esté configurada para mostrarse en la navegación.
Todo lo que necesitas hacer es agregar algunos estilos, y tendrás un menú de navegación completamente funcional que funciona con los ayudantes de navegación incorporados de StudioCMS.
