Docsify

1、快速入门

1.1、简介

可以将本地的MarkDown文件转换成一个在线文档的形式，可以方便的同步自己的笔记。

1.2、环境搭建

1、nodejs安装

  1. Node.js:https://nodejs.org/en/download/

    image-20200717142611420

  2. 下载之后一直点下一步就可以了

  3. 确定安装成功

    • cmd下输入node -v，查看是否打印出版本号即可
    • cmd下输入npm -v，查看是否打印出版本号即可

2、docsify安装和使用

以下命令都是在命令窗口运行

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

    npm i docsify-cli -g

  2. 切换到需要存放文件的目录下，要在./docs子目录中编写文档，则可以使用init命令。

    docsify init ./docs

  3. 启动服务，使用运行本地服务器docsify serve。您可以在上的浏览器中预览站点http://localhost:3000。

    docsify serve docs

  4. 然后就可以在浏览器上看到目录下README.md的内容了

    image-20200722120515205

1.3、指令用法

init 命令

使用init生成您的文档。

docsify init <路径> [--local false] [--theme vue]

＃证明我<path> [--local false] [--theme vue]

路径<path>默认为当前目录。使用相对路径，例如./docs（或docs）。

--local选项：

  • 速记： -l
  • 类型：布尔值
  • 默认： false
  • 说明：复制docsify文件的文档路径，默认为false使用unpkg.com作为内容递送网络（CDN）。要明确将此选项设置为falseuse --no-local。

--theme选项：

  • 速记： -t
  • 类型：字符串
  • 默认： vue
  • 说明：选择一个主题，默认为vue，其他的选择是buble，dark和pure。

serve 命令

localhost使用livereload 运行服务器。

docsify serve <路径> [- 打开false] [-端口3000]

＃ docsify小号<路径> [--open假] [--port 3000]

--open 选项：

  • 速记： -o
  • 类型：布尔值
  • 默认： false
  • 说明：在默认浏览器中打开文档，默认为false。要明确将此选项设置为falseuse --no-open。

--port选项：

  • 速记： -p
  • 类型：数字
  • 默认： 3000
  • 描述：选择一个监听端口，默认为3000。

1.4、配置左侧导航栏

  1. 在目录下新建一个_sidebar.md 的md文件，内容如下(下列的md文件也是自己导入的)：

    - SSM框架
  - [Spring](blog/Spring.md)
  - [SpringMVC](blog/SpringMVC.md)
  - [MyBatis](blog/MyBatis.md)
  - [SSM整合](blog/SSM.md)

  2. 在index.html文件中配置一下。在内嵌的js脚本中加上下面这句：

    loadSidebar: true

  3. 效果

    image-20200722134910095

1.5、配置封面

  1. 新建一个 _coverpage.md 的md文件，这里面的内容就是你封面的内容。

    image-20200729145437447

  2. 然后在index.xml文件中修改js脚本配置，添加一句：

    coverpage: true

  3. 效果如下

    image-20200722135105439

1.6、首页设置

默认的首页为README.md

如果主页面不想使用README.md里的内容，可以设置homepage=”*.md”

image-20200722135228784

1.7、设置图标

直接在页面中导入即可

<link rel="icon" href="icon.jpg" type="image/x-icon"/>

1.8、设置加载文字

初始化时会显示 Loading... 内容，你可以自定义提示信息。

  <!-- index.html -->

  <div id="app">Loading...</div>

1.9、增加评论区功能

参考网站：https://www.jianshu.com/p/536421eec50c

  1. 申请Gitalk

    申请网址：https://github.com/settings/applications/new

    image-20200726113642846

  2. 注册完毕之后，会进入这个界面

    img

  3. 填写对应的信息，修改index文件

    <link rel="stylesheet" href="//unpkg.com/gitalk/dist/gitalk.css">

<script src="//unpkg.com/docsify/lib/plugins/gitalk.min.js"></script>
<script src="//unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script>
  const gitalk = new Gitalk({ 
    clientID: '刚刚申请下来的ID',
    clientSecret: '刚刚申请下来的密码',
    repo:'仓库名字，用于保存你博客评论的仓库，可以和你的博客是一个仓库',
    owner:你的Github名字,
    admin: ['你的Github名字和其他管理员的名字'],
    // facebook-like distraction free mode
    distractionFreeMode: false
  } )
