场景：如果有很多MarkDown文档，怎么很好的展示给使用人
每当我们研发一个工程时，常常我们需一个精巧的研发文档，因此选用docsify是一个良好的选择。Docsify是一个文档生成脚本，它直接读取MarkDown文档并且动态展现，也可以生成封面。因此我们仅仅需要完成文档的撰写，就可以在线看到文档网页。
优点
- 不需要构建也不需要编译。在编写标记文档后，它们将直接发布
- 易于使用且重量轻
- 智能全文搜索内容
- 获取多组主题
- 支持多样化的api
缺点
- 不利于SEO优化，不过一般文档也不需要SEO
类似产品
- Nuxt
- Docute
- Hexo
- GitBook
- vuepress
实现方式1：手工创建
创建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>创建README.md文件，作为主页面，加入文档目录，即可跳转对应的文档
然后把文档放到对应目录，利用tomcat，nginx等web服务器打开http://localhost:3000即可展现
实现方式2：官方脚手架创建
下面展示确保已安装node，npm
- 安装脚手架
npm i docsify-cli -g
- 查看脚手架版本
docsify -v
- cd到项目目录初始化项目
docsify init ./
初始化的文件
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Python100天学成记</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
</head>
<body>
<nav><!--顶部导航栏 -->
<a href="#/">首页</a>
</nav>
<div id="app">正在加载</div>
<!-- 搜索设置 -->
<script>
window.$docsify = {
name: 'Python （首页）',
repo: '',
auto2top: true,
search: {
noData: {
'/de-de/': 'Keine Ergebnisse!',
'/zh-cn/': '没有结果!',
'/': 'No results!'
},
paths: 'auto',
placeholder: {
'/de-de/': 'Suche',
'/zh-cn/': '搜索',
'/': 'Search'
}
}
}
</script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/ga.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-markdown.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-nginx.min.js"></script>
</body>
</html>
- 启动项目
docsify serve ./
- 最终成品展示