简介
docsify 可以快速帮你生成文档网站。
官网地址：https://docsify.js.org/#/zh-cn/
| 文件作用 | 文件 |
|---|---|
| 基础配置项（入口文件） | index.html |
| 封面配置文件 | _coverpage.md |
| 侧边栏配置文件 | _sidebar.md |
| 导航栏配置文件 | _navbar.md |
| 主页内容渲染文件 | README.md |
| 浏览器图标 | favicon.ico |
快速创建
如果不喜欢 npm 或者觉得安装工具太麻烦，也可以直接手动创建一个 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="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
//...
}
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
</body>
</html>模板2
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Docsify-Guidetitle>
<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="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css">
head>
<body>
<div id="app">加载中...div>
<script>
window.$docsify = {
// 项目名称
name: 'Docsify-Guide',
// 仓库地址，点击右上角的Github章鱼猫头像会跳转到此地址
repo: 'https://github.com/YSGStudyHards',
// 侧边栏支持，默认加载的是项目根目录下的\_sidebar.md文件
loadSidebar: true,
// 导航栏支持，默认加载的是项目根目录下的\_navbar.md文件
loadNavbar: true,
// 封面支持，默认加载的是项目根目录下的\_coverpage.md文件
coverpage: true,
// 最大支持渲染的标题层级
maxLevel: 5,
// 自定义侧边栏后默认不会再生成目录，设置生成目录的最大层级（建议配置为2-4）
subMaxLevel: 4,
// 小屏设备下合并导航栏到侧边栏
mergeNavbar: true,
}
script>
<script>
// 搜索配置(url：https://docsify.js.org/#/zh-cn/plugins?id=%e5%85%a8%e6%96%87%e6%90%9c%e7%b4%a2-search)
window.$docsify = {
search: {
maxAge: 86400000,// 过期时间，单位毫秒，默认一天
paths: auto,// 注意：仅适用于 paths: 'auto' 模式
placeholder: '搜索',
// 支持本地化
placeholder: {
'/zh-cn/': '搜索',
'/': 'Type to search'
},
noData: '找不到结果',
depth: 4,
hideOtherSidebarContent: false,
namespace: 'Docsify-Guide',
}
}
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>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js">script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js">script>
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js">script>
body>
html>
页面配置
单页面
服务器启动，渲染的就是README.md的内容，要改变页面内容，只需要修改它，语法就是MarkDown语法，保存就会自动渲染刷新，不需要重启服务。直接编辑 docs/README.md 就能更新文档内容，
多页面
如果需要创建多个页面，或者需要多级路由的网站，在 docsify 里也能很容易的实现。例如创建一个 guide.md 文件，那么对应的路由就是 /#/guide。
文档接续
也可以通过嵌入文件的方式添加内容。例如，可以在README.md文件的末尾加上这一行，example.md 文件的内容将会直接接续主页的末尾显示。
[filename](endtest.md ':include')侧边栏
侧边页 多文件
首先修改index.html配置文件，配置loadSidebar 选项
<script>
window.$docsify = {
loadSidebar: true
}
</script> loadSidebar: 'summary.md',//添加此项可以设置为自定义加载的文件名创建文件夹docs，并在里面添加两个名为test1.md，test2.md的文档
创建 _sidebar.md 文件，内容如下
* [测试1](docs/test1)
* [测试2](docs/test2)默认显示主页，点击各页面显示各页面
侧边页 多文件嵌套
* [测试1](docs/test1)
* [测试2](docs/test2 "悬浮提示")
* [测试3](docs/doc2/test3)（写成** [测试3](docs/doc2/test3)也可）
想要浏览到一个目录时，只显示这个目录自己的侧边栏，这可以通过在每个文件夹中添加一个 _sidebar.md 文件来实现。_sidebar.md 的加载逻辑是从每层目录下获取文件，如果当前目录不存在该文件则回退到上一级目录。
* [Home](../)
* [测试3](docs/doc2/test3)鼠标悬停提示
一个页面的 title 标签是由侧边栏中选中条目的名称所生成的。你可以修改_sidebar.md在文件名后面指定页面标题。
* [测试1](docs/test1)
* [测试2](docs/test2 "悬浮提示")页面显示目录层级
在index.html种配置参数subMaxLevel为2，默认显示主目录，点击首页进入首页文件夹目录，显示两层内容级别在index.html种配置参数subMaxLevel为4，首页显示全部4层级别目录
<script>
window.$docsify = {
loadSidebar: true,
subMaxLevel: 2
}
</script>设置不显示目录
设置了 subMaxLevel 时，默认情况下每个标题都会自动添加到目录中。如果你想忽略特定的标题，可以修改_sidebar.md给它添加 <!-- {docsify-ignore} -->，要忽略特定页面上的所有标题，你可以在页面的第一个标题上使用 <!-- {docsify-ignore-all} -->
# 忽略全部标题 <!-- {docsify-ignore-all} -->
## 忽略部分标题 <!-- {docsify-ignore} -->显示层级
默认情况下会抓取文档中所有标题渲染成目录，可配置最大支持渲染的标题层级。默认值为6。
window.$docsify = {
maxLevel: 4,
};完全隐藏侧边栏
这个选项用来完全隐藏侧边栏，侧边栏的任何内容都不会被渲染。默认值为true。
window.$docsify = {
hideSidebar: true,
};导航栏
定制导航栏
直接在index.html加上导航标签，导航点击效果和侧边栏效果差不多，跳转到对应页面
<body>
<nav>
<a href="#/first/first">首页</a>
<a href="#/guide/guide">指南</a>
</nav>
<div id="app"></div>
<script>
window.$docsify = {
loadSidebar: true,
subMaxLevel: 4
}
</script>
<!-- Docsify v4 -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>通过配置文件定制导航栏
在index.html配置导航栏参数loadNavbar，
<body>
<div id="app"></div>
<script>
window.$docsify = {
loadSidebar: true,
subMaxLevel: 4,
loadNavbar: true
}
</script>
<!-- Docsify v4 -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>添加配置文件_navbar.md来配置导航栏，内容和侧边栏配置文件是一样的，效果同上
* [测试1](docs/test1)
* [测试2](docs/test2 "悬浮提示")导航嵌套
如果导航内容过多，可以写成嵌套的列表，会被渲染成下拉列表的形式。，配置文件_navbar.md如下
* 导航1
* [测试1](docs/test1)
* [测试2](docs/test2 "悬浮提示")
* 导航2
* [测试3](docs/doc2/test3)使用emoji表情
在index.html引入emoji包
<body>
<div id="app"></div>
<script>
window.$docsify = {
loadSidebar: true,
subMaxLevel: 4,
loadNavbar: true
}
</script>
<!-- Docsify v4 -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
</body>在导航文件直接使用，表情可参考网站https://www.emojiall.com/zh-hans
* 导航1
* [:cn测试1](docs/test1)
* [:us测试2](docs/test2 "悬浮提示")
* 导航2
* [ru测试3](docs/doc2/test3)封面
定制封面
在index.html中配置参数 coverpage开启封面。通常封面和首页是同时出现的，设置了onlyCover=true之后封面就独立成封面。
<script>
window.$docsify = {
coverpage: true,
//设置为true后会加载 _coverpage.md 文件
coverpage: 'cover.md',
//添加此项可以自定义加载的文件名
coverpage: ['/', '/zh-cn/'],
//也可同时设置多个页面的封面
coverpage: {
//也可同时设置多个封面并指定具体文件名
'/': 'cover.md',
'/zh-cn/': 'cover.md',
},
}
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
添加配置文件_coverpage.md 来配置封面，添加logo文件夹media里面放logo图片logo.jpg
封面模板：
<!-- _coverpage.md -->
# docsify <small>3.5</small>
> 一个神奇的文档网站生成器。
- 简单、轻便 (压缩后 ~21kB)
- 无需生成 html 文件
- 众多主题
[GitHub](https://github.com/docsifyjs/docsify/)
[Get Started](#docsify)
自定义背景
目前的背景是随机生成的渐变色，我们自定义背景色或者背景图。在文档末尾用添加图片的 Markdown 语法设置背景。
<!-- 背景图片 -->
<!-- 背景色 -->
其他
Loading 提示
初始化时会显示 Loading... 内容，可以自定义提示信息。直接修改index.html文件。
<div id="app">加载中</div>如果更改了 el 的配置，需要将该元素加上 data-app 属性。
<!-- index.html -->
<div data-app id="main">加载中</div>
<script>
window.$docsify = {
el: '#main'
}
</script>更换主题
如果我们要更换主题，只需要替换index.html中 css 样式文件即可。
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/buble.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/pure.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dolphin.css">auto2top
设置切换页面后是否自动跳转到页面顶部。默认值为false。
window.$docsify = {
auto2top: true,
};homepage
设置首页文件加载路径。适合不想将 README.md 作为入口文件渲染，或者是文档存放在其他位置的情况使用。默认值为 README.md 。
window.$docsify = {
homepage: 'home.md',//更改首页文件为/home.md
homepage:
'https://raw.githubusercontent.com/docsifyjs/docsify/master/README.md',//更改为仓库地址
};basePath
设置文档加载的根路径，可以是二级路径或者是其他域名的路径。
window.$docsify = {
basePath: '/path/',
// 直接渲染其他域名的文档
basePath: 'https://docsify.js.org/',
// 或者直接渲染其他仓库
basePath:
'https://raw.githubusercontent.com/ryanmcdermott/clean-code-javascript/master/',
};relativePath
默认值为false。如果该选项设为 true ，那么链接会使用相对路径。
window.$docsify = {
relativePath: true,//启用相对路径
};logo && name && themeColor
logo是在侧边栏中出现的网站图标，可以使用CSS来更改大小。
name是文档标题，会显示在侧边栏顶部，也可以使用自定义 HTML 代码来方便地定制。
themeColor为主题色。
window.$docsify = {
logo: '/_media/icon.svg',
name: 'docsify',
// or
name: '<span>docsify</span>',
themeColor: '#3F51B5'，
};nameLink
点击文档标题后跳转的链接地址。默认值：window.location.pathname
window.$docsify = {
nameLink: '/',
// 按照路由切换
nameLink: {
'/zh-cn/': '/zh-cn/',
'/': '/',
},
};alias
定义路由别名，可以更自由的定义路由规则。 支持正则。
window.$docsify = {
alias: {
'/foo/(.*)': '/bar/$1',
'/zh-cn/changelog': '/changelog',
'/changelog':
'https://raw.githubusercontent.com/docsifyjs/docsify/master/CHANGELOG',
'/.*/_sidebar.md': '/_sidebar.md',
},
};autoHeader
同时设置 loadSidebar 和 autoHeader 为true时，可以根据 _sidebar.md 的内容自动为每个页面增加标题。
window.$docsify = {
loadSidebar: true,
autoHeader: true,
};更多插件
搜索插件
全文搜索插件会根据当前页面上的超链接获取文档内容，在 localStorage 内建立文档索引。默认过期时间为一天。在index.html配置搜索插件
<script>
window.$docsify = {
search: 'auto', // 默认值
// 完整配置参数
search: {
maxAge: 86400000,//过期时间,单位毫秒,默认一天
paths: [], // or 'auto'
placeholder: '请输入搜索关键字',
noData: '没有搜到呦!',
depth:2
}
}在index.html添加js
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>剪贴板插件
在所有的代码块上添加一个简单的Click to copy按钮来允许用户从你的文档中轻易地复制代码，只需要在index.html中添加js
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>分页导航插件
只需要在index.html中添加js
<script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>字数统计插件
只需要在index.html中添加js
window.$docsify = {
count:{
countable:true,
fontsize:'0.9em',
color:'rgb(90,90,90)',
language:'chinese'
}
}图片缩放 - Zoom image
在 index.html 文件中引入 zoom-image.min.js 即可
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>代码高亮
docsify内置的代码高亮工具是 Prism。Prism 默认支持的语言如下：
Markup - markup, html, xml, svg, mathml, ssml, atom, rss
CSS - css
C-like - clike
JavaScript - javascript, js添加额外的语法支持需要通过CDN添加相应的语法文件，比如需要添加java语法支持时:
<scriptsrc="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/components/prism-java.min.js"></script>要使用语法高亮，需要在代码块第一行添加对应的语言声明，示例如下:
```html
<p>This is a paragraph</p>
<a href="//docsify.js.org/">Docsify</a>
```
```java
System.out.println("hello");
```Markdown 配置
内置的 Markdown 解析器是 marked，可以修改它的配置。同时可以直接配置 renderer。
window.$docsify = {
markdown: {
smartypants: true,
renderer: {
link: function() {
// ...
}
}
}
}笔记源：
https://blog.csdn.net/liyou123456789/article/details/124504727
Comments | NOTHING