</script>

  4. 打开index.html文件，把<link rel="stylesheet" href="//unpkg.com/gitalk/dist/gitalk.css">，这行代码，添加到<head>...</head>中

    <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">
    <link rel="stylesheet" href="//unpkg.com/gitalk/dist/gitalk.css">  
</head>

  5. 然后把其他代码，插入到<body>...</body>中

    <body>
  <div id="app">正在努力加载中~</div>
  <script>
    window.$docsify = {    
      name: 'Blog',
      repo: 'https://github.com/yangyang0126',  //开启github图标
     ****
    } 
  </script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>  

  <!--插入“gitalk评论”模块-->
  <script src="//unpkg.com/docsify/lib/plugins/gitalk.min.js"></script>
  <script src="//unpkg.com/gitalk/dist/gitalk.min.js"></script>
  <script src="js/md5.min.js"></script>
  <script>
    const gitalk = new Gitalk({ 
      clientID: '1****************6',
      clientSecret: '9****************************d',
      repo: 'blog',
      owner: 'yangyang0126',
      admin: ['yangyang0126'],
      id: location.pathname,      // Ensure uniqueness and length less than 50
      distractionFreeMode: false  // Facebook-like distraction free mode
    } )
  </script>

</body>

  6. 网页预览

    image-20200726114010304

1.10、字数统计

它提供了统计中文汉字和英文单词的功能，并且排除了一些markdown语法的特殊字符例如*、-等

Add JS

<script src="//unpkg.com/docsify-count/dist/countable.js"></script>

Add settings

window.$docsify = { 
  count:{ 
    countable:true,
    fontsize:'0.9em',
    color:'rgb(90,90,90)',
    language:'chinese'
  } 
}

1.11、代码块复制

在所有的代码块上添加一个简单的Click to copy按钮来允许用户从你的文档中轻易地复制代码。

<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>

详情可参考 README.md 。

2、部署到Github

2.1、Git安装和使用

  1. 下载Git 官方地址为：https://git-scm.com/download/win

    image-20200722141356002

    下载速度真的慢啊

    image-20200722141356002

  2. 改用百度网盘下载

    链接：https://pan.baidu.com/s/1xYzeRhAnrv2I6aoEtSp1dw
    提取码：t3oh

  3. 下载完之后，双击安装

    image-20200722141356002

  4. 选择安装目录

    image-20200722144758193

  5. 选择默认即可

    image-20200722144857280

  6. 开始菜单目录名设置

    image-20200722144924840

  7. 继续下一步

    image-20200722144958349

  8. 选择命令行环境

    image-20200722145025001

  9. 然后一路默认即可

    image-20200722145104890

  10. 安装完成

    image-20200722145146614

  11. 检验是否安装成功

    回到电脑桌面，鼠标右击如果看到有两个git单词则安装成功

    image-20200722145146614

2.2、配置环境变量

  1. 打开电脑的高级设置

  2. 在path环境中添加如下两个环境

    image-20200722150047022

    image-20200722145948366

2.3、部署到Github

参考网站：https://blog.csdn.net/idog149tao/article/details/64123886

报错参考：https://blog.csdn.net/qq_36275889/article/details/87968719

​ https://blog.csdn.net/qq_37811638/article/details/79789647

  1. 登录github账号，创建一个仓库myblogs

    image-20200722140114598

  2. 填写仓库名，选择证书

    image-20200722164705726

  3. 复制地址

    image-20200722164744538

  4. 在项目目录下右击，选择Git Bash Here

    image-20200722173300486

  5. 输入一下指令（需要刚才自己复制的网站）

    git clone https://github.com/***/myblog.git

    image-20200722173420877

  6. 发现多了一个文件夹

    image-20200722173517380

  7. 将原来的文件夹移动到myblog文件夹中

    image-20200722173620414

  8. 接着继续输入命令 cd myblog，进入Test文件夹

    image-20200722173705544

  9. 接下来依次输入以下代码即可完成其他剩余操作：

    • git config –global core.autocrlf false

    • git add .

      image-20200722173817967

    • git config –global user.email “你的注册邮箱”

    • git config –global user.name “用户名”

    • git commit -m “project initialized”

      这时候就会提交一堆文件

      image-20200722174148138

    • git push -u origin master

      此操作目的是把本地仓库push到github上面，此步骤需要输入帐号和密码

      image-20200722174329959

  10. 这样只就完成啦，到Github仓库刷新查看，看到文件都成功上传就OK了

    image-20200722174458366

