简介
gatsby-theme-docs-system 是一个基于 Gatsby 的开源主题,旨在帮助快速搭建文档系统,同时支持多语言、搜索、自定义主题等功能。在本教程中,我们将学习如何快速使用 gatsby-theme-docs-system 来搭建文档系统。
安装
要使用 gatsby-theme-docs-system,首先需要安装 Gatsby CLI。使用以下命令进行安装:
--- ------- -- ----------
接下来,你需要在你的 Gatsby 项目中安装 gatsby-theme-docs-system:
--- ------- ------------------------
使用
完成安装后,现在我们可以在 Gatsby 项目的 gatsby-config.js
中使用该主题。以下是如何设置:
-- ---------------- -------------- - - ------------- - -- ----------------- ------ --- ----------- ------------ -- ---------- -- --------- ----- -- --------- ------- --- ------ -------- -------------------------- -- -------- - - -------- --------------------------- -------- - -- ------------- --- ------------ ---- - - - -
以上是最基本的设置。该主题已经为你创建了一个默认主题,包括一些常见组件(如菜单、页脚等)以及一些页面(如首页、404 页面等)。现在,在浏览器中运行以下命令并打开 http://localhost:8000
,你将可以看到您的文档系统正在运行:
------ -------
除了以上默认设置以外,该主题还提供了其他一些选项,例如自定义菜单、自定义样式、自定义打印页眉页脚等。你可以在官方文档中详细了解这些选项:https://www.gatsbyjs.com/plugins/gatsby-theme-docs-system/
添加内容
现在我们已经成功创建了文档系统,接下来我们将学习如何添加内容。在 content
文件夹下,该主题为你创建了一些示例内容,你可以根据需求删除或修改这些示例内容。
在 content
文件夹中,你可以创建新文件夹来存储你的文档,也可以在该文件夹中创建 .mdx
文件来添加文档内容(“mdx”是一种 Markdown 和 React 混合的语言,可以在 Markdown 中嵌入 JSX 代码)。以下是 docs
文件夹中一个示例文件的结构:
----- --- ------------ - --- --------- - --- --------------- --- ------------- - --- --------- - --- --------- --- ----------------
例如,在 docs/introduction/get-started.mdx
文件中,你可以添加以下内容:
-- -- ---- ------------------------------------------ -- - ------------------ ------- -- - --------- ---------- -- -------------------------- ------------------------
搜索
该主题还内置了搜索功能,可以帮助用户快速找到所需的内容。该主题使用了 Algolia DocSearch 来进行搜索,你需要在 Algolia 上注册并配置 DocSearch,来启用搜索功能。以下是如何配置:
- 前往 Algolia DocSearch 注册账户
- 创建一个 new engine,选择语言和地区
- 在
gatsby-config.js
中,添加以下设置:
-- ---------------- -------------- - - ------------- - -- ----- -------- - ------- ------------------ ---------- -------------- - -- -------- - - -------- --------------------------- -------- - -- ---- - - - -
记得替换 ALGOLIA_API_KEY
为你的 Algolia API key,my-documents
为你的索引名称。
至此,我们已经完成了 gatsby-theme-docs-system 的基本使用和配置。希望这篇教程能够帮助你快速搭建文档系统。如果你需要更多帮助,你可以在官方文档中找到更多信息。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/5f0d1076403f2923b035c182