简介

一个神奇的文档网站生成器。

简单而轻便（〜18kB压缩）

没有静态构建的HTML文件

多个主题

快速开始

建议docsify-cli全局安装，这有助于本地初始化和预览网站。

npm i docsify-cli -g

初始化

如果在根目录中编写文档

docsify init ./

写作内容

在之后init完成后，你可以看到在文件列表./根目录。

  • index.html 作为入口文件
  • README.md 作为主页
  • .nojekyll 防止GitHub页面忽略以下划线开头的文件

您可以轻松更新文档./README.md，当然您可以添加更多页面。

侧边栏

为了有侧边栏，那么你可以创建你自己的_sidebar.md：

首先，你需要设置loadSidebar为true。详细信息可在配置段落中找到。

<!-- index.html -->

<script>

  window.$docsify = {

    loadSidebar: true

  }

</script>

<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>

创建_sidebar.md：

<!-- docs/_sidebar.md -->

- [Home](/)

- [Guide](guide.md)

其他详细配置情参考官方文档

配置index.html

下面是我参考官方文档修改的一个配置:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</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>

  <div id="app">Please wait...</div>

  <script>

    window.$docsify = {

      auto2top: true, //当路线改变时，滚动到屏幕的顶部。

      coverpage: true, //激活封面功能。如果为true，则会从中加载_coverpage.md。

      executeScript: true, //执行页面上的脚本。只解析第一个脚本标记（演示）。如果存在Vue，则默认开启。

      loadSidebar: true, //_sidebar.md如果为真，则从_sidebar.md文件加载边栏，否则从指定的路径加载。

      loadNavbar: true,//_navbar.md如果为真，则从_navbar.md文件加载navbar ，否则从指定的路径加载。

      mergeNavbar: true,//Navbar将在小屏幕上与侧边栏合并。

      maxLevel: 4,//最大的内容表级别。

      subMaxLevel: 2,//在自定义边栏中添加目录（TOC）。

      ga: 'UA-106147152-1',

      name: 'docsify',

      search: {

        noData: {

          '/de-de/': 'Keine Ergebnisse!',

          '/zh-cn/': '没有结果!',

          '/': 'No results!'

        },

        paths: 'auto',

        placeholder: {

          '/de-de/': 'Suche',

          '/zh-cn/': '搜索',

          '/': 'Search'

        }

      },

      formatUpdated: '{MM}/{DD} {HH}:{mm}',

      plugins: [

        function(hook, vm) {

          hook.beforeEach(function (html) {

            var url = 'https://github.com/PYfive/docsify/blob/master/' + vm.route.file

            var editHtml = '[:memo: Edit Document](' + url + ')\n'

            return html

              + '\n----\n'

              + 'Last modified {docsify-updated} '

              + editHtml

          })

        }

      ]

    }

  </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 --port 4000

访问 http:/localhost:4000 即可查看页面效果

总结

docsify用法和gitbook差不多，但是样式比较好看，个人比较喜欢。