2.4、使用Github Pages功能建立站点

  1. 在自己的仓库下，选中 Settings 选项，

    image-20200722162838024

  2. 然后鼠标一直向下滚动，直到看到 GitHub Pages 页签，在Source下面选择master branch / docs folder 选项。

    image-20200722163151485

  3. 站点访问

    image-20200722163208912

2.5、绑定SSH公钥

  1. 运行git指令

    ssh-keygen -t rsa -C "19868558241"    // 注册的邮箱或者手机号码

  2. 然后一直按回车就可以了

  3. 打开文件夹C:\Users\小江\.ssh

  4. 粘贴自己的公钥

    image-20200801204651491

  5. 输入密码确定之后，这个帐户就跟自己的电脑进行绑定了

    image-20200801204740487

  6. 有绑定的话，我们就可以使用shh进行连接和上传代码了，这个就无需验证

    image-20200801204849885

2.6、GitHub删除仓库

  1. 进入仓库，点击setting

  2. 滑动到最下方

    image-20200722163823465

  3. 输入指定文字进行删除

    image-20200722163856516

3、站点域名解析（可以不用）

如果以上步骤之后还出来404错误的时候，我们可以通过自己的域名进行解析使用（需要自己事先购买域名）

参考网站：https://blog.csdn.net/tr1912/article/details/80673610

  1. 复制原来的域名

    image-20200722181054157

  2. 对域名进行ping

    image-20200722181127067

  3. 对自己的域名进行解析

    image-20200722181156976

  4. 填入自己的域名，然后进行保存即可

    image-20200722181232338

  5. 效果

    image-20200722181247840

4、更新站点内容

参考网站：https://blog.csdn.net/weixin_44831963/article/details/105576540

https://blog.csdn.net/weixin_42762089/article/details/87969619

git pull origin master –allow-unrelated-histories // 同步本地的内容（反正报错就执行这句然后再按照下面的步骤）

进入仓库目录后按照上面的方法进行即可，修改之后具有延迟

提交报错：如果出现在路径后面出现类似这样(master|REBASE 1/9)的时候，一般会提交失败，只需要全部跳过即可，这是停留在一个变基的中间，你已经合并了所有的路径，一直使用git rebase --continue跳过即可

5、Docsify的使用

5.1、多页文档

如果需要创建多个页面，或者需要多级路由的网站，在 docsify 里也能很容易的实现。例如创建一个 guide.md 文件，那么对应的路由就是 /#/guide。

假设你的目录结构如下：

.
└── docs
    ├── README.md
    ├── guide.md
    └── zh-cn
        ├── README.md
        └── guide.md

那么对应的访问页面将是

docs/README.md        => http://domain.com
docs/guide.md         => http://domain.com/guide
docs/zh-cn/README.md  => http://domain.com/zh-cn/
docs/zh-cn/guide.md   => http://domain.com/zh-cn/guide

5.2、定制侧边栏

为了获得侧边栏，您需要创建自己的_sidebar.md，你也可以自定义加载的文件名。默认情况下侧边栏会通过 Markdown 文件自动生成，效果如当前的文档的侧边栏。

首先配置 loadSidebar 选项，具体配置规则见配置项#loadSidebar。

<!-- index.html -->
<script>
  window.$docsify = { 
    loadSidebar: true
  } 
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>

接着创建 _sidebar.md 文件，内容如下

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

* [首页](zh-cn/)
* [指南](zh-cn/guide)

