remark-docz 是一款基于 remark 和 docz 构建的静态文档站点生成器，可以用于构建各种类型的站点，支持 Markdown 和 MDX 语法，并能够自动生成文档目录、代码高亮、代码演示、主题切换等功能。在前端开发过程中，remark-docz 可以帮助我们更快速、更便捷地搭建文档站点，提高代码可维护性和团队协作效率。本文将详细介绍如何使用 remark-docz 搭建文档站点，并提供相关示例代码。
安装和使用
使用 remark-docz 首先需要安装 Node.js 环境，然后通过 npm 安装 remark-docz 即可。使用 npm 安装 remark-docz 的命令如下：
npm install -g remark-docz
安装成功后，使用以下命令即可启动文档站点服务：
remark-docz serve
然后在浏览器中访问 http://localhost:3000 即可看到文档站点。
构建文档
remark-docz 的文档站点构建遵循约定优于配置的原则，在项目根目录下创建一个 docs 目录，然后将所有 Markdown 或 MDX 文件存放在该目录下即可。文档站点的默认入口文件为 README.md 或 README.mdx。
在 Markdown 或 MDX 文件中，可以使用 remark 和 remark-plugins 扩展语法，例如支持代码高亮的 prism、支持标题索引的 remark-autolink-headings、支持导入外部 MDX 组件的 remark-mdx.js 等。
示例代码：
-- -------------------- ---- ------- --- ------ -- ----------- --- - -- ------------------------------------------------------ ----- ------ - ---- ----------- -- -- ----- --- -- ----------------- ----- --- ------- ----------- ----------展开代码
使用
在你的项目根目录下创建一个 docs 目录，然后将你的 Markdown 或 MDX 文件存放在该目录下，访问 http://localhost:3000 即可预览文档。
import React from 'react' export default function Example() { return <div>Hello, remark-docz!</div> }
为了提高站点访问速度，你可以将构建好的站点部署到云服务器或 CDN 上。例如，我们可以使用 Vercel 部署 remark-docz 站点：
创建 Vercel 账号，将代码库与 Vercel 关联。
在项目根目录下新建 vercel.json 配置文件，然后添加以下代码：
-- -------------------- ---- ------- - --------- - - ------ --------------- ------ ---------------------- - -- --------- - - ------ ------ ------- ------------- - - -展开代码
在 vercel.json 中，我们使用 @vercel/static-build 构建工具打包应用程序，将构建后的文档站点部署到 Vercel 平台上。同时，我们还需要为应用程序添加路由，将所有请求都重定向到 index.html。
- 执行以下命令构建应用程序：
npm run build:docz
- 接下来，我们就可以将构建好的应用程序部署到 Vercel 上了：打开 Vercel 控制台，进入项目部署页面，一键部署即可。
这样，我们就成功将文档站点部署到了 Vercel 平台上。
配置
remark-docz 的配置文件为 .docz/doczrc.js，你可以在该文件中设置主题、插件、站点标题等。
例如，我们可以配置站点的标题为“文档中心”，代码如下：
export default { title: '文档中心', }
总结
remark-docz 是一个强大的静态文档站点生成器，它能够帮助我们更快速地搭建文档站点，提高代码可维护性和团队协作效率。如果你还没有尝试过 remark-docz，不妨赶快动手试一试吧！
## 总结 本文详细介绍了如何使用 npm 包 remark-docz 构建文档站点，并提供了相关示例代码。了解了 remark-docz 的使用方法，我们能够更加方便快捷地搭建文档站点，提高代码可维护性和团队协作效率。 > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/5f38eb07dbf7be33b2566f8a) ，转载请注明来源 [https://www.javascriptcn.com/post/5f38eb07dbf7be33b2566f8a](https://www.javascriptcn.com/post/5f38eb07dbf7be33b2566f8a)
