一、安装docsify
将依赖文件下载到本地然后在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="./docsify/lib/themes/vue.css"/> --> <link rel="stylesheet" href="./docsify/docsify-themeable/dist/css/theme-simple.css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster" /> <link rel="stylesheet" href="./_cunstom.css" /> </head> <body> <div id="app"></div> <script> window.$docsify = { name: '乔二参学习笔记', loadNavbar: true, loadSidebar: true, mergeNavbar: true, coverpage: true, auto2top: true, subMaxLevel: 2, onlyCover: true, externalLinkTarget: '_blank', relativePath: true, search: { placeholder: '搜索', noData: '找不到结果' } } </script> <script src="./docsify/lib/docsify.min.js"></script> <script src="./docsify/lib/plugins/search.min.js"></script> <script src="./docsify/lib/plugins/zoom-image.min.js"></script> <script src="./docsify/docsify-copy-code/dist/docsify-copy-code.min.js"></script> <script src="./docsify/docsify-themeable/dist/js/docsify-themeable.min.js"></script> </body> </html>
二、基本设置
1、navbar配置
_narbar.md只在index.html同级目录下放一个就可以了。
- [营销](/marketing_notes/README.md) - 技术 - [技术笔记](/technique/notes/README.md) - [other](/technique/other/README.md)
2、sidebar配置
docsify默认先在本目录下查找sidebar.md。没有的话去上级目录查找,知道找到sidebar.md。
- [WordPress建站教程](./WordPress建站教程.md) - [NGINX-HTTPS配置](./NGINX-HTTPS配置.md) - [CentOS-7-Minimal安装文档](./CentOS-7-Minimal安装文档.md)
3、coverpage配置
使用默认的coverpage修改
4、主题配置
<link rel="stylesheet" href="./docsify/docsify-themeable/dist/css/theme-simple.css" /> <script src="./docsify/docsify-themeable/dist/js/docsify-themeable.min.js"></script>
5、字体配置
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster" /> <link rel="stylesheet" href="./_cunstom.css" />
_cunstom.css
section.cover .cover-main { z-index: 100; } section.cover.has-mask .mask { background-color: #fff; opacity: .1 !important; position: absolute; top: 0; height: 100%; width: 100%; } section.cover h1 .anchor span { font-family: 'Lobster', cursive; color: var(--theme-color); } section.cover h2 .anchor span { font-family: 'Lobster', cursive; font-size: 24px; color: var(--theme-color); } section.cover .cover-main>p:last-child a .iconfont { font-size: 1em; } .sidebar>h1 a { font-family: 'Lobster', cursive; }
三、参考项目
GitHub - docsifyjs/docsify: 🃏 A magical documentation site generator.