考虑到以后换服务器的事情，Docsify也要跟着迁移，以前写过安装Docsify的文章，但是由于旧博客的问题那篇文章也不见了，现使用我的其他服务器作为一次尝试，写一篇教学安装Docsify的文章，也为我日后迁站留个资料。
注：我的云笔记搭建目前有更改，具体内容就是为了使宝塔面板和命令行的NodeJS统一，需要对NodeJS做一些更改，具体请参考下面的文字。做了此更改后，安装Docsify的过程中安装NodeJS的步骤就可以省略了。若你不使用宝塔面板则此步骤可忽略。
宝塔面板安装NodeJS并添加环境变量
首先在【Node版本管理器】中安装一个版本的NodeJS，我这里选择16.20.2版本。
安装NodeJS然后在你安装宝塔的根目录找到这个NodeJS文件夹，一般的宝塔面板安装在/www/server/中（或许不是宝塔面板根目录而是宝塔安装的服务都在此文件夹），上方安装的NodeJS应在/www/server/nodejs/v16.20.2中。
然后添加软连接即可。
bash 代码:ln /www/server/nodejs/v16.20.2/bin/node /usr/local/bin/node安装
- 安装node.js与npm（安装nodejs后会自动安装npm）。
yum install nodejs- 全局安装docsify。
npm i docsify-cli -g若没有安装npm则可以输入yum install npm安装npm。
- 创建一个文件夹，作为docsify的根目录，如notebook。
mkdir notebook
docsify init ./notebook随后进入到~/notebook下，可以看到如下的文件路径。
├── README.md # 会做为主页内容渲染
└── index.html # 入口文件
└── .nojekyll # 用于阻止 GitHub Pages 忽略掉下划线开头的文件
- 试运行。
docsify serve notebook它的默认端口为3000，随后我们访问ip:3000可以看到docsify创建成功。
Docsify界面自定义配置
打开index.html，可以看到类似下面的文件结构。
html 代码:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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@4/lib/themes/vue.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
name: '',
repo: ''
}
</script>
<!-- Docsify v4 -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>为加快访问速度，建议将css和js都下载到本地。
window.$docsify为配置代码。
下面给出一些常见的配置。
侧边栏
在window.$docsify里面加一个loadSidebar: true，如下。
html 代码: <script>
window.$docsify = {
name: '',
repo: '',
loadSidebar: true
}
</script>随后在index.html文件的同级目录下创建_sidebar.md。
_sidebar.md就为侧边栏文件，在里面使用markdown的列表表示多项，而每一项使用超链接的语法表示。
如：
markdown 代码:* [首页](https://qi1.zone)
* [博客](https://blog.qi1.zone)
左边为侧边栏Docsify支持多级目录，每个目录的默认页文件都为README.md，侧边栏也支持嵌套，若文件夹内部的_sidebar.md没有找到它会到父目录寻找。
开启目录
在配置里新增subMaxLevel: 2，它代表设置目录最大层级为2。
目录默认情况下，第一个标题不会加载到目录中，因为它一般代表整个页面的标题。
封面
在配置里新增coverpage: true，然后在同级目录下创建_coverpage.md。
# Docsify
> 欢迎使用Docsify。
---
[首页](https://qi1.zone)
[自定义目录](https://blog.qi1.zone)在_coverpage.md中输入以上代码。
云笔记首页搜索
在配置里新增下面的代码：
search: {
maxAge: 86400000,//过期时间,单位毫秒,默认一天
paths: [], // or 'auto'
placeholder: '请输入搜索关键字',
noData: '没有搜到呦!',
depth:2
}然后加入JS。
html 代码:<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
搜索字数统计
在配置里添加如下代码：
window.$docsify = {
count:{
countable:true,
fontsize:'0.9em',
color:'rgb(90,90,90)',
language:'chinese'
}
}然后引入JS：<script src="//unpkg.com/docsify-count/dist/countable.js"></script>。
其他配置
下面的功能只需要引入JS即可。
| 功能 | 代码 |
|---|---|
| 上一页下一页 | <script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script> |
| 剪贴板 | <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script> |
下面给出我的云笔记同款配置，读者可以将JS和CSS下载到自己的服务器上。
html 代码:<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>笔记 | 棋の小站</title>
<link rel='icon' href="favicon.ico" type="image/ico">
<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, maximum-scale=1.0, user-scalable=0;"/>
<!--<link rel="stylesheet" href="src/prism.css">-->
<link rel="stylesheet" href="src/vue.css">
<!-- switch between day and night -->
<link
rel="stylesheet"
href="src/style.css"
title="docsify-darklight-theme"
type="text/css"
/>
<style>
.cover-main {
color: black;
}
h1#笔记-棋の小站 > a > span {
color: #34495e !important;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
/*滚动条 阴影~圆角*/
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #f5f5f5;
}
/*滑块 阴影~圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(128, 128, 128, 0.7);
background-color: rgb(149, 147, 147);
}
footer {
border-radius: 10px 10px 0 0;
z-index: 1000;
left: 300px;
width: calc(100% - 600px);
position: fixed;
right: 600px;
bottom: 0;
height: fit-content;
padding: 4px 0;
background-color: #ffffff;
opacity: 0.5;
display: flex;
align-items: center;
justify-content: center;
}
a.footer1 {
text-decoration: none;
height: 20px;
display: block;
}
p.footer {
text-decoration: none;
font-size: 10px;
font-family: 微软雅黑 serif;
margin: 0;
padding: 0;
border: 0;
color: #555555;
transition: 0.3s all;
}
p.footer:hover {
color: #222222;
transition: 0.3s all;
}
@media screen and (max-width: 1200px) {
footer {
display: none;
}
}
h1#title {
text-align: center;
font-size: 2rem;
line-height: 2.5rem;
padding-left: 0.25rem;
padding: 2rem 0;
text-shadow: 0 1px 5px rgba(0, 0, 0, .25);
}
</style>
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
name: '笔记 | 棋の小站',
repo: '',
coverpage: true, // 封面页
onlyCover: true, // 只显示封面
loadSidebar: true, // 侧边栏
loadNavbar: true, // 导航栏
maxLevel: 4, // 目录最大层级数
relativePath: true, // 相对路径
subMaxLevel: 3,
// logo: '/_media/icon.svg',
// mergeNavbar: true,
// onlyCover: true,
notFoundPage: '/_404.md', // 页面未找到后跳转的文件
search: {
maxAge: 86400000, // 过期时间，单位毫秒，默认一天
placeholder: '搜索...',
noData: '暂无数据',
// 搜索标题的最大层级, 1 - 6
depth: 6,
hideOtherSidebarContent: false, // 是否隐藏其他侧边栏内容
},
count: {countable: true, fontsize: '0.9em', color: 'rgb(90,90,90)', language: 'chinese'}
}
</script>
<!-- Docsify v4 -->
<script src="src/docsify.js"></script>
<script src="src/prism.js"></script>
<script src="src/search.js"></script>
<script src="src/codeCopy.js"></script>
<script src="src/imgZoom.js"></script>
<script src="src/page.js"></script>
<script src="src/count.js"></script>
<script src='src/theme.js'></script>
<script>
if (typeof navigator.serviceWorker !== 'undefined') {
navigator.serviceWorker.register('src/sw.js')
}
</script>
<script>
setInterval(function () {
if (window.stop)
window.stop();
else
document.execCommand("Stop");
}, 5000)
</script>
</body>
</html>使其长时间运行
我以宝塔面板为例，首先我的其他网站位置都在wwwroot目录下，因此先将文件夹移动到这里。
然后创建nodejs项目。
创建项目然后绑定域名。
绑定域名最后访问域名就可以了。
