安装docsify详见:docsify
1、下载
bash
wget https://codeload.github.com/docsifyjs/docsify/zip/refs/heads/master -o docsify-master.zip
2、解压
bash
unzip docsify-master.zip
3、移动文件到nginx的html所在目录【略】
4、配置nginx,示例如下
html
location / {
root 'docsify所在的目录';
index index.html index.htm;
#add_header Cache-Control "no-cache, no-store, must-revalidate";
#add_header Pragma "no-cache";
#add_header Expires 0;
}
5、重启nginx
bash
nginx -s reload
6、浏览器通过ip或域名访问项目【略】
7、清空原有的index.html内容,以下为手动编写的index.html文件内容
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/lib/themes/dark.css">
</head>
<body>
<div id="app">Loading...</div>
<script>
window.$docsify = {
name: 'snail',
loadSidebar: 'zh-cn/_sidebar.md',
//loadSidebar: true,
//loadNavbar: true,
search: {
placeholder: '搜索',
noData: '找不到结果',
depth: 2, // 搜索标题的最大层级, 1 - 6
namespace: 'docsify',
pathNamespaces: ['/zh-cn'],
}
};
</script>
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.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-copy-code/dist/docsify-copy-code.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script>
</body>
</html>
更换css、js使用国内cdn资源
html
<!-- 更换css、js使用国内cdn资源 -->
<!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="https://cdn.bootcdn.net/ajax/libs/docsify/4.13.0/themes/dark.min.css">
<title>snail</title>
</head>
<body>
<div id="app">Loading...</div>
<script>
window.$docsify = {
name: 'snail',
//basePath: 'zh-cn/',
loadSidebar: 'zh-cn/_sidebar.md',
//loadSidebar: '_sidebar.md',
//loadSidebar: true,
//loadNavbar: true,
search: {
placeholder: '搜索',
noData: '找不到结果',
depth: 2, // 搜索标题的最大层级, 1 - 6
namespace: 'docsify',
pathNamespaces: ['/zh-cn'],
}
};
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/docsify/4.13.0/docsify.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/docsify/4.13.0/plugins/search.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/docsify/4.13.0/plugins/emoji.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/docsify/4.13.0/plugins/zoom-image.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/docsify-copy-code/2.1.1/docsify-copy-code.min.js"></script>
</body>
</html>
8、根据情况修改_sidebar.md、_navbar.md,示例
_sidebar.md内容如下(zh-cn目录的文件已从官网下载)
bash
* 入门
* [快速开始](zh-cn/quickstart.md)
* [多页文档](zh-cn/more-pages.md)
* [定制导航栏](zh-cn/custom-navbar.md)
* [封面](zh-cn/cover.md)
* 定制化
* [配置项](zh-cn/configuration.md)
* [主题](zh-cn/themes.md)
* [插件列表](zh-cn/plugins.md)
* [开发插件](zh-cn/write-a-plugin.md)
* [Markdown 配置](zh-cn/markdown.md)
* [代码高亮](zh-cn/language-highlight.md)
* 指南
* [部署](zh-cn/deploy.md)
* [文档助手](zh-cn/helpers.md)
* [兼容 Vue](zh-cn/vue.md)
* [CDN](zh-cn/cdn.md)
* [离线模式(PWA)](zh-cn/pwa.md)
* [服务端渲染 (SSR)](zh-cn/ssr.md)
* [文件嵌入](zh-cn/embed-files.md)
* [Awesome docsify](zh-cn/awesome.md)
* [Changelog](zh-cn/changelog.md)