5.3、嵌套的侧边栏

你可能想要浏览到一个目录时，只显示这个目录自己的侧边栏，这可以通过在每个文件夹中添加一个 _sidebar.md 文件来实现。

_sidebar.md 的加载逻辑是从每层目录下获取文件，如果当前目录不存在该文件则回退到上一级目录。例如当前路径为 /zh-cn/more-pages 则从 /zh-cn/_sidebar.md 获取文件，如果不存在则从 /_sidebar.md 获取。

当然你也可以配置 alias 避免不必要的回退过程。

<script>
  window.$docsify = { 
    loadSidebar: true,
    alias: { 
      '/.*/_sidebar.md': '/_sidebar.md'
    } 
  } 
</script>

你可以在一个子目录中创建一个 README.md 文件来作为路由的默认网页。

5.4、用侧边栏中选定的条目名称作为页面标题

一个页面的 title 标签是由侧边栏中选中条目的名称所生成的。为了更好的 SEO ，你可以在文件名后面指定页面标题。

<!-- docs/_sidebar.md -->
* [Home](/)
* [Guide](guide.md "The greatest guide in the world")

5.5、显示目录

自定义侧边栏同时也可以开启目录功能。设置 subMaxLevel 配置项，具体介绍见 配置项#sub-max-level。

<!-- index.html -->
<script>
  window.$docsify = { 
    loadSidebar: true,
    subMaxLevel: 2
  } 
</script>

5.6、忽略副标题

当设置了 subMaxLevel 时，默认情况下每个标题都会自动添加到目录中。如果你想忽略特定的标题，可以给它添加 { docsify-ignore} 。

# Getting Started

## Header { docsify-ignore} 

该标题不会出现在侧边栏的目录中。

要忽略特定页面上的所有标题，你可以在页面的第一个标题上使用 { docsify-ignore-all} 。

# 入门 { docsify-ignore-all} 

## 标题

该标题不会出现在侧边栏的目录中。

在使用时， { docsify-ignore} 和 { docsify-ignore-all} 都不会在页面上呈现。

5.7、自定义导航栏

  1. HTML

    如果你需要定制导航栏，可以用 HTML 创建一个导航栏。

    注意：文档的链接都要以 #/ 开头。

    <!-- index.html -->
<body>
  <nav>
    <a href="#/">EN</a>
    <a href="#/zh-cn/">中文</a>
  </nav>
  <div id="app"></div>
</body>

  2. 配置文件

    那我们可以通过 Markdown 文件来配置导航。首先配置 loadNavbar，默认加载的文件为 _navbar.md。具体配置规则见配置项#loadNavbar。

    <!-- index.html -->
<script>
  window.$docsify = { 
    loadNavbar: true
  } 
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<!-- _navbar.md -->
   * [En](/)
   * [中文](/zh-cn/)

导航栏嵌套

如果导航内容过多，可以写成嵌套的列表，会被渲染成下拉列表的形式。

<!-- _navbar.md -->

* 入门
  * [快速开始](zh-cn/quickstart.md)
  * [多页文档](zh-cn/more-pages.md)
  * [定制导航栏](zh-cn/custom-navbar.md)
  * [封面](zh-cn/cover.md)


* 配置
  * [配置项](zh-cn/configuration.md)
  * [主题](zh-cn/themes.md)
  * [使用插件](zh-cn/plugins.md)
  * [Markdown 配置](zh-cn/markdown.md)
  * [代码高亮](zh-cn/language-highlight.md)

整合自定义导航栏与 emoji 插件

如果你使用 emoji 插件:

<!-- index.html -->

<script>
  window.$docsify = { 
    // ...
  } 
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>

例如，你可以在自定义导航栏 Markdown 文件中使用旗帜表情：

<!-- _navbar.md -->

* [:us:, :uk:](/)
* [:cn:](/zh-cn/)

5.8、封面的设置

通过设置 coverpage 参数，可以开启渲染封面的功能。具体用法见配置项#coverpage。

封面的生成同样是从 markdown 文件渲染来的。开启渲染封面功能后在文档根目录创建 _coverpage.md 文件。渲染效果如本文档。

