Los Fundamentos

Introducción

Los complementos de StudioCMS son una herramienta poderosa que te permite extender la funcionalidad de StudioCMS. Proporcionan una manera simple y flexible de agregar nuevas características a tu proyecto StudioCMS. A continuación se muestra un resumen de los complementos de StudioCMS y cómo funcionan.

¿Qué son los complementos?

Los complementos de StudioCMS son similares a las integraciones de Astro, pero tienen información extra adjunta al objeto de la función. Esta información se usa por StudioCMS para determinar cómo se debe cargar y usar el complemento. Los complementos de StudioCMS se usan para extender la funcionalidad de StudioCMS agregando nuevas características o modificando las existentes.

El tipo de complemento de StudioCMS Revisado 0.4.0

interface StudioCMSPlugin {
  identifier: string;
  name: string;
  hooks: {
    'studiocms:astro:config': (params: {
      logger: AstroIntegrationLogger;
      addIntegrations: (args_0: AstroIntegration | AstroIntegration[]) => void;
    }) => void | Promise<void>;
    'studiocms:auth': (params: {
      logger: AstroIntegrationLogger;
      setAuthService: (args_0: { ...; }) => void;
    }) => void | Promise<void>;
    'studiocms:dashboard': (params: {
      logger: AstroIntegrationLogger;
      setDashboard: (args_0: { ...; }) => void;
      augmentDashboard: (args_0: { ...; }) => void;
    }) => void | Promise<void>;
    'studiocms:frontend': (params: {
      logger: AstroIntegrationLogger;
      setFrontend: (args_0: { ...; }) => void;
    }) => void | Promise<void>;
    'studiocms:rendering': (params: {
      logger: AstroIntegrationLogger;
      setRendering: (args_0: { ...; }) => void;
    }) => void | Promise<void>;
    'studiocms:image-service': (params: {
      logger: AstroIntegrationLogger;
      setImageService: (args_0: { ...; }) => void;
    }) => void | Promise<void>;
    'studiocms:sitemap': (params: {
      logger: AstroIntegrationLogger;
      setSitemap: (args_0: { ...; }) => void;
    }) => void | Promise<void>;
  }
}

Definiendo un complemento

Para definir un complemento de StudioCMS, necesitas crear un objeto que cumpla con el tipo StudioCMSPlugin. Este objeto debería ser similar al siguiente, teniendo en cuenta que las siguientes propiedades son requeridas:

• identifier: El identificador del complemento desde el archivo package.json.
• name: El label del complemento para mostrar en el Dashboard de StudioCMS.
• studiocmsMinimumVersion: La versión mínima de StudioCMS requerida para que el complemento funcione.

A continuación se muestra un ejemplo de definición de complemento de StudioCMS que incluye todas las propiedades requeridas así como una integración Astro para realizar lógica personalizada:

my-plugin.ts

import { definePlugin } from 'studiocms/plugins';
import { AstroIntegration } from 'astro';

// Define las opciones para el complemento y la integración
interface Options {
    foo: string;
}

// Define la integración Astro
const myIntegration = (options: Options): AstroIntegration => ({
    name: 'my-astro-integration',
    hooks: {
        "astro:config:setup": () => {
            console.log('Hello from my Astro Integration!');
        }
    }
});

// Define el complemento de StudioCMS
export const myPlugin = (options: Options) => definePlugin({
    identifier: 'my-plugin',
    name: 'My Plugin',
    hooks: {
      'studiocms:astro-config': ({ addIntegrations }) => {
        addIntegrations(myIntegration(options)) // Opcional, pero recomendado
      }
    }
});

En este ejemplo, definimos un complemento de StudioCMS llamado My Plugin que requiere la versión v0.1.0 o superior de StudioCMS. El complemento también proporciona una integración Astro que registra un mensaje en la consola cuando se llama al gancho astro:config:setup.

Para más información sobre cómo crear complementos, consulta el Haciendo complementos útiles Guide