跳转到内容
StudioCMS 文档
主站点

默认前端配置

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

Section titled “favicon”

favicon 是用于设置网站图标路径的字符串。

  • 类型: string
  • 默认值: '/favicon.svg'

用法示例

Section titled “用法示例”
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

Section titled “htmlDefaultLanguage”

htmlDefaultLanguage 是用于设置网站默认语言的字符串。

  • 类型: string
  • 默认值: 'en'

用法示例

Section titled “用法示例”
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', // 默认值 - 使用默认语言
  }
})

htmlDefaultHead

Section titled “htmlDefaultHead”

类型: HeadConfig[]

向网站头部区域添加自定义标签。适用于添加分析工具脚本和第三方资源。

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: [
      // 示例：添加 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': 'MY-FATHOM-ID',
          
defer: true
defer: true,
        },
      },
    ],
  },
});

htmlDefaultHead 中的内容会直接转换为 HTML 元素，不会经过 Astro 的 脚本处理^ 或 样式处理^。

HeadConfig

Section titled “HeadConfig”
interface HeadConfig {
  tag: string;               // HTML标签名
  attrs?: Record<string, string | boolean | undefined>;  // 标签属性
  content?: string;           // 标签内容
}

injectQuickActionsMenu

Section titled “injectQuickActionsMenu”

类型: boolean 默认值: true

在网站右下角注入快速操作菜单界面，允许用户快速访问 StudioCMS 管理后台。

用法示例

Section titled “用法示例”
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, // 默认值 - 注入快速操作菜单
  }
})