前言
对于前端开发人员而言，文档开发是必不可少的一项工作。@atlaskit/docs 是一个由 Atlassian 公司开发的基于 React 的组件库，可以用来构建并展示文档网站。本文将介绍如何使用 @atlaskit/docs 来搭建文档网站。
安装 @atlaskit/docs
首先，我们需要安装 @atlaskit/docs 包。我们可以使用 npm 或者 yarn 进行安装：
npm install @atlaskit/docs --save
或
yarn add @atlaskit/docs
使用 @atlaskit/docs
初始化项目
安装完 @atlaskit/docs 包之后，我们需要创建一个新项目并为其创建一个示例应用程序：
npx create-react-app my-docs cd my-docs && npm start
上述代码会创建一个名为 my-docs 的新项目，然后你可以通过在浏览器中输入 http://localhost:3000 查看这个示例应用程序。
创建文档页面
在 my-docs 项目中，我们创建一个新的页面并使用 @atlaskit/docs 包进行设计。下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ -------- - ---- -----------------
----- ---------- - -- -- -
----------
-------------
----------- -- -- ---- ----------
------- -- ----- - ---- --- --- ------------- --- -- ---- -------------
--------------
-----------
--
------ ------- -----------在这个代码中，我们导入了 @atlaskit/docs 的一些组件，然后创建了一个 MyDocsPage 组件以用来呈现文档页面。在这个文档页面中，我们使用了 @atlaskit/docs 组件库中的 DocsContent 组件来呈现我们的文本内容。
配置文档路由
为了使文档页面正常工作，我们还需要配置一些路由。我们需要在项目的 src/index.js 文件中导入 MyDocsPage 组件并将其包装在一个路由器之后：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- -- ------- ----- - ---- -------------------
------ ---------- ---- ---------------
----------------
--------
------ ------------ ---------------------- --
----------
-------------------------------
--在这个示例中，我们使用了 React Router 来将 MyDocsPage 组件注册为 /docs 路径的处理程序。现在，如果我们在浏览器中输入 http://localhost:3000/docs，就可以看到我们新创建的文档页面了。
总结
本文介绍了如何使用 @atlaskit/docs 包来创建一个自定义的文档页面。我们通过创建一个示例应用程序来演示如何开始使用这个包，并向你展示了如何使用文档组件创建一个自定义文档页面。@atlaskit/docs 可以轻松地添加到任何现有的 React 应用程序中，并为你的用户提供清晰、易于阅读的文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/atlaskit-docs