几分钟内上线一个网站，Docsify 这款开源神器太牛了！

ivye • • 网建应用 • 3 阅读

相信很多开发者都遇到过这样的困扰：项目做完了，但文档编写却成了大难题。

传统的 GitBook、Hexo 等文档生成工具，要么配置复杂，要么生成一堆静态文件污染代码仓库，要么部署麻烦需要服务器支持。

今天我要向大家推荐一款轻量级的开源文档神器：Docsify。

它是一个神奇的文档网站生成器，只需要一个 index.html 文件就能让 Markdown 文档秒变精美网站，所有转换工作都在运行时完成，完美解决了传统工具的痛点问题。

主要功能

零构建部署：不生成静态 HTML 文件，所有转换都在浏览器端实时完成，告别繁琐的构建过程。

轻量级设计：整个库压缩后仅 21kB，加载速度极快，用户体验优秀。

智能全文搜索：内置强大的搜索功能，支持模糊匹配，帮助用户快速定位内容。

丰富主题系统：提供 Vue、Buble、Dark 等多种精美主题，还有第三方主题可选。

灵活插件架构：提供完善的插件 API，支持代码高亮、一键复制、评论系统等扩展功能。

多级导航支持：自动生成侧边栏和顶部导航，支持多级目录结构，文档组织井然有序。

封面页定制：支持自定义封面页，可以展示项目 Logo、简介和快速入口。

移动端友好：响应式设计，在手机和平板上同样有出色的阅读体验。

表情符号支持：原生支持 Emoji 表情，让文档更加生动有趣。

安装指南

安装 Docsify 非常简单，整个过程只需要几分钟就能完成。我们有两种方式可以选择：

方式一：使用 CLI 工具（推荐）

首先确保本地已安装 Node.js 环境，然后执行以下命令：

# 全局安装 Docsify CLI 工具
npm install -g docsify-cli
# 初始化项目文档目录
docsify init ./docs
# 启动本地预览服务
docsify serve docs

 

初始化成功后，访问 http://localhost:3000 就能看到文档网站了。

方式二：手动创建（适合快速体验）

如果不想安装 CLI 工具，我们也可以手动创建一个 index.html 文件：

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>我的文档</title>
<linkrel="stylesheet"href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
</head>
<body>
<divid="app">加载中...</div>
<script>
window.$docsify= {
name: '我的项目文档',
repo: 'https://github.com/your-repo'
    }
</script>
<scriptsrc="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
</body>
</html>

 

使用指南

Docsify 的使用非常直观，我们只需要按照约定创建几个关键文件：

基础文件结构

docs/
  index.html        # 入口文件
  README.md          # 首页内容
  _sidebar.md        # 侧边栏配置
  _navbar.md         # 导航栏配置
  _coverpage.md      # 封面页配置
  .nojekyll          # 防止 GitHub Pages 忽略下划线开头的文件

 


开启侧边栏功能

在 index.html 中添加配置：

window.$docsify= {
loadSidebar: true,
subMaxLevel: 2// 显示页面标题到二级
}

 

然后创建 _sidebar.md 文件：

* [首页](/)
* [快速开始](/quickstart.md)
* [API 文档](/api.md)
* [更新日志](/changelog.md)

 

添加搜索功能

引入搜索插件：

<script>
window.$docsify= {
search: {
placeholder: '搜索文档',
noData: '找不到结果',
depth: 3
    }
  }
</script>
<scriptsrc="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

 

写在最后

Docsify 真正做到了让文档编写变得简单高效。对于个人开发者来说，它可以快速搭建项目文档站点，提升项目的专业度。

对于团队协作而言，它能够帮助建立统一的知识库，让团队成员更便捷地共享和查阅信息。

更重要的是，由于不需要构建过程，我们可以专注于内容创作，而不是纠结于复杂的配置和部署流程。

这样一款轻量级的开源神器，绝对值得每个开发者收藏使用！

GitHub 项目地址：https://github.com/docsifyjs/docsify

转自：https://mp.weixin.qq.com/s/kv2fOtoQNqaSGZORn2vKrg

文章版权归原作者所有或来自互联网，未经允许请勿转载。如有侵权请联系我删除，谢谢！
THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录