docsify:一个神奇的文档生成工具

在开发项目时,我们或许需要一份精致的开发文档,那么使用docsify是不错的选择,docsify是一个文档生成工具,它直接加载 Markdown 文件并动态渲染,同时还可以生成封面页。所以我们只需要写完 Markdown 文档,就可以看到文档页面了。

特性

无需构建无需编译,写完markdown文档直接发布

容易使用并且轻量 (~18kB gzipped)

智能的全文搜索

提供多套主题

丰富的 API

支持 Emoji

兼容 IE10+

支持 SSR (example)

快速上手

我们直接创建一个文件。

新建文件,作为主页面,编辑:

如果你系统安装了web服务器的话,直接运行web服务,比如我使用PHP,命令行直接启动web服务。

然后直接在浏览器打开localhost:3000,就可以看到基本的网页框架了。接下来我们就需要写文档了。

当然你也可以直接把构建好的文档放到你的web服务器上,比如nginx、apache或者IIS上预览。

我们也可以安装官方提供的工具,可以方便创建及本地预览文档网站。

docsify提供 LiveReload 功能,可以让实时的预览,默认访问localhost:3000。

多页面

作为主页面,如果需要创建多个页面,或者需要多级路由的网站,在 docsify 里也能很容易的实现。直接在文档目录下创建对应的 *.md 文件,例如创建一个那么对应的路由就是。

假设你的目录结构如下:

那么对应的访问页面将是:

定制侧边栏

默认情况下,侧边栏会根据当前文档的标题生成目录。也可以设置文档链接,通过 Markdown 文件生成,效果如当前的文档的侧边栏。

首先配置选项。

接着创建 文件,内容如下

然后只要在对应的install.md和guide.md两个文件中写内容就OK了。当然这两个文档都是Markdown格式的,需要按照markcodown语法来编辑。markcodown语法很简单,百度一把,十分钟入门,半小时精通。

主题

目前提供三套主题可供选择,模仿 Vue 和 buble 官网订制的主题样式。还有 @liril-net 贡献的黑色风格的主题。直接修改index.html中的css链接即可。

全文搜索

docsify支持全文搜索,docsify会根据当前页面上的超链接获取文档内容,在 localStorage 内建立文档索引。默认过期时间为一天,当然我们可以自己指定需要缓存的文件列表或者配置过期时间。

运行后,我们在页面的左上角会有一个搜索框,支持全文搜索的。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180104G0DPS400?refer=cp_1026

扫码关注云+社区