docsify简单教程的更多相关文章

  1. Git和Github简单教程

    原文链接:Git和Github简单教程 网络上关于Git和GitHub的教程不少,但是这些教程有的命令太少不够用,有的命令太多,使得初期学习的时候需要额外花不少时间在一些当前用不到的命令上. 这篇文章 ...

  2. FusionCharts简单教程(三)-----如何自定义图表上的工具提示

    最近有蛮多人总是问我这个FusionCharts制表的问题,帮助他们解决之后,在昨晚发现以前整理的笔记中有这个简单教程,而且以前也发表了几篇这个博文,所以就将其全部上传上来供别人参考.如有不正确之处望 ...

  3. FusionCharts简单教程(八)-----使用网格组件

            有时候我们会觉得使用图像不够直接,对于数据的显示没有表格那样直接明了.所以这里就介绍如何使用网格组件.将网格与图像结合起来.网格组件能够将FusionCharts中的单序列数据以列表的 ...

  4. Qt Quick 简单教程

    上一篇<Qt Quick 之 Hello World 图文详解>我们已经分别在电脑和 Android 手机上运行了第一个 Qt Quick 示例—— HelloQtQuickApp ,这篇 ...

  5. Git和Github简单教程(收藏)

    原文链接:Git和Github简单教程 目录: 零.Git是什么 一.Git的主要功能:版本控制 二.概览 三.Git for Windows软件安装 四.本地Git的使用 五.Github与Git的 ...

  6. mysql安装简单教程(自动安装/配置安装)

    mysql安装简单教程(自动安装/配置安装) 1.1前言: 由于特殊原因,在最近2-3个月里mysql真是安装了无数遍,每次安装都要上网找教程,每个教程基本都不一样,因此还是自己写下来比较好,毕竟自己 ...

  7. 平衡树简单教程及模板（splay, 替罪羊树, 非旋treap）

    原文链接https://www.cnblogs.com/zhouzhendong/p/Balanced-Binary-Tree.html 注意是简单教程,不是入门教程. splay 1. 旋转: 假设 ...

  8. LayaAir引擎开发HTML5最简单教程(面向JS开发者)

    LayaAir引擎开发HTML5最简单教程(面向JS开发者) 一.总结 一句话总结:开发游戏还是得用游戏引擎来开发,其实很简单啦 切记:开发游戏还是得用游戏引擎来开发,其实很简单,引擎很多东西都帮你做 ...

  9. mockito简单教程

    注:本文来源:sdyy321的<mockito简单教程> 官网: http://mockito.org API文档:http://docs.mockito.googlecode.com/h ...

随机推荐

  1. Bugku-CTF加密篇之凯撒部长的奖励（就在8月，超师傅出色地完成了上级的特遣任务，凯撒部长准备给超师傅一份特殊的奖励.......）

    凯撒部长的奖励 就在8月,超师傅出色地完成了上级的特遣任务,凯撒部长准备给超师傅一份特殊的奖励,兴高采烈的超师傅却只收到一长串莫名的密文,超师傅看到英语字串便满脸黑线,帮他拿到这份价值不菲的奖励吧. ...

  2. 2000G电脑大型单机游戏合集

    激活码 游戏名称(ctrl+F查找) 下载链接005875 艾迪芬奇的记忆 游戏下载链接http://pan.baidu.com/s/1t2PYRAj546_1AcOB-khJZg554158 暗影: ...

  3. 【Python pymysql】

    " 目录 关于sql注入 用户存在,绕过密码 用户不存在,绕过用户与密码 解决sql注入问题 commit() 增 改 删 查询数据库 fetchone() fetchall() fetch ...

  4. Deeplearning.ai课程笔记-神经网络和深度学习

    神经网络和深度学习这一块内容与机器学习课程里Week4+5内容差不多. 这篇笔记记录了Week4+5中没有的内容. 参考笔记:深度学习笔记 神经网络和深度学习 结构化数据:如数据库里的数据 非结构化数 ...

  5. 吴裕雄--天生自然TensorFlow2教程：手写数字问题实战

    import tensorflow as tf from tensorflow import keras from keras import Sequential,datasets, layers, ...

  6. Nexus-VDC（Virtual Device Context）

    VDC实际上是将一台物理的Nexus7K设备虚拟为多个逻辑的VDC设备,该术语叫做VDC(Virtual Device Context),该虚拟技术实际上是在一个物理设备架构和内核上运行多个VDC,已 ...

  7. DC-DC芯片

    KIS-3R33S:同步整流7V-24V转5V/3A DC-DC降压模块 稳压电源模块 效率超过LM2576

  8. 李彦宏AI大会现场：3秒钟事故30分钟专注

    编辑 | 于斌 出品 | 于见(mpyujian) 很多人只看到了舞台上3秒钟的事故,却没有看到李彦宏在台上30分钟的专注. 7月3号,百度AI开发者大会上,李彦宏遭遇了3秒钟的突然袭击,他表现的沉着 ...

  9. StaticLinkList(静态链表)

    写这个写了几次,然后都没写完就关掉了,所以也不想多码字了,直接上代码吧(本来还认真自制了一张图片来理解静态链表的cursor与sub之间的关系)但其实也就那么回事:通过游标来找下标通过下标找到对应的数 ...

  10. Dart语言学习(十) Dart流程控制语句

    一.条件语句:if.if...elseif.if...elseif...else int score = 95; if (score >=90) { print('优秀'); } else if ...