Saltearse al contenido
StudioCMS Docs
Sitio Principal
Demo

Configuración del Frontend Predeterminado

Referencia del esquema de opciones de configuración de la integración de StudioCMS

studiocms.config.mjs
export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    sdk?: boolean | {
        cacheConfig?: boolean | {
            lifetime?: string | undefined;
        } | undefined;
    } | undefined;
    dbStartPage?: boolean | undefined;
    imageService?: {
        cdnPlugin?: "cloudinary-js" | undefined;
    } | undefined;
    defaultFrontEndConfig?: boolean | {
        htmlDefaultLanguage?: string | undefined;
        htmlDefaultHead?: {
            tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
            attrs?: Record<string, string | boolean | undefined> | undefined;
            content?: string | undefined;
        }[] | undefined;
        favicon?: string | undefined;
        injectQuickActionsMenu?: boolean | undefined;
    } | undefined;
    dashboardConfig?: {
        dashboardEnabled?: boolean | undefined;
        inject404Route?: boolean | undefined;
        faviconURL?: string | undefined;
        dashboardRouteOverride?: string | undefined;
        AuthConfig?: {
            providers?: {
                github?: boolean | undefined;
                discord?: boolean | undefined;
                google?: boolean | undefined;
                auth0?: boolean | undefined;
                usernameAndPassword?: boolean | undefined;
                usernameAndPasswordConfig?: {
                    allowUserRegistration?: boolean | undefined;
                } | undefined;
            } | undefined;
            enabled?: boolean | undefined;
        } | undefined;
        developerConfig?: {
            demoMode?: false | {
                password: string ...
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';


export default defineStudioCMSConfig({
 dbStartPage: true,
 contentRenderer: 'marked',
 verbose: true,
 dateLocale: 'en-us',
 // ...Other Options
})
defineStudioCMSConfig({
  
defaultFrontEndConfig?: boolean | {
    htmlDefaultLanguage?: string | undefined;
    htmlDefaultHead?: {
        tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
        attrs?: Record<string, string | boolean | undefined> | undefined;
        content?: string | undefined;
    }[] | undefined;
    favicon?: string | undefined;
    injectQuickActionsMenu?: boolean | undefined;
} | undefined
defaultFrontEndConfig: {
    
favicon?: string | undefined
favicon: '/favicon.svg',
    
htmlDefaultLanguage?: string | undefined
htmlDefaultLanguage: 'en',
    
htmlDefaultHead?: {
    tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
    attrs?: Record<string, string | boolean | undefined> | undefined;
    content?: string | undefined;
}[] | undefined
htmlDefaultHead: [],
    
injectQuickActionsMenu?: boolean | undefined
injectQuickActionsMenu: true,
  },
});

favicon

Sección titulada «favicon»

favicon es una cadena que se utiliza para determinar la ruta al favicon para el sitio.

  • Tipo: string
  • Valor predeterminado: '/favicon.svg'

Uso

Sección titulada «Uso»
studiocms.config.mjs
export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    sdk?: boolean | {
        cacheConfig?: boolean | {
            lifetime?: string | undefined;
        } | undefined;
    } | undefined;
    dbStartPage?: boolean | undefined;
    imageService?: {
        cdnPlugin?: "cloudinary-js" | undefined;
    } | undefined;
    defaultFrontEndConfig?: boolean | {
        htmlDefaultLanguage?: string | undefined;
        htmlDefaultHead?: {
            tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
            attrs?: Record<string, string | boolean | undefined> | undefined;
            content?: string | undefined;
        }[] | undefined;
        favicon?: string | undefined;
        injectQuickActionsMenu?: boolean | undefined;
    } | undefined;
    dashboardConfig?: {
        dashboardEnabled?: boolean | undefined;
        inject404Route?: boolean | undefined;
        faviconURL?: string | undefined;
        dashboardRouteOverride?: string | undefined;
        AuthConfig?: {
            providers?: {
                github?: boolean | undefined;
                discord?: boolean | undefined;
                google?: boolean | undefined;
                auth0?: boolean | undefined;
                usernameAndPassword?: boolean | undefined;
                usernameAndPasswordConfig?: {
                    allowUserRegistration?: boolean | undefined;
                } | undefined;
            } | undefined;
            enabled?: boolean | undefined;
        } | undefined;
        developerConfig?: {
            demoMode?: false | {
                password: string ...
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';


export default defineStudioCMSConfig({
 dbStartPage: true,
 contentRenderer: 'marked',
 verbose: true,
 dateLocale: 'en-us',
 // ...Other Options
})
defineStudioCMSConfig({
  
defaultFrontEndConfig?: boolean | {
    htmlDefaultLanguage?: string | undefined;
    htmlDefaultHead?: {
        tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
        attrs?: Record<string, string | boolean | undefined> | undefined;
        content?: string | undefined;
    }[] | undefined;
    favicon?: string | undefined;
    injectQuickActionsMenu?: boolean | undefined;
} | undefined
defaultFrontEndConfig: {
    
favicon?: string | undefined
favicon: '/favicon.svg', // PREDETERMINADO - Esto utiliza el favicon predeterminado.
  }
})

htmlDefaultLanguage

Sección titulada «htmlDefaultLanguage»

htmlDefaultLanguage es una cadena que se utiliza para determinar el idioma predeterminado para el sitio.

  • Tipo: string
  • Por defecto: 'en'

Uso

Sección titulada «Uso»
studiocms.config.mjs
export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    sdk?: boolean | {
        cacheConfig?: boolean | {
            lifetime?: string | undefined;
        } | undefined;
    } | undefined;
    dbStartPage?: boolean | undefined;
    imageService?: {
        cdnPlugin?: "cloudinary-js" | undefined;
    } | undefined;
    defaultFrontEndConfig?: boolean | {
        htmlDefaultLanguage?: string | undefined;
        htmlDefaultHead?: {
            tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
            attrs?: Record<string, string | boolean | undefined> | undefined;
            content?: string | undefined;
        }[] | undefined;
        favicon?: string | undefined;
        injectQuickActionsMenu?: boolean | undefined;
    } | undefined;
    dashboardConfig?: {
        dashboardEnabled?: boolean | undefined;
        inject404Route?: boolean | undefined;
        faviconURL?: string | undefined;
        dashboardRouteOverride?: string | undefined;
        AuthConfig?: {
            providers?: {
                github?: boolean | undefined;
                discord?: boolean | undefined;
                google?: boolean | undefined;
                auth0?: boolean | undefined;
                usernameAndPassword?: boolean | undefined;
                usernameAndPasswordConfig?: {
                    allowUserRegistration?: boolean | undefined;
                } | undefined;
            } | undefined;
            enabled?: boolean | undefined;
        } | undefined;
        developerConfig?: {
            demoMode?: false | {
                password: string ...
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';


export default defineStudioCMSConfig({
 dbStartPage: true,
 contentRenderer: 'marked',
 verbose: true,
 dateLocale: 'en-us',
 // ...Other Options
})
defineStudioCMSConfig({
  
defaultFrontEndConfig?: boolean | {
    htmlDefaultLanguage?: string | undefined;
    htmlDefaultHead?: {
        tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
        attrs?: Record<string, string | boolean | undefined> | undefined;
        content?: string | undefined;
    }[] | undefined;
    favicon?: string | undefined;
    injectQuickActionsMenu?: boolean | undefined;
} | undefined
defaultFrontEndConfig: {
    
htmlDefaultLanguage?: string | undefined
htmlDefaultLanguage: 'en', // PREDETERMINADO - Esto utiliza el idioma predeterminado.
  }
})

htmlDefaultHead

Sección titulada «htmlDefaultHead»

Tipo: HeadConfig[]

Añade etiquetas personalizadas al <head> de tu sitio Starlight. Puede ser útil para añadir análisis y otros scripts y recursos de terceros.

studiocms.config.mjs
export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    sdk?: boolean | {
        cacheConfig?: boolean | {
            lifetime?: string | undefined;
        } | undefined;
    } | undefined;
    dbStartPage?: boolean | undefined;
    imageService?: {
        cdnPlugin?: "cloudinary-js" | undefined;
    } | undefined;
    defaultFrontEndConfig?: boolean | {
        htmlDefaultLanguage?: string | undefined;
        htmlDefaultHead?: {
            tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
            attrs?: Record<string, string | boolean | undefined> | undefined;
            content?: string | undefined;
        }[] | undefined;
        favicon?: string | undefined;
        injectQuickActionsMenu?: boolean | undefined;
    } | undefined;
    dashboardConfig?: {
        dashboardEnabled?: boolean | undefined;
        inject404Route?: boolean | undefined;
        faviconURL?: string | undefined;
        dashboardRouteOverride?: string | undefined;
        AuthConfig?: {
            providers?: {
                github?: boolean | undefined;
                discord?: boolean | undefined;
                google?: boolean | undefined;
                auth0?: boolean | undefined;
                usernameAndPassword?: boolean | undefined;
                usernameAndPasswordConfig?: {
                    allowUserRegistration?: boolean | undefined;
                } | undefined;
            } | undefined;
            enabled?: boolean | undefined;
        } | undefined;
        developerConfig?: {
            demoMode?: false | {
                password: string ...
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';


export default defineStudioCMSConfig({
 dbStartPage: true,
 contentRenderer: 'marked',
 verbose: true,
 dateLocale: 'en-us',
 // ...Other Options
})
defineStudioCMSConfig({
  
defaultFrontEndConfig?: boolean | {
    htmlDefaultLanguage?: string | undefined;
    htmlDefaultHead?: {
        tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
        attrs?: Record<string, string | boolean | undefined> | undefined;
        content?: string | undefined;
    }[] | undefined;
    favicon?: string | undefined;
    injectQuickActionsMenu?: boolean | undefined;
} | undefined
defaultFrontEndConfig: {
    
htmlDefaultHead?: {
    tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
    attrs?: Record<string, string | boolean | undefined> | undefined;
    content?: string | undefined;
}[] | undefined
htmlDefaultHead: [
      // Ejemplo: añadir etiqueta de script de análisis Fathom.
      {
        
tag: "script" | "link" | "title" | "base" | "style" | "meta" | "noscript" | "template"
tag: 'script',
        
attrs?: Record<string, string | boolean | undefined> | undefined
attrs: {
          
src: string
src: 'https://cdn.usefathom.com/script.js',
          'data-site': 'MI-ID-FATHOM',
          
defer: true
defer: true,
        },
      },
    ],
  },
});

Las entradas en head se convierten directamente en elementos HTML y no pasan por el procesamiento de script^ o style^ de Astro.

HeadConfig

Sección titulada «HeadConfig»
interface HeadConfig {
  tag: string;
  attrs?: Record<string, string | boolean | undefined>;
  content?: string;
}

injectQuickActionsMenu

Sección titulada «injectQuickActionsMenu»

Tipo: boolean Por defecto: true

Inyecta una interfaz de usuario para acciones rápidas en la esquina inferior derecha del sitio principal, permitiendo a los usuarios navegar rápidamente a la interfaz de administración de StudioCMS.

Uso

Sección titulada «Uso»
studiocms.config.mjs
export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    sdk?: boolean | {
        cacheConfig?: boolean | {
            lifetime?: string | undefined;
        } | undefined;
    } | undefined;
    dbStartPage?: boolean | undefined;
    imageService?: {
        cdnPlugin?: "cloudinary-js" | undefined;
    } | undefined;
    defaultFrontEndConfig?: boolean | {
        htmlDefaultLanguage?: string | undefined;
        htmlDefaultHead?: {
            tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
            attrs?: Record<string, string | boolean | undefined> | undefined;
            content?: string | undefined;
        }[] | undefined;
        favicon?: string | undefined;
        injectQuickActionsMenu?: boolean | undefined;
    } | undefined;
    dashboardConfig?: {
        dashboardEnabled?: boolean | undefined;
        inject404Route?: boolean | undefined;
        faviconURL?: string | undefined;
        dashboardRouteOverride?: string | undefined;
        AuthConfig?: {
            providers?: {
                github?: boolean | undefined;
                discord?: boolean | undefined;
                google?: boolean | undefined;
                auth0?: boolean | undefined;
                usernameAndPassword?: boolean | undefined;
                usernameAndPasswordConfig?: {
                    allowUserRegistration?: boolean | undefined;
                } | undefined;
            } | undefined;
            enabled?: boolean | undefined;
        } | undefined;
        developerConfig?: {
            demoMode?: false | {
                password: string ...
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';


export default defineStudioCMSConfig({
 dbStartPage: true,
 contentRenderer: 'marked',
 verbose: true,
 dateLocale: 'en-us',
 // ...Other Options
})
defineStudioCMSConfig({
  
defaultFrontEndConfig?: boolean | {
    htmlDefaultLanguage?: string | undefined;
    htmlDefaultHead?: {
        tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
        attrs?: Record<string, string | boolean | undefined> | undefined;
        content?: string | undefined;
    }[] | undefined;
    favicon?: string | undefined;
    injectQuickActionsMenu?: boolean | undefined;
} | undefined
defaultFrontEndConfig: {
    
injectQuickActionsMenu?: boolean | undefined
injectQuickActionsMenu: true, // PREDETERMINADO - Esto inyecta el menú de acciones rápidas.
  }
})