手动安装docsify

安装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)
相关推荐
ptw-cwl5 个月前
从零开始使用 Docsify 搭建文档站点
docsify·个人博客·搭建博客
-代号952710 个月前
用k8s私有化部署docsify做开放API平台
容器·k8s·api·docsify