Config

@easyx.ai/dumi-theme-easyxai For better customizability, some special fields are added, and they are placed in the themeConfig field of the dumi theme configuration item. The specific configuration fields are as follows:

Basic Config

github

type: string
default: null

The navigation bar Github icon link, if this field is not configured, it will not be displayed.

description

type: string | Record<string, string>
default: null

配置首页首屏区域的简介文字。

actions

type: IAction[] | Record<string, IAction[]>
default: null

interface IAction {
  /** 按钮文字描述 */
  text: string;
  /** 按钮链接 */
  link: string;
}

export default defineConfig({
  themeConfig: {
    // actions: [{text: '开始使用', link: '/guide/introduce'}]

    actions: {
      'zh-CN': [{ text: '开始使用', link: '/guide/introduce' }],
      'en-US': [{ text: 'Start', link: '/guide/introduce-en' }],
    },
  },
});

配置首页首屏区域的操作按钮。

features

type: IFeature[] | Record<string, IFeature[]>
default: null

export default defineConfig({
  themeConfig: {
    // 单语言时配置数组即可
    // features: [{ title: '开箱即用'}, { description: '接入简单，安装即使用，全面融入 Ant Design 5.0 风格。'}]
    // 多语言时配置对象，key 为语言名
    features: {
      'zh-CN': [
        { title: '开箱即用' },
        { description: '接入简单，安装即使用，全面融入 Ant Design 5.0 风格。' },
      ],
      'en-US': [
        { title: 'Simple Use' },
        {
          description:
            'Simple access, installation and use, fully integrated into Ant Design 5.0 style.',
        },
      ],
    },
  },
});

该配置底层使用本主题包的 Feature 组件，详见 Features 文档。

高级配置

apiHeader

搭配组件文档中的 atomId 字段

type: ApiHeaderConfig | false
default: undefined

interface ApiHeaderConfig {
  pkg: string;
  match?: string[];
  sourceUrl?: string | false;
  docUrl?: string | false;
}

export default defineConfig({
  themeConfig: {
    apiHeader: {
      // 组件库包名，可以从 package.json 中引入名称
      pkg: '@easyx.ai/dumi-theme-easyxai',
      // 匹配路由，默认为 /api 或 /components
      match: ['/api', '/components'],
      // github 会匹配 themeConfig.github 字段
      sourceUrl: `{github}/tree/master/src/components/{atomId}/index.tsx`,
      docUrl: `{github}/tree/master/example/docs/components/{atomId}.{locale}.md`,
    },
  },
});

sourceUrl 和 docUrl 可以尝试匹配的动态字段有：

github: 在 themeConfig 中配置的 github 字段；
atomId: 在 markdown 文件中标记的 atomId ；
atomId.${'camel' | 'kebab' | 'snake' | 'pascal' }: 在 markdown 文件中标记的 atomId ；
- kebab：小写加中划线；例如 {atomId.kebab}, atomId 设为 test-atomId，实际转换为 test-atom-id
- camel：小驼峰；例如 {atomId.camel}, atomId 设为 test-atomId，实际转换为 testAtomId
- snake：小写加下划线；例如 {atomId.snake}, atomId 设为 test-atomId，实际转换为 test_atom_id
- pascal：大驼峰；例如 {atomId.pascal}, atomId 设为 test-atomId，实际转换为 TestAtomId
title: 在 markdown 文件中标记的 title 字段；

appNavConfig

类型：NavConfig
默认值：undefined

appNavConfig Configure the application navigation icon

export default defineConfig({
  themeConfig: {
    appNavConfig: {
    title: 'Easyxai',
    titleEn: 'Easyxai',
    titleLogo:
      'https://gw.alipayobjects.com/zos/bmw-prod/d3e3eb39-1cd7-4aa5-827c-877deced6b7e/lalxt4g3_w256_h256.png',
    url: 'https://easyxai.com',
    groups: [
      {
        title: 'Infra Dev Docs',
        titleEn: 'Infra Dev Docs',
        links: [
          {
            name: 'Rspack',
            desc: '基于 Rust 的打包工具',
            descEn: 'Rust-based web bundler',
            logo: 'https://assets.rspack.dev/rspack/rspack-logo.svg',
            url: 'https://rspack.dev',
          },
          {
            name: 'Rsbuild',
            desc: '开箱即用的构建工具',
            descEn: 'Out-of-the-box build tool',
            logo: 'https://assets.rspack.dev/rsbuild/rsbuild-logo.svg',
            url: 'https://rsbuild.dev',
          },
        ],
      },
    ],
  },
  },
});

‌
‌
‌
‌

