跳转到内容

@studiocms/mdx

此插件为 StudioCMS 添加 MDX 文件格式支持。

  1. 使用以下命令安装软件包:

    Terminal window
    npm run studiocms add @studiocms/mdx
  2. 在 StudioCMS 配置中添加该插件:

    studiocms.config.mjs
    import {
    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
    } from 'studiocms/config';
    import
    function mdx(options?: MDXPluginOptions): StudioCMSPlugin

    Creates and configures the StudioCMS MDX plugin.

    @paramoptions - Optional configuration options for the MDX plugin.

    @returnsThe configured StudioCMS plugin.

    @example

    plugins: [
    studiocmsMDX({
    remarkPlugins: [],
    rehypePlugins: [],
    recmaPlugins: [],
    remarkRehypeOptions: {}
    }),
    ]

    mdx
    from '@studiocms/mdx';
    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
    ({
    plugins?: StudioCMSPlugin[] | undefined
    plugins
    : [
    function mdx(options?: MDXPluginOptions): StudioCMSPlugin

    Creates and configures the StudioCMS MDX plugin.

    @paramoptions - Optional configuration options for the MDX plugin.

    @returnsThe configured StudioCMS plugin.

    @example

    plugins: [
    studiocmsMDX({
    remarkPlugins: [],
    rehypePlugins: [],
    recmaPlugins: [],
    remarkRehypeOptions: {}
    }),
    ]

    mdx
    (),
    ],
    });