- 介绍
- 什么是 dumi
Open-source MIT Licensed | Copyright © 2019-present
Powered by self
Powered by self
dumi 提供了一系列 FrontMatter 属性,以满足不同的页面渲染需求
如果希望配置页面级 tdk ,只需如下编写 FrontMatter , dumi 会在 <head>
标签内插入对应的 <title>
和 <meta>
标签
---title: 标题 # 配置页面标题,同时生成 <title> 标签description: 描述 # 配置页面简介,同时用于生成 <meta> 标签keywords: [关键词] # 配置页面关键词,同时用于生成 <meta> 标签---<!-- 其他 Markdown 内容 -->
dumi 为我们提供了 hero
和 features
的 FrontMatter 属性,让我们能够快速搭建一个组件库首页。主要为首页首屏和组件库特性两部分。
---hero:title: dumidescription: 企业级前端开发框架actions:- text: 快速上手link: /hello- text: GitHublink: /hellofeatures:- title: 非常快emoji: 🚀description: 考究的默认配置和约定式的目录结构,帮助开发者零成本上手,让所有注意力都能放在文档编写和组件开发上---<!-- 其他 Markdown 内容 -->
锚点目录默认显示在左侧菜单中,我们可以通过配置其值为 content
,将其显示在内容区域右侧,也可设置为 boolean 值,使其不进行展示
---toc: content---<!-- 其他 Markdown 内容 -->
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>