dumidumi
  • 指南
  • 配置项
  • 主题
  • 插件
⌘ K
介绍
什么是 dumi
基础
初始化
目录结构
约定式路由
页面渲染配置
写组件 demo
Markdown 增强
进阶
多语言
页面 Tab
移动端组件研发
自动 API 表格
其他
从 dumi 1.x 升级
常见问题
Open-source MIT Licensed | Copyright © 2019-present
Powered by self

页面渲染配置

dumi 提供了一系列 FrontMatter 属性,以满足不同的页面渲染需求

tdk 配置

如果希望配置页面级 tdk ,只需如下编写 FrontMatter , dumi 会在 <head> 标签内插入对应的 <title> 和 <meta> 标签

---
title: 标题 # 配置页面标题,同时生成 <title> 标签
description: 描述 # 配置页面简介,同时用于生成 <meta> 标签
keywords: [关键词] # 配置页面关键词,同时用于生成 <meta> 标签
---
<!-- 其他 Markdown 内容 -->

首页配置

dumi 为我们提供了 hero 和 features 的 FrontMatter 属性,让我们能够快速搭建一个组件库首页。主要为首页首屏和组件库特性两部分。

---
hero:
title: dumi
description: 企业级前端开发框架
actions:
- text: 快速上手
link: /hello
- text: GitHub
link: /hello
features:
- title: 非常快
emoji: 🚀
description: 考究的默认配置和约定式的目录结构,帮助开发者零成本上手,让所有注意力都能放在文档编写和组件开发上
---
<!-- 其他 Markdown 内容 -->

锚点目录配置

锚点目录默认显示在左侧菜单中,我们可以通过配置其值为 content,将其显示在内容区域右侧,也可设置为 boolean 值,使其不进行展示

---
toc: content
---
<!-- 其他 Markdown 内容 -->

demo 分栏配置

dumi 支持对不同页面,灵活定制 demo 的分栏布局

---
demo:
cols: 2
---
<!-- 其他 Markdown 内容 -->

配置 demo.cols 后,以下多个 demo 完将会被渲染为双栏布局:

<code src="./demos/cols.tsx">分栏 1</code>
<code src="./demos/cols.tsx">分栏 2</code>
<code src="./demos/cols.tsx">分栏 3</code>
<code src="./demos/cols.tsx">分栏 4</code>
分栏 1
分栏 3
分栏 2
分栏 4
Demo 分栏演示
Demo 分栏演示
Demo 分栏演示
Demo 分栏演示