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): {
    dbStartPage?: boolean | undefined;
    rendererConfig?: {
        studiocms?: false | {
            callouts?: false | {
                theme?: "github" | "obsidian" | "vitepress" | undefined;
            } | undefined;
            autoLinkHeadings?: boolean | undefined;
            discordSubtext?: boolean | undefined;
            sanitize?: {
                allowElements?: string[] | undefined;
                blockElements?: string[] | undefined;
                dropElements?: string[] | undefined;
                allowAttributes?: Record<string, string[]> | undefined;
                dropAttributes?: Record<string, string[]> | undefined;
                allowComponents?: boolean | undefined;
                allowCustomElements?: boolean | undefined;
                allowComments?: boolean | undefined;
            } | undefined;
        } | undefined;
        renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
        markdocConfig?: {
            renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
            argParse?: {
                file?: string | undefined;
                slots?: boolean | undefined;
                location?: boolean | undefined;
            } | undefined;
            transformConfig?: {
                tags?: Record<string, {}> | undefined;
                validation?: {
                    parents?: any[] | undefined;
                    validateFunctions?: boolean | undefined;
                    environment?: string | undefined;
                } | undefined;
...
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: "base" | "link" | "meta" | "noscript" | "script" | "style" | "template" | "title";
        content?: string | undefined;
        attrs?: Record<string, string | boolean | undefined> | undefined;
    }[] | undefined;
    favicon?: string | undefined;
    injectQuickActionsMenu?: boolean | undefined;
} | undefined
defaultFrontEndConfig: {
    
favicon?: string | undefined
favicon: '/favicon.svg',
    
htmlDefaultLanguage?: string | undefined
htmlDefaultLanguage: 'en',
    
htmlDefaultHead?: {
    tag: "base" | "link" | "meta" | "noscript" | "script" | "style" | "template" | "title";
    content?: string | undefined;
    attrs?: Record<string, string | boolean | undefined> | undefined;
}[] | undefined
htmlDefaultHead: [],
    
injectQuickActionsMenu?: boolean | undefined
injectQuickActionsMenu: true,
  },
});

favicon

'Read the “', favicon, '” section'

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

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

Uso

'Read the “', Uso, '” section'
studiocms.config.mjs
export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    dbStartPage?: boolean | undefined;
    rendererConfig?: {
        studiocms?: false | {
            callouts?: false | {
                theme?: "github" | "obsidian" | "vitepress" | undefined;
            } | undefined;
            autoLinkHeadings?: boolean | undefined;
            discordSubtext?: boolean | undefined;
            sanitize?: {
                allowElements?: string[] | undefined;
                blockElements?: string[] | undefined;
                dropElements?: string[] | undefined;
                allowAttributes?: Record<string, string[]> | undefined;
                dropAttributes?: Record<string, string[]> | undefined;
                allowComponents?: boolean | undefined;
                allowCustomElements?: boolean | undefined;
                allowComments?: boolean | undefined;
            } | undefined;
        } | undefined;
        renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
        markdocConfig?: {
            renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
            argParse?: {
                file?: string | undefined;
                slots?: boolean | undefined;
                location?: boolean | undefined;
            } | undefined;
            transformConfig?: {
                tags?: Record<string, {}> | undefined;
                validation?: {
                    parents?: any[] | undefined;
                    validateFunctions?: boolean | undefined;
                    environment?: string | undefined;
                } | undefined;
...
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: "base" | "link" | "meta" | "noscript" | "script" | "style" | "template" | "title";
        content?: string | undefined;
        attrs?: Record<string, string | boolean | undefined> | undefined;
    }[] | undefined;
    favicon?: string | undefined;
    injectQuickActionsMenu?: boolean | undefined;
} | undefined
defaultFrontEndConfig: {
    
favicon?: string | undefined
favicon: '/favicon.svg', // PREDETERMINADO - Esto utiliza el favicon predeterminado.
  }
})

htmlDefaultLanguage

'Read the “', htmlDefaultLanguage, '” section'

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

  • Tipo: string
  • Valor predeterminado: 'en'

Uso

'Read the “', Uso, '” section'
studiocms.config.mjs
export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    dbStartPage?: boolean | undefined;
    rendererConfig?: {
        studiocms?: false | {
            callouts?: false | {
                theme?: "github" | "obsidian" | "vitepress" | undefined;
            } | undefined;
            autoLinkHeadings?: boolean | undefined;
            discordSubtext?: boolean | undefined;
            sanitize?: {
                allowElements?: string[] | undefined;
                blockElements?: string[] | undefined;
                dropElements?: string[] | undefined;
                allowAttributes?: Record<string, string[]> | undefined;
                dropAttributes?: Record<string, string[]> | undefined;
                allowComponents?: boolean | undefined;
                allowCustomElements?: boolean | undefined;
                allowComments?: boolean | undefined;
            } | undefined;
        } | undefined;
        renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
        markdocConfig?: {
            renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
            argParse?: {
                file?: string | undefined;
                slots?: boolean | undefined;
                location?: boolean | undefined;
            } | undefined;
            transformConfig?: {
                tags?: Record<string, {}> | undefined;
                validation?: {
                    parents?: any[] | undefined;
                    validateFunctions?: boolean | undefined;
                    environment?: string | undefined;
                } | undefined;
...
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: "base" | "link" | "meta" | "noscript" | "script" | "style" | "template" | "title";
        content?: string | undefined;
        attrs?: Record<string, string | boolean | undefined> | undefined;
    }[] | undefined;
    favicon?: string | undefined;
    injectQuickActionsMenu?: boolean | undefined;
} | undefined
defaultFrontEndConfig: {
    
htmlDefaultLanguage?: string | undefined
htmlDefaultLanguage: 'en', // PREDETERMINADO - Esto utiliza el idioma predeterminado.
  }
})

