Docsify 是一个轻量级的开源工具，专为动态加载 Markdown 文档而设计。它的灵活性和简便性使得开发者可以轻松搭建文档网站，无需构建静态文件，实时更新内容。而这篇文章将重点讲解 如何快速上手 Docsify，从菜单开发到文档托管，全流程解析。
1.Docsify 的核心特点
在使用 Docsify 之前，理解它的核心特点可以帮助你更高效地使用它：
- 无需构建静态文件：Docsify 是基于浏览器运行的工具，所有内容都通过 JavaScript 动态加载。
- Markdown 动态渲染：直接使用 Markdown 文件撰写文档内容，简单又高效。
- 自定义导航菜单：通过配置文件 sidebar 和 navbar，可以快速生成文档的侧边栏和顶部导航。
- 托管灵活：文档文件可以直接存储在 GitHub 或其他文件服务器上，也可以部署到 GitHub Pages。
2.如何使用 Docsify 创建文档网站？
接下来，我将一步步带你从零开始创建一个完整的 Docsify 文档网站。
Step 1: 安装 Docsify CLI
Docsify 提供了一个命令行工具，帮助你快速初始化文档网站。首先确保你的电脑上安装了 Node.js，然后运行以下命令安装 Docsify CLI：
npm install -g docsify-cli
安装完成后，你可以使用 docsify 命令。
Step 2: 初始化文档项目
用 Docsify 创建一个项目文件夹并初始化，运行以下命令：
docsify init ./docs
执行后，./docs 文件夹会包含以下结构：
docs/
├── index.html // Docsify 的主入口文件
└── README.md // 文档的首页内容- index.html 是 Docsify 的核心文件，用于加载和渲染文档。
- README.md 是你的文档首页，它会被 Docsify 自动渲染。
Step 3: 添加菜单 (侧边栏与导航栏)
1. 自定义侧边栏 (Sidebar)
要创建侧边栏菜单，只需添加一个 _sidebar.md 文件。在 docs 文件夹中创建该文件并填写以下内容：
<!-- _sidebar.md -->
- [首页](README.md)
- [快速开始](quickstart.md)
- [高级功能](advanced.md)- 这个文件定义了左侧菜单的内容。
- 每一行代表一个菜单项，[标题](链接) 的格式中，链接指向 Markdown 文件。
当你点击菜单时，Docsify 会根据链接动态加载相应的 Markdown 文件。
2. 自定义导航栏 (Navbar)
Docsify 也支持顶部导航栏。在 docs 文件夹中创建 _navbar.md 文件并填写以下内容：
<!-- _navbar.md -->
- [首页](README.md)
- [GitHub](https://github.com/docsifyjs/docsify)
- [联系我们](contact.md)顶部导航栏的语法与侧边栏类似，你可以添加外部链接或文档内部的 Markdown 文件。
Step 4: 编写文档内容
文档的内容是通过 Markdown 文件管理的，你可以按需添加多个文件，例如：
docs/
├── README.md
├── quickstart.md
├── advanced.md
└── contact.md每个 Markdown 文件都会被 Docsify 动态加载并渲染。以下是一个 quickstart.md 的示例内容：
# 快速开始
这是快速开始的教程内容。Step 5: 本地运行与预览
在项目目录下运行以下命令，启动本地服务器并预览文档网站：
docsify serve ./docs打开浏览器访问 http://localhost:3000，即可看到文档网站实时渲染的效果。
3.托管文档网站
Docsify 的文档是纯前端的，可以轻松托管到各种平台，比如 GitHub Pages、Vercel、Netlify 等。以下是最简单的 GitHub Pages 部署方法。
GitHub Pages 部署
- 在你的 GitHub 仓库中创建一个名为 docs 的文件夹，并上传项目内容（包括 index.html 和 Markdown 文件）。
- 打开 Settings > Pages，选择 docs 作为部署源。
- GitHub Pages 会自动为你生成一个文档网站，访问链接通常是 https://你的用户名.github.io/仓库名/。
4.常见问题解析
Q1: 菜单是如何加载的？需要手动生成吗？
Docsify 的菜单 (_sidebar.md 和 _navbar.md) 是手动配置的，它们的内容直接决定了文档网站的导航结构。如果不提供这些文件，Docsify 会使用默认逻辑，但无法显示复杂菜单。
Q2: Markdown 文件需要上传到服务器吗？
Docsify 需要访问你的 Markdown 文件，具体有以下两种方式：
- 本地运行：在本地用 docsify serve 启动服务，直接从本地加载 Markdown 文件。
- 托管到远程服务器：将 Markdown 文件上传到 GitHub、GitLab 或任何静态文件服务器，Docsify 会动态加载它们。
Q3: 可以实时更新内容吗？
是的！Docsify 动态加载 Markdown 文件，所以只要更新 Markdown 文件内容，刷新页面即可看到最新效果，无需重新构建网站。
5.完整示例：Docsify 文档网站结构
以下是一个完整项目的文件结构示例：
docs/
├── index.html // Docsify 入口文件
├── README.md // 首页内容
├── _sidebar.md // 侧边栏菜单
├── _navbar.md // 顶部导航栏
├── quickstart.md // 文档章节
└── advanced.md // 文档章节6.总结
Docsify 是一个简单高效的文档网站生成工具，无需构建即可动态加载 Markdown 文件，并通过自定义侧边栏和导航栏轻松实现文档的组织和展示。无论是个人项目还是团队协作文档，Docsify 都是一个强大的解决方案。