npm 包 docz-theme-default 使用教程

简介

docz-theme-default 是一款基于 Docz 的默认主题，主要为开发者提供了一个易于使用、美观大方的文档生成工具。本教程旨在向前端开发者介绍如何使用 docz-theme-default 这一 npm 包，以及如何在项目中应用它。

安装

要使用 docz-theme-default 主题，我们首先需要安装 docz：

npm install docz -D

安装成功后，再安装 docz-theme-default：

npm install docz-theme-default -D

使用

配置

要在项目中应用 docz-theme-default，需要在 .doczrc.js 配置文件中设置 theme 选项：

export default {
  title: 'My Docz Site',
  theme: 'docz-theme-default',
};

编写文档

在 Docz 中，文档通常以 Markdown 文件的形式编写。如下是一个示例 Markdown 文件：

-- -------------------- ---- -------
---
----- ------
----- ----------
---

- ------

------ -----------

-- ----

-----
------ - ------ - ---- ----------------------

------- ----------- -- ----------------------------

Props

-- -------------------- ---- -------

------- ----- ----------------------

- ------------
- -------- ---- ------------

--- -----

---------- ---- --- --------- --------------

--- ----

---------------- ---- ------------------------- ---- ---- ----------------

-- ----

-------- -------------------- -----

my-docz-site/ ├── node_modules/ ├── src/ │ └── components/ │ └── Button/ │ ├── Button.js │ └── Button.md │ └── index.css ├── .docz/ ├── .doczrc.js ├── package.json └── README.md

`.doczrc.js` 配置文件：

```js
export default {
  title: 'My Docz Site',
  theme: 'docz-theme-default',
};

src/components/Button/Button.js 文件：

import React from 'react';

export const Button = ({ onClick, style, label }) => {
  return <button style={style} onClick={onClick}>{label}</button>;
};

src/components/Button/Button.md 文件：

-- -------------------- ---- -------
---
----- ------
----- ----------
---

- ------

------ -----------

-- ----

-----
------ - ------ - ---- ----------------------

------- ----------- -- ----------------------------

Props

在项目根目录下，运行以下命令启动 Docz 开发服务器：

npm run docz:dev

在浏览器中访问 `http://localhost:3000/`，即可预览文档。

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/194334) ，转载请注明来源
[https://www.javascriptcn.com/post/194334](https://www.javascriptcn.com/post/194334)