docsify 使用文档.
-
docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件,所有转换工作都是在运行时进行。
-
这将非常实用,如果只是需要快速的搭建一个小型的文档网站,或者不想因为生成的一堆 .html 文件“污染” commit 记录,只需要创建一个 index.html 就可以开始写文档而且直接部署在 GitHub Pages。
VuePress 能做的事情,Nuxt 理论上确实能够胜任,但 Nuxt 是为构建应用程序而生的,而 VuePress 则专注在以内容为中心的静态网站上,同时提供了一些为技术文档定制的开箱即用的特性。
这两个项目同样都是基于 Vue,然而它们都是完全的运行时驱动,因此对 SEO 不够友好。如果你并不关注 SEO,同时也不想安装大量依赖,它们仍然是非常好的选择!
Hexo 一直驱动着 Vue 的文档 —— 事实上,在把我们的主站从 Hexo 迁移到 VuePress 之前,我们可能还有很长的路要走。Hexo 最大的问题在于他的主题系统太过于静态以及过度地依赖纯字符串,而我们十分希望能够好好地利用 Vue 来处理我们的布局和交互,同时,Hexo 的 Markdown 渲染的配置也不是最灵活的。
我们的子项目文档一直都在使用 GitBook。GitBook 最大的问题在于当文件很多时,每次编辑后的重新加载时间长得令人无法忍受。它的默认主题导航结构也比较有限制性,并且,主题系统也不是 Vue 驱动的。GitBook 背后的团队如今也更专注于将其打造为一个商业产品而不是开源工具。
推荐安装 docsify-cli
工具,可以方便创建及本地预览文档网站。
npm i docsify-cli -g
如果想在项目的 ./docs
目录里写文档,直接通过 init
初始化项目。
docsify init ./docs
初始化成功后,可以看到 ./docs
目录下创建的几个文件
index.html
入口文件README.md
会做为主页内容渲染.nojekyll
用于阻止 GitHub Pages 会忽略掉下划线开头的文件
直接编辑 docs/README.md
就能更新网站内容,当然也可以写多个页面。
运行一个本地服务器通过 docsify serve
可以方便的预览效果,而且提供 LiveReload 功能,可以让实时的预览。默认访问 http://localhost:3000 。
docsify serve docs
?> 更多命令行工具用法,参考 docsify-cli 文档。
如果不喜欢 npm 或者觉得安装工具太麻烦,我们其实只需要直接创建一个 index.html
文件。
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
//...
}
</script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
</body>
</html>
如果系统里安装 Python 的话,也可以很轻易的启动一个静态服务器。
cd docs && python -m SimpleHTTPServer 3000
初始化时会显示 Loading...
内容,你可以自定义提示信息。
index.html
<div id="app">加载中</div>
如果更改了 el
的配置,需要将该元素加上 data-app
属性。
index.html
<div data-app id="main">加载中</div>
<script>
window.$docsify = {
el: '#main'
}
</script>