Brandon
Docsify 安装及配置
参考链接
1 安装 Docsify
1.1 全局安装
shell
npm i docsify-cli -g1.2 初始化
shell
docsify init ./brandondocument1.3 运行服务
shell
docsify serve brandondocument1.4 部署
2 配置及插件
2.1 多页文档
根目录创建 _sidebar.md 后，在文档文件夹下的 index.html 的 window.$docsify 中，增加如下语句以开启侧边栏。
html
<script>
window.$docsify = {
// 开启侧边栏
loadSidebar: true
}
}
</script>_sidebar.md 中内容为：
markdown
- 安装步骤
- [docsify](install/docsify.md)
- [docker](install/docker.md)
- [dockerui](install/dockerui.md)
- [memos](install/memos.md)2.2 文档目录
html
<script>
window.$docsify = {
// 全文搜索
subMaxLevel: 6
}
}
</script>2.3 LaTeX公式
html
<script src="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" />
<script src="//cdn.jsdelivr.net/npm/marked@4"></script>
<!-- CDN files for docsify-katex -->
<script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
<!-- or <script src="//cdn.jsdelivr.net/gh/upupming/docsify-katex@latest/dist/docsify-katex.js"></script> -->2.4 代码高亮
html
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-java.min.js"></script>2.5 复制到剪贴板
html
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>2.6 全文搜索
html
<script>
window.$docsify = {
// 全文搜索
search: {
paths: 'auto',
placeholder: 'Type to search',
noData: 'No Results!',
depth: 6
}
}
</script>
<!-- 全文搜索 -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>2.7 字数统计
html
<script>
window.$docsify = {
// 字数统计
count:{
countable:true,
fontsize:'0.9em',
color:'rgb(90,90,90)',
language:'chinese'
}
}
</script>
<script src="//unpkg.com/docsify-count/dist/countable.js"></script>2.8 封面
html
<script>
window.$docsify = {
// 开启封面
coverpage: true
}
</script>
<!-- Docsify v4 -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>_coverpage.md
markdown
# Brandon Document
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
> Never Back Down
[CSDN](https://blog.csdn.net/Brandon_)
[Resume](https://www.brandon777.com)2.9 Github挂件
html
<script>
window.$docsify = {
name: '',
// 开启右上角 Github 章鱼猫挂件，指定跳转链接
repo: 'https://github.com/iyukiyama/docsify-leetcode/',
}
</script>2.10 文档名
html
<script>
window.$docsify = {
// 设置文档名称
name: 'yukiyama leetcode',
}
</script>2.11 侧边栏折叠
html
<!-- 侧边栏折叠 -->
<script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>2.12 侧边栏样式
html
<!-- 文件夹样式 -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar-folder.min.css" />
<!-- 箭头样式 -->
<!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar.min.css" /> -->2.13 右侧目录栏
html
<script>
window.$docsify = {
toc: {
scope: '.markdown-section',
headings: 'h1, h2, h3, h4, h5, h6',
title: '目录',
},
}
</script>
<!-- 目录栏 -->
<link rel="stylesheet" href="https://unpkg.com/docsify-toc@1.0.0/dist/toc.css">
<script src="https://unpkg.com/docsify-toc@1.0.0/dist/toc.js"></script>