soarli

docsify - 一个轻量的md转html程序
1. docsify介绍docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它...
扫描右侧二维码阅读全文
10
2020/06

docsify - 一个轻量的md转html程序

1. docsify介绍

docsify 是一个动态生成文档网站的工具。不同于 GitBookHexo 的地方是它不会生成将 .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文件(防盗)
    其他功能有网友和官方文档已经总结到位了,链接在文末,顺便贴上部分截图防止失联:


参考资料:

docsify.js.org/#/zh-cn/

segmentfault.com/a/1190000017576714

juejin.im/post/5d672e286fb9a06aff5e8439

最后修改:2020 年 06 月 10 日 11 : 52 PM

发表评论