1. docsify
介绍
docsify
是一个动态生成文档网站的工具。不同于 GitBook
、Hexo
的地方是它不会生成将 .md
转成 .html
文件,所有转换工作都是在运行时进行。
这将非常实用,如果只是需要快速的搭建一个小型的文档网站,或者不想因为生成的一堆 .html
文件“污染” commit
记录,只需要创建一个 index.html
就可以开始写文档而且直接部署在 GitHub Pages
。
2. 引入docsify
方式
模板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>
我的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="shortcut icon" href="https://blog.soarli.top/soarli.ico">
<meta name="referrer" content="never">
<link rel="stylesheet" href="//open.soarli.top/docsify/css/vue.css">
</head>
<body>
<div id="app" style="text-align: center;font-size: 24px;"><img src="//blog.soarli.top/soarli.ico"> <br>正在加载,请稍侯...</div>
<script src="//open.soarli.top/docsify/js/docsify.min.js"></script>
</body>
</html>
默认支持README.md
,如需其他文件,接着看。
3.关于每个页面和URL
路径说明
如果需要创建多个页面,或者需要多级路由的网站,在docsify
里也能很容易的实现。例如创建一个guide.md
文件,那么对应的路由就是/#/guide
如果你的目录结构如下:
-| ./
-| README.md
-| guide.md
-| zh-cn/
-| README.md
-| guide.md
那么对应的访问页面将是:
./README.md => http://domain.com
./guide.md => http://domain.com/#/guide
./zh-cn/README.md => http://domain.com/#/zh-cn/
./zh-cn/guide.md => http://domain.com/#/zh-cn/guide
到这里基本功能就实现了,放Matlab
安装教程方便给同学看的目的也达到了。
后续:
本想深入了解,但是时间预算不足...(懒)
留下几个坑,看啥时候能填上:
- 怎样实现搜索
- 怎样才能不在
http
请求中暴漏md
文件(防盗)
其他功能有网友和官方文档已经总结到位了,链接在文末,顺便贴上部分截图防止失联:
参考资料:
segmentfault.com/a/1190000017576714
juejin.im/post/5d672e286fb9a06aff5e8439
版权属于:soarli
本文链接:https://blog.soarli.top/archives/449.html
转载时须注明出处及本声明。