htmlDefaultHead

'Read the “', htmlDefaultHead, '” section'

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): {
    dbStartPage?: boolean | undefined;
    rendererConfig?: {
        studiocms?: false | {
            callouts?: false | {
                theme?: "github" | "obsidian" | "vitepress" | undefined;
            } | undefined;
            autoLinkHeadings?: boolean | undefined;
            discordSubtext?: boolean | undefined;
            sanitize?: {
                allowElements?: string[] | undefined;
                blockElements?: string[] | undefined;
                dropElements?: string[] | undefined;
                allowAttributes?: Record<string, string[]> | undefined;
                dropAttributes?: Record<string, string[]> | undefined;
                allowComponents?: boolean | undefined;
                allowCustomElements?: boolean | undefined;
                allowComments?: boolean | undefined;
            } | undefined;
        } | undefined;
        renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
        markdocConfig?: {
            renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
            argParse?: {
                file?: string | undefined;
                slots?: boolean | undefined;
                location?: boolean | undefined;
            } | undefined;
            transformConfig?: {
                tags?: Record<string, {}> | undefined;
                validation?: {
                    parents?: any[] | undefined;
                    validateFunctions?: boolean | undefined;
                    environment?: string | undefined;
                } | undefined;
...
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: "base" | "link" | "meta" | "noscript" | "script" | "style" | "template" | "title";
        content?: string | undefined;
        attrs?: Record<string, string | boolean | undefined> | undefined;
    }[] | undefined;
    favicon?: string | undefined;
    injectQuickActionsMenu?: boolean | undefined;
} | undefined
defaultFrontEndConfig: {
    
htmlDefaultHead?: {
    tag: "base" | "link" | "meta" | "noscript" | "script" | "style" | "template" | "title";
    content?: string | undefined;
    attrs?: Record<string, string | boolean | undefined> | undefined;
}[] | undefined
htmlDefaultHead: [
      // Ejemplo: añadir etiqueta de script de análisis Fathom.
      {
        
tag: "script" | "base" | "link" | "meta" | "noscript" | "style" | "template" | "title"
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

'Read the “', HeadConfig, '” section'
interface HeadConfig {
  tag: string;
  attrs?: Record<string, string | boolean | undefined>;
  content?: string;
}

injectQuickActionsMenu

'Read the “', injectQuickActionsMenu, '” section'

tipo: boolean** **valor predeterminado:** 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

'Read the “', Uso, '” section'
studiocms.config.mjs
export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    dbStartPage?: boolean | undefined;
    rendererConfig?: {
        studiocms?: false | {
            callouts?: false | {
                theme?: "github" | "obsidian" | "vitepress" | undefined;
            } | undefined;
            autoLinkHeadings?: boolean | undefined;
            discordSubtext?: boolean | undefined;
            sanitize?: {
                allowElements?: string[] | undefined;
                blockElements?: string[] | undefined;
                dropElements?: string[] | undefined;
                allowAttributes?: Record<string, string[]> | undefined;
                dropAttributes?: Record<string, string[]> | undefined;
                allowComponents?: boolean | undefined;
                allowCustomElements?: boolean | undefined;
                allowComments?: boolean | undefined;
            } | undefined;
        } | undefined;
        renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
        markdocConfig?: {
            renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
            argParse?: {
                file?: string | undefined;
                slots?: boolean | undefined;
                location?: boolean | undefined;
            } | undefined;
            transformConfig?: {
                tags?: Record<string, {}> | undefined;
                validation?: {
                    parents?: any[] | undefined;
                    validateFunctions?: boolean | undefined;
                    environment?: string | undefined;
                } | undefined;
...
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: "base" | "link" | "meta" | "noscript" | "script" | "style" | "template" | "title";
        content?: string | undefined;
        attrs?: Record<string, string | boolean | undefined> | undefined;
    }[] | undefined;
    favicon?: string | undefined;
    injectQuickActionsMenu?: boolean | undefined;
} | undefined
defaultFrontEndConfig: {
    
injectQuickActionsMenu?: boolean | undefined
injectQuickActionsMenu: true, // PREDETERMINADO - Esto inyecta el menú de acciones rápidas.
  }
})