Basic Config

github

type: string
default: null

The navigation bar Github icon link, if this field is not configured, it will not be displayed.

description

type: string | Record<string, string>
default: null

配置首页首屏区域的简介文字。

actions

type: IAction[] | Record<string, IAction[]>
default: null

interface IAction {
  /** 按钮文字描述 */
  text: string;
  /** 按钮链接 */
  link: string;
}

export default defineConfig({
  themeConfig: {
    // actions: [{text: '开始使用', link: '/guide/introduce'}]

    actions: {
      'zh-CN': [{ text: '开始使用', link: '/guide/introduce' }],
      'en-US': [{ text: 'Start', link: '/guide/introduce-en' }],
    },
  },
});

配置首页首屏区域的操作按钮。

features

type: IFeature[] | Record<string, IFeature[]>
default: null

export default defineConfig({
  themeConfig: {
    // 单语言时配置数组即可
    // features: [{ title: '开箱即用'}, { description: '接入简单，安装即使用，全面融入 Ant Design 5.0 风格。'}]
    // 多语言时配置对象，key 为语言名
    features: {
      'zh-CN': [
        { title: '开箱即用' },
        { description: '接入简单，安装即使用，全面融入 Ant Design 5.0 风格。' },
      ],
      'en-US': [
        { title: 'Simple Use' },
        {
          description:
            'Simple access, installation and use, fully integrated into Ant Design 5.0 style.',
        },
      ],
    },
  },
});

该配置底层使用本主题包的 Feature 组件，详见 Features 文档。

高级配置

apiHeader

搭配组件文档中的 atomId 字段

type: ApiHeaderConfig | false
default: undefined

interface ApiHeaderConfig {
  pkg: string;
  match?: string[];
  sourceUrl?: string | false;
  docUrl?: string | false;
}

export default defineConfig({
  themeConfig: {
    apiHeader: {
      // 组件库包名，可以从 package.json 中引入名称
      pkg: '@easyx.ai/dumi-theme-easyxai',
      // 匹配路由，默认为 /api 或 /components
      match: ['/api', '/components'],
      // github 会匹配 themeConfig.github 字段
      sourceUrl: `{github}/tree/master/src/components/{atomId}/index.tsx`,
      docUrl: `{github}/tree/master/example/docs/components/{atomId}.{locale}.md`,
    },
  },
});

sourceUrl 和 docUrl 可以尝试匹配的动态字段有：

github: 在 themeConfig 中配置的 github 字段；
atomId: 在 markdown 文件中标记的 atomId ；
atomId.${'camel' | 'kebab' | 'snake' | 'pascal' }: 在 markdown 文件中标记的 atomId ；
- kebab：小写加中划线；例如 {atomId.kebab}, atomId 设为 test-atomId，实际转换为 test-atom-id
- camel：小驼峰；例如 {atomId.camel}, atomId 设为 test-atomId，实际转换为 testAtomId
- snake：小写加下划线；例如 {atomId.snake}, atomId 设为 test-atomId，实际转换为 test_atom_id
- pascal：大驼峰；例如 {atomId.pascal}, atomId 设为 test-atomId，实际转换为 TestAtomId
title: 在 markdown 文件中标记的 title 字段；

appNavConfig

类型：NavConfig
默认值：undefined

appNavConfig Configure the application navigation icon

export default defineConfig({
  themeConfig: {
    appNavConfig: {
    title: 'Easyxai',
    titleEn: 'Easyxai',
    titleLogo:
      'https://gw.alipayobjects.com/zos/bmw-prod/d3e3eb39-1cd7-4aa5-827c-877deced6b7e/lalxt4g3_w256_h256.png',
    url: 'https://easyxai.com',
    groups: [
      {
        title: 'Infra Dev Docs',
        titleEn: 'Infra Dev Docs',
        links: [
          {
            name: 'Rspack',
            desc: '基于 Rust 的打包工具',
            descEn: 'Rust-based web bundler',
            logo: 'https://assets.rspack.dev/rspack/rspack-logo.svg',
            url: 'https://rspack.dev',
          },
          {
            name: 'Rsbuild',
            desc: '开箱即用的构建工具',
            descEn: 'Out-of-the-box build tool',
            logo: 'https://assets.rspack.dev/rsbuild/rsbuild-logo.svg',
            url: 'https://rsbuild.dev',
          },
        ],
      },
    ],
  },
  },
});

Table of Contents

Table of Contents

Basic Config

github

description

actions

features

高级配置

apiHeader

appNavConfig

Basic Config

github

description

actions

features

高级配置

apiHeader

appNavConfig