@studiocms/blog

v0.2.0 GitHub npm Registro de cambios

Este complemento habilita las características del Blog de StudioCMS así como, un frontend en tu proyecto Astro. Te permitirá crear, editar y eliminar publicaciones de blog desde el panel de control de StudioCMS.

¿Qué hace este complemento?

Esta integración agregará las siguientes nuevas rutas a tu frontend controlado por StudioCMS:

/[...slug] - Ruta de catch-all que renderiza páginas genéricas de StudioCMS.
/blog - Índice del blog que lista todas las publicaciones.
/blog/[slug] - La página de la publicación individual del blog.
/rss.xml - El feed RSS para tus publicaciones de blog.

Instalación

Instala el paquete usando el siguiente comando:
- npm
- pnpm
- yarn
Ventana de terminal
npm run studiocms add @studiocms/blog
Ventana de terminal
pnpm run studiocms add @studiocms/blog
Ventana de terminal
yarn run studiocms add @studiocms/blog

Tu configuración de StudioCMS ahora debe incluir @studiocms/blog:

import { 
function defineStudioCMSConfig(config: StudioCMSOptions): StudioCMSOptions
A utility function to define the StudioCMS config object.
This function is used to define the optional StudioCMS
config object in the Astro project root. The expected file
name is studiocms.config.mjs. And it should be adjacent
to the Astro project's astro.config.mjs file.
StudioCMS will attempt to import this file and use the default
export as the StudioCMS config object automatically if it exists.
Using this function is optional, but it can be useful for IDEs
to provide better intellisense and type checking.
@example 
// studiocms.config.mjs
import { defineStudioCMSConfig } from 'studiocms/config';

export default defineStudioCMSConfig({
 dbStartPage: true,
 // ...Other Options
})
defineStudioCMSConfig } from 'studiocms/config';
import 
function blog(options?: StudioCMSBlogOptions): StudioCMSPlugin
Creates and configures the StudioCMS Blog plugin.
@param ― options - Optional configuration options for the blog plugin.
@returns ― The configured StudioCMS plugin.
@example 
const blogPlugin = studioCMSBlogPlugin({
  blog: {
    title: 'My Blog',
    enableRSS: true,
    route: '/my-blog'
  },
  sitemap: true,
  injectRoutes: true
});
@param ― options.blog - Blog-specific options.
@param ― options.blog.title - The title of the blog. Defaults to 'Blog'.
@param ― options.blog.enableRSS - Whether to enable RSS feed. Defaults to true.
@param ― options.blog.route - The route for the blog. Defaults to '/blog'.
@param ― options.sitemap - Whether to trigger sitemap generation. Defaults to true.
@param ― options.injectRoutes - Whether to inject routes for the blog. Defaults to true.
blog from '@studiocms/blog';

 export default 
function defineStudioCMSConfig(config: StudioCMSOptions): StudioCMSOptions
A utility function to define the StudioCMS config object.
This function is used to define the optional StudioCMS
config object in the Astro project root. The expected file
name is studiocms.config.mjs. And it should be adjacent
to the Astro project's astro.config.mjs file.
StudioCMS will attempt to import this file and use the default
export as the StudioCMS config object automatically if it exists.
Using this function is optional, but it can be useful for IDEs
to provide better intellisense and type checking.
@example 
// studiocms.config.mjs
import { defineStudioCMSConfig } from 'studiocms/config';

export default defineStudioCMSConfig({
 dbStartPage: true,
 // ...Other Options
})
defineStudioCMSConfig({
   
StudioCMSOptions.plugins?: StudioCMSPlugin[]
Add Plugins to the StudioCMS
plugins: [
     
function blog(options?: StudioCMSBlogOptions): StudioCMSPlugin
Creates and configures the StudioCMS Blog plugin.
@param ― options - Optional configuration options for the blog plugin.
@returns ― The configured StudioCMS plugin.
@example 
const blogPlugin = studioCMSBlogPlugin({
  blog: {
    title: 'My Blog',
    enableRSS: true,
    route: '/my-blog'
  },
  sitemap: true,
  injectRoutes: true
});
@param ― options.blog - Blog-specific options.
@param ― options.blog.title - The title of the blog. Defaults to 'Blog'.
@param ― options.blog.enableRSS - Whether to enable RSS feed. Defaults to true.
@param ― options.blog.route - The route for the blog. Defaults to '/blog'.
@param ― options.sitemap - Whether to trigger sitemap generation. Defaults to true.
@param ― options.injectRoutes - Whether to inject routes for the blog. Defaults to true.
blog(/* Opciones */),
   ],
 });

Opciones

type StudioCMSBlogOptions = {
  /**
   * Lenguaje HTML por defecto - El lenguaje por defecto para la etiqueta HTML
   * @default 'en'
   */
  htmlDefaultLanguage: string | undefined;
  /**
   * Encabezado HTML por defecto - La configuración de encabezado por defecto para el frontend
   */
  htmlDefaultHead: {
    /**
     * Nombre de la etiqueta HTML para agregar a `<head>`, ej. `'meta'`, `'link'`, o `'script'`.
     */
    tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
    /**
     * Atributos para establecer en la etiqueta, ej. `{ rel: 'stylesheet', href: '/custom.css' }`.
     */
    attrs?: Record<string, string | boolean | undefined> | undefined;
    /**
     * Contenido para colocar dentro de la etiqueta (opcional).
     */
    content?: string | undefined;
  }[] | undefined;
  /**
   * Configuración del Favicon - La configuración del favicon por defecto para el frontend
   */
  favicon: string | undefined;
  /**
   * Habilitar la generación de sitemap
   * @default true
   */
  sitemap: boolean | undefined;
  /**
   * Inyectar rutas
   * @default true
   */
  injectRoutes: boolean | undefined;
  /**
   * La configuración para el blog
   */
  blog: {
    /**
     * El título del blog
     */
    title: string | undefined;
    /**
     * Habilitar el feed RSS
     */
    enableRSS: boolean | undefined;
    /**
     * La ruta para el blog
     * @default '/blog'
     * @example '/noticias'
     */
    route: string | undefined;
  } | undefined;
}