index.html

<!-- index.html -->

<script>
  window.$docsify = { 
    coverpage: true
  } 
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<!-- _coverpage.md -->

![logo](_media/icon.svg)

# docsify <small>3.5</small>

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

- 简单、轻便 (压缩后 ~21kB)
- 无需生成 html 文件
- 众多主题

[GitHub](https://github.com/docsifyjs/docsify/)
[Get Started](#docsify)

自定义背景

目前的背景是随机生成的渐变色，我们自定义背景色或者背景图。在文档末尾用添加图片的 Markdown 语法设置背景。

_coverpage.md
<!-- _coverpage.md -->

# docsify <small>3.5</small>

[GitHub](https://github.com/docsifyjs/docsify/)
[Get Started](#quick-start)

<!-- 背景图片 -->

![](_media/bg.png)

<!-- 背景色 -->

![color](#f0f0f0)

封面当作首页

使用onlyCover进行设置

  • 类型: Boolean

只在访问主页时加载封面。

window.$docsify = { 
  onlyCover: true,
} ;

多个封面

如果你的文档网站是多语言的，或许你需要设置多个封面。

例如你的文档目录结构如下

.
└── docs
    ├── README.md
    ├── guide.md
    ├── _coverpage.md
    └── zh-cn
        ├── README.md
        └── guide.md
        └── _coverpage.md

那么你可以这么配置

window.$docsify = { 
  coverpage: ['/', '/zh-cn/']
} ;

或者指定具体的文件名

window.$docsify = { 
  coverpage: { 
    '/': 'cover.md',
    '/zh-cn/': 'cover.md'
  } 
} ;

6、Docsify配置项

6.1、repo设置挂件

  • 类型：String
  • 默认值: null

配置仓库地址或者 username/repo 的字符串，会在页面右上角渲染一个 GitHub Corner 挂件。

window.$docsify = { 
  // 可以输入自己的网站
  repo: 'docsifyjs/docsify',
  // or
  repo: 'https://github.com/docsifyjs/docsify/',
} ;

6.2、maxLevel标题层数

  • 类型：Number
  • 默认值: 6

默认情况下会抓取文档中所有标题渲染成目录，可配置最大支持渲染的标题层级。

window.$docsify = { 
  maxLevel: 4,
} ;

6.3、loadNavbar导航栏

  • 类型：Boolean|String
  • 默认值: false

加载自定义导航栏，参考定制导航栏 了解用法。设置为 true 后会加载 _navbar.md 文件，也可以自定义加载的文件名。

window.$docsify = { 
  // 加载 _navbar.md
  loadNavbar: true,

  // 加载 nav.md
  loadNavbar: 'nav.md',
} ;

6.4、loadSidebar多页文档

  • 类型：Boolean|String
  • 默认值: false

加载自定义侧边栏，参考多页文档。设置为 true 后会加载 _sidebar.md 文件，也可以自定义加载的文件名。

window.$docsify = { 
  // 加载 _sidebar.md
  loadSidebar: true,

  // 加载 summary.md
  loadSidebar: 'summary.md',
} ;

6.5、hideSidebar隐藏侧边栏

  • 类型 : Boolean
  • 默认值: true

这个选项用来完全隐藏侧边栏，侧边栏的任何内容都不会被渲染。

window.$docsify = { 
  hideSidebar: true,
} ;

6.6、auto2top跳转到顶部

  • 类型：Boolean
  • 默认值: false

切换页面后是否自动跳转到页面顶部。

window.$docsify = { 
  auto2top: true,
} ;

6.7、homepage设置首页

  • 类型：String
  • 默认值: README.md

设置首页文件加载路径。适合不想将 README.md 作为入口文件渲染，或者是文档存放在其他位置的情况使用。

window.$docsify = { 
  // 入口文件改为 /home.md
  homepage: 'home.md',

  // 文档和仓库根目录下的 README.md 内容一致
  homepage:
    'https://raw.githubusercontent.com/docsifyjs/docsify/master/README.md',
} ;

6.8、coverpage设置封面

  • 类型：Boolean|String
  • 默认值: false

启用封面页。开启后是加载 _coverpage.md 文件，也可以自定义文件名。

window.$docsify = { 
  coverpage: true,

  // 自定义文件名
  coverpage: 'cover.md',

  // 多个封面页
  coverpage: ['/', '/zh-cn/'],

  // 多个封面页，并指定文件名
  coverpage: { 
    '/': 'cover.md',
    '/zh-cn/': 'cover.md',
  } ,
} ;

6.9、logo图标

  • 类型: String

在侧边栏中出现的网站图标，你可以使用CSS来更改大小

window.$docsify = { 
  logo: '/_media/icon.svg',
} ;

6.10、name文档标题

  • 类型：String

文档标题，会显示在侧边栏顶部。

window.$docsify = { 
  name: 'docsify',
} ;

name 项也可以包含自定义 HTML 代码来方便地定制。

window.$docsify = { 
  name: '<span>docsify</span>',
} ;

6.11、themeColor主题颜色

  • 类型：String

替换主题色。利用 CSS3 支持变量的特性，对于老的浏览器有 polyfill 处理。

window.$docsify = { 
  themeColor: '#3F51B5'
} ;

6.12、autoHeader自动标题

  • 类型：Boolean

同时设置 loadSidebar 和 autoHeader 后，可以根据 _sidebar.md 的内容自动为每个页面增加标题。#78

window.$docsify = { 
  loadSidebar: true,
  autoHeader: true,
} ;

6.13、mergeNavbar合并导航栏

  • 类型: Boolean

小屏设备下合并导航栏到侧边栏。

window.$docsify = { 
  mergeNavbar: true,
} ;

6.14、formatUpdated更新日期

  • 类型: String|Function

我们可以通过 {docsify-updated} 变量显示文档更新日期. 并且通过 formatUpdated配置日期格式。参考 https://github.com/lukeed/tinydate#patterns

window.$docsify = { 
  formatUpdated: '{ MM} /{ DD}  { HH} :{ mm} ',

  formatUpdated: function(time) { 
    // ...

    return time;
  } ,
} ;

6.15、链接打开方式

externalLinkTarget

  • 类型: String
  • 默认: _blank

外部链接的打开方式。默认为 _blank （在新窗口或者标签页中打开）

window.$docsify = { 
  externalLinkTarget: '_self', // default: '_blank'
} ;

cornerExternalLinkTarget

  • 类型:String
  • 默认值:_blank

右上角链接的打开方式。默认为 _blank （在新窗口或者标签页中打开）

window.$docsify = { 
  cornerExternalLinkTarget: '_self', // default: '_blank'
} ;

6.16、routerMode路由模式

  • 类型: String
  • 默认: hash
window.$docsify = { 
  routerMode: 'history', // default: 'hash'
} ;

6.17、onlyCover

  • 类型: Boolean

只在访问主页时加载封面。

window.$docsify = { 
  onlyCover: false,
} ;

6.18、requestHeaders设置缓存

  • 类型: Object

设置请求资源的请求头。

window.$docsify = { 
  requestHeaders: { 
    'x-token': 'xxx',
  } ,
} ;

例如设置缓存

window.$docsify = { 
  requestHeaders: { 
    // 单位为秒
    'cache-control': 'max-age=600',
  } ,
} ;

6.19、notFoundPage404页面

  • 类型: Boolean | String | Object

在找不到指定页面时加载_404.md:

window.$docsify = { 
  notFoundPage: true,
} ;

加载自定义404页面:

window.$docsify = { 
  notFoundPage: 'my404.md',
} ;

加载正确的本地化过的404页面:

window.$docsify = { 
  notFoundPage: { 
    '/': '_404.md',
    '/de': 'de/_404.md',
  } ,
} ;

6.20、topMargin距离页面

  • 类型: Number
  • 默认值: 0

让你的内容页在滚动到指定的锚点时，距离页面顶部有一定空间。当你使用 固定页头 布局时这个选项很有用，可以让你的锚点对齐标题栏。

window.$docsify = { 
  topMargin: 90, // default: 0
} ;