Docz基于MDX，MDX是Markdown + JSX，它为Markdown带来了组件世界。 MDX使得可以在Markdown样式的文件中导入和使用组件。 Docz充分利用了这一点，并提供了许多内置组件，这些组件可以增强和加快文档工作流程。Docz输出静态站点，你可以使用任何静态网站托管提供商来部署生成的docz网站。

特性

• 基于Gatsby，快速的开发/构建体验
• 简单配置
• 自定义主题
• 基于MDX
• 插件化
• TypeScript支持

基本使用

安装

yarn add docz react react-dom --dev

创建.mdx文件

---
name: Button
route: /
---

import { Playground, Props } from 'docz'
import { Button } from './'

# Button

<Props of={Button} />

## Basic usage

<Playground>
  <Button>Click me</Button>
  <Button kind="secondary">Click me</Button>
</Playground>

dev

yarn docz dev

build

yarn docz构建将在.docz/dist/中生成一个静态站点。
通过在doczrc.js中或在命令行中提供dest字段的路径来使yarn docz build到另一个目录：yarn docz build --dest docs-site-directory。

yarn docz build

其他

创建新应用

npx create-docz-app my-docz-app
# or
yarn create docz-app my-docz-app --example typescript

添加到现有项目

yarn add docz # react react-dom
# or
npm install docz # react react-dom

内置组件

使用组件，可以在可实时编辑的游乐场中渲染组件，并直接查看所使用代码的输出：

# Playground Component
---
name: Button
route: /
---

import { Playground } from 'docz'
import { Button } from './Button'

# Button

## Basic usage

<Playground>
  <Button>Click me</Button>
  <Button kind="secondary">Click me</Button>
</Playground>

文档设置

---
name: My Document
route: /custom-route
menu: Documents
---

• name文档的名称，用作页面标题
• route *（可选）*到文档生成页面的路径或路径。例如/docs/my-component
• menu*（可选）*包含文档的菜单。文档分组到一个菜单中