MENU

docsify(文档生成神奇、Wiki不二之选)部署(以宝塔面板为例)

December 8, 2022 • 笔记

注意:本文部署方式并未从简,可能更适合使用宝塔面板或对 Liunx 操作系统有基础了解的朋友,另外,文中操作步骤较多处已额外附加详细教程,可供参考,大神勿喷。

前言

docsify——一个神奇的文档网站生成器。docsify 可以快速帮你生成文档网站,不同于 GitBook、Hexo 的是它不会生成静态的 .html 文件,所有转换工作都是在运行时。如果你想要开始使用它,只需要创建一个 index.html 就可以开始编写文档:

效果图

本文将以宝塔 Linux 服务器为例,将 docsify 部署在云端。


docsify-本地部署

为了确保部署安全,我的首次部署选择在虚拟机下进行,具体步骤如下:

1、使用 VMware,安装 CentOS 7 操作系统;

安装教程:超详细虚拟机 VMware 安装 Centos7 教程(图文)

2、为了便于操作,这里使用 MobaXterm 远程连接安装后的服务器;

连接教程:Mobaxterm 连接 VMware 中 Linux 虚拟机

快速入门

安装 docsify-cli 工具:

npm i docsify-cli -g

初始化项目:

docsify init ./docs

预览网站:

docsify serve docs

执行上述命令后,docsify 会在服务器中自动生成 docs 文件夹,可通过下列地址访问 docsify 服务

http://localhost:3000

目录结构

docs 文件夹中有三个文件:index.htmlREADME.md.nojekyll

  • index.html:入口文件,docsify 的各项配置都在此页面设置。
  • README.md:默认展示的首页就是 README.md 里的内容。
  • .nojekyll:用于阻止 GitHub Pages 会忽略掉下划线开头的文件。

docsify-部署至云服务器(以宝塔面板为例)

前置操作:通过宝塔面板新建网站,并绑定域名。

教程:宝塔 Linux 面板添加网站绑定域名教程

1、将在本地服务器中 docsify 初始化创建的 docs 文件夹上传至宝塔面板中已经添加好的站点对应的目录中。

完成上述操作后,只需通过域名即可访问 docsify


部署过程中可能遇到的问题

1、通过域名访问网站 404 错误

解决方法:docsify 的入口为 README.md ,宝塔面板的配置文件中默认禁止访问 README.md 文件,需要在网站的配置文件中将 README.md 的禁用删除

配置窗口


自定义配置

docsify 的各项配置文件均在 index.html 的 window.$docsify 里 :

1、设置文档标题,显示在侧栏顶部:

name: '我是标题',

2、设置点击文档标题后跳转的链接地址。:

nameLink: '/',

3、设置锚点距离顶部距离,设置之后,点击侧栏的二级标题之后,页面的标题不会距离顶部太近。

topMargin: 40,

4、开启全局搜索:

search: {
  paths: 'auto',
  placeholder: '请输入要搜索的关键字',
  noData: '没有结果',
  depth: 6,
},

开启全局搜索需要引入两个 js 文件:

<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

5、开启代码复制

复制到剪贴板,在所有的代码块上添加一个简单的 Copy to Clipboard 按钮来允许用户从你的文档中复制代码。

需要引入 js 文件:

<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>

6、开启自定义侧边栏

自定义侧边栏开启后默认不会再生成目录,需要通过设置生成目录的最大层级开启这个功能。

loadSidebar: true,
subMaxLevel: 2,

7、编写更多文档

在宝塔网站中 docsify 目录下增加 _sidebar.md 文件,编写文件格式如下:

- [测试文章1](test1.md)
- [测试文章2](test2.md)
- [测试文章3](test3.md)
- [测试文章4](test4.md)
- [测试文章5](test5.md)

注意:必须确保 docsify 项目中的 docs 目录下,存在 test1.md 等文件,否则会报 404 错误

网上针对docsify的部署文档层出不穷,但宝塔面板部署该项目的文档却屈指可数,希望本文档够为您提供帮助,欢迎在评论区中与我交流。

Archives Tip
QR Code for this page
Tipping QR Code
Leave a Comment

已有 1 条评论
  1. 田苏沂

    可以可以