Docsify官网
Docsify支持Markdown,同时还可以生成封面页,还可以部署在github pages
开始
推荐全局安装 docsify-cli 工具,可以方便地创建及在本地预览生成的文档。
npm i docsify-cli -g
初始化项目
docsify init ./docs
如果想在根目录直接生成可docsify init
配置
- index.html 入口文件
- README.md 会做为主页内容渲染
- .nojekyll 用于阻止 GitHub Pages 忽略掉下划线开头的文件
- _coverpage.md 首页封面
- _navbar.md 首页导航栏
_sidebar.md 左侧栏
index.html 入口文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SouFan笔记</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="description" content="Description"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <!--这个链接就是主题的选择--> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css"> </head> <body> <div id="app"></div> <script> window.$docsify = { search: 'auto', // 默认值 name: 'SouFan笔记', //点击name对应的URL nameLink: '#/README', repo: 'https://github.com/wunaisoufan', coverpage: true, //启用封面页 onlyCover: true, //只在访问主页时加载封面 loadNavbar: true, //开启导航栏设置 loadSidebar: true, // 加载自定义侧边栏 maxLevel: 0, // 默认情况下会抓取文档中所有标题渲染成目录,可配置最大支持渲染的标题层级。 subMaxLevel: 0, // 生成目录的最大层级 mergeNavbar: true, // 小屏设备下合并导航栏到侧边栏 alias: { // 定义路由别名,可以更自由的定义路由规则。 支持正则 '/.*/_sidebar.md': '/_sidebar.md',//防止意外回退 '/.*/_navbar.md': '/_navbar.md' }, //全局搜索 search: { paths: 'auto', placeholder: '搜索', noData: '找不到结果', depth: 3, //搜索的标题深度 }, auto2top: true, //代码一键复制 copyCode: { buttonText: '复制', errorText: 'Error', successText: '复制成功' }, //分页 pagination: { previousText: '上一章节', nextText: '下一章节', crossChapter: true, crossChapterText: true, }, //字数统计,需要引入js count:{ countable:true, fontsize:'0.9em', color:'rgb(90,90,90)', language:'chinese' }, } </script> <!-- Docsify v4 核心--> <script src="//cdn.jsdelivr.net/npm/docsify@4"></script> <!--不同代码的高亮--> <script src="//cdn.jsdelivr.net/npm/[email protected]/components/prism-c.min.js"></script> <script src="//cdn.jsdelivr.net/npm/[email protected]/components/prism-cpp.min.js"></script> <script src="//unpkg.com/prismjs/components/prism-bash.js"></script> <script src="//unpkg.com/prismjs/components/prism-java.js"></script> <script src="//unpkg.com/prismjs/components/prism-sql.js"></script> <script src="//unpkg.com/prismjs/components/prism-bash.js"></script> <script src="//unpkg.com/prismjs/components/prism-c.js"></script> <script src="//unpkg.com/[email protected]/components.js"></script> <!--代码复制--> <script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script> <!--图片缩放--> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script> <!--分页--> <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script> <script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script> <!--搜索--> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script> <script src="//polyfill.io/v3/polyfill.min.js?features=String.prototype.normalize"></script> <!--字数统计--> <script src="//unpkg.com/docsify-count/dist/countable.js"></script> <!--emoji--> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script> <!--主题--> <!--<script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>--> <!--卜蒜子访问统计--> <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script> <!-- Docsify v4 --> <script src="//cdn.jsdelivr.net/npm/docsify@4"></script> } </body> </html>
Nginx的配置
server { listen 80; server_name 你的域名; location / { alias 你的站点根目录; index index.html; } }
可能会遇到的问题
打开显示404,可能是Nginx设置禁止访问的文件或目录
只需要删除掉README.md即可