简介

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

简单而轻便(〜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. STM32开发记录

    一.使用keil时经常遇到的问题 1.没有下载固件包 2.下载器没选择对 3.没安装下载器的驱动 二.关于数据手册和开发手册 1.如何下载这些手册 在官网下载,官网永远是一手资源 意法半导体官网:ww ...

  2. 国密SM9算法C++实现(Linux)

    首先参考 Linux下编译并使用miracl密码库 该博文在linux下编译Miracl库. 编译完了,自然是要用的,下面介绍两种在C程序中使用miracl库的方法. 方法一: 1. 源码编译完后的必 ...

  3. Draw.io--自认为最好用的流程图绘制软件

    draw.io 是一个强大简洁的在线的绘图网站,支持流程图,UML图,架构图,原型图等图标.支持Github,Google Drive, One drive等网盘同步,并且永久免费.如果觉得使用Web ...

  4. 【MySQL】用户管理及备份

    "我们知道我们的最高权限管理者是root用户,它拥有着最高的权限,包括select.update.delete.grant等操作.一般在公司里DBA工程师会创建一个用户和密码,让你去连接数据 ...

  5. python ui自动化之元素定位和常用操作

    做ui自动化的最基础的就是页面元素定位了,如果连页面元素都定位不到,自动化从何谈起呢?接下来我们就看看页面元素定位的方法吧!(这里就用百度页面来进行演示) 一.最通用的几种定位方式: 1.通过id定位 ...

  6. 移动端rem自适应方案

    一般设计师给我们的设计稿尺寸都为750*1340 .. 网易,淘宝移动端首页上html元素的font-size 目前就先说一下网易的做法 引入下面这段js,用于计算动态的font-size (func ...

  7. js 判断素数(质数)

    判断一个数是不是素数 function isPrinme(n) { if(n == 0 || n==1){ return false; } if(n==2){ return true; } for(v ...

  8. Python - 私有属性(双下线的变形)

    __x会自动变形为_类名__x 正常情况 class A: def foo(self): print('from A') def test(self): self.foo() class B(A): ...

  9. pacman 包管理器相关设定

    pacman 包管理器相关设定 使用国内源 sudo pacman-mirrors -i -c China -m rank 设定 archlinuxcn 源 编辑/etc/pacman.conf,末尾 ...

  10. Codeforces Round #618 (Div. 2)C. Anu Has a Function

    Anu has created her own function ff : f(x,y)=(x|y)−y where || denotes the bitwise OR operation. For ...