Ant Design Style Dumi ThemeAnt Design Style Dumi Theme
指南
配置
组件
Changelog
⌘ K

Table of Contents

基础配置
name
logo
hero
footer
footerConfig
socialLinks
socialLinks.github
hideHomeNav
hideNameOnHeader
高级配置
apiHeader
syntaxTheme
siteToken
demo
主题配置
文档配置
自定义
ApiHeader
Footer
下一篇
文档配置

相关资源

Ant Design
Ant Design Pro
Ant Design Pro Components
Umi-React 应用开发框架
Dumi-组件/文档研发工具
qiankun-微前端框架

社区

Medium
Twitter
yuqueAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconfSEE Conf-SEE Conf-蚂蚁体验科技大会

帮助

GitHub
更新日志
讨论

more products更多产品

yuque语雀-知识创作与分享工具
AntVAntV-数据可视化解决方案
EggEgg-企业级 Node.js 框架
kitchenKitchen-Sketch 工具集
xtech蚂蚁体验科技
Copyright © 2022-2024
Made with ❤️ by 蚂蚁集团 - AFX & 数字科技
‌
‌
‌
‌

主题配置

dumi-theme-antd-style 为了更好地满足自定义诉求,增加了一些特有字段,并将其置于 dumi 主题配置项 themeConfig 字段中,具体配置字段如下:

基础配置

name

  • 类型:string
  • 默认值:null

网站名称

logo

  • 类型:string
  • 默认值:null

网站 logo 图片链接

hero

  • 类型:IHero | Record<string, IHero>
  • 默认值:null

LP 头部展示,会将配置项透传到 Hero 组件 。

如果不配置该字段,则会兜底使用 index.md 中的 hero 字段。

ts

hero.description

  • 类型:string | Record<string, string>
  • 默认值:null

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

hero.actions

  • 类型:IAction[]
  • 默认值:null
ts

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

hero.features

  • 类型:IFeature[]
  • 默认值:null

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

ts

hero.showCustomContent

  • 类型:boolean
  • 默认值:false

是否展示自定义内容。首页默认不会展示 markdown 文件中的内容,如果需要展示,可以配置该字段为 true。

footer

  • 类型:string | false
  • 默认值:null

网站页脚,如果配置为 false ,将完全关闭 footer。

footerConfig

  • 类型:IFooter
  • 默认值:null

网站页脚的完整配置,会将配置项透传到 Footer 组件 。

IFooter 详细配置如下:

名称类型描述
bottomstring底部内容
copyrightstring版权信息
themedark、 light主题,可选值为 dark 或 light
columnsFooterColumn[]/ false列配置

socialLinks

与 dumi 保持一致。

socialLinks.github

  • 类型:string
  • 默认值:null

导航栏 Github 图标链接,如不配置该字段,则不展示。

hideHomeNav

  • 类型:boolean
  • 默认值:false

是否隐藏首页的 nav tab,配置为 true 则不展示首页的 nav。

hideNameOnHeader

  • 类型:boolean
  • 默认值:false

在某些场景下, 会需要隐藏 header 中的 name 部分,可以通过配置该字段为 true 来实现。

高级配置

apiHeader

  • 类型:ApiHeaderConfig | false
  • 默认值:null

API 文档页头部配置

搭配组件文档中的 atomId 字段

  • 类型:ApiHeaderConfig | false
  • 默认值:undefined
ts

其中 ApiHeaderConfig 的配置如下:

名称类型描述
pkgstring组件库包名,可以从 package.json 中引入名称
matchstring[]ApiHeader 组件的匹配路由,默认为 ["/api", "/components"]
sourceUrlstring / false点击 ApiHeader 组件的源代码链接跳转的地址,如果不需要链接则为 false
docUrlstring / false点击 ApiHeader 组件的文档链接跳转的地址,如果不需要链接则为 false

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 字段 ;

syntaxTheme

  • 类型:HighlighterSyntaxTheme
  • 默认值:null

代码高亮主题配置

  • 类型:HighlighterSyntaxTheme
  • 默认值:undefined
ts
ts

siteToken

  • 类型:SiteConfigToken
  • 默认值:undefined

网站主题 Token 配置,该配置会传递给 DumiSiteProvider 组件。

ts

token 介绍如下:

属性名类型默认值描述
headerHeightnumber64网站头部高度
footerHeightnumber300网站底部高度
sidebarWidthnumber240侧边栏宽度
tocWidthnumber176目录宽度
contentMaxWidthnumber1152内容最大宽度
demoInheritSiteThemebooleanfalse让 demo 主题跟随站点的主题

demo

demo.lazyLoading

demo 支持懒加载,如果文档的 demo 量很大,可以开启以提升文档加载性能。

  • 类型:boolean
  • 默认值:false