关于docsify一直Loading及界面美化

原因

当我使用docsify写文档时发现它一直处于Loading状态,官网也是一样

image-20231002132049947

然后我看了一下代码发现它的css和js都是从cdn.jsdelivr.net所导入的但是国内访问jsdelivr的速度就很。。。所以就造成了一直在Loading

解决方法

解决方法有2种,分别是

  • 将文件从本地引入

  • 改成其它域名引入

由于打不开jsdelivr所以就采用第二种方法

我们只需要在index.html中找到这几行代码

1
2
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>

然后把它们改成

1
2
<link rel="stylesheet" href="//fastly.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
<script src="//fastly.jsdelivr.net/npm/docsify@4"></script>

其实就是把cdn改成了fastly这样问题就解决了

如果要使用其它插件也需要将cdn改成fastly

界面优化

解决完之后我发现了2个问题,那就是默认主题的代码框上下间距太高了,还有复制插件的黑框显得很突兀

代码框修改间距

只需要在<head></head>之间添加以下代码即可

1
2
3
4
5
<style>
.markdown-section pre>code{
padding: 1.2em 5px;
}
</style>

效果对比

这是修改前的效果

image-20231002134318062

这是修改之后的效果

image-20231002134356462

可以看见上下间距减小了很多

复制按钮美化

js部分

首先在index的同级目录下新建一个copy.js

然后将一下代码写入copy.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
*!
* docsify-copy-code
* v3.0.0
* https://github.com/jperasmus/docsify-copy-code
* (c) 2017-2023 JP Erasmus <jperasmus11@gmail.com>
* MIT license
*/
!(function () {
"use strict";
function e(o) {
return (
(e =
"function" == typeof Symbol && "symbol" == typeof Symbol.iterator
? function (e) {
return typeof e;
}
: function (e) {
return e &&
"function" == typeof Symbol &&
e.constructor === Symbol &&
e !== Symbol.prototype
? "symbol"
: typeof e;
}),
e(o)
);
}
!(function (e, o) {
void 0 === o && (o = {});
var t = o.insertAt;
if (e && "undefined" != typeof document) {
var n = document.head || document.getElementsByTagName("head")[0],
c = document.createElement("style");
(c.type = "text/css"),
"top" === t && n.firstChild
? n.insertBefore(c, n.firstChild)
: n.appendChild(c),
c.styleSheet
? (c.styleSheet.cssText = e)
: c.appendChild(document.createTextNode(e));
}
})(
".docsify-copy-code-button,.docsify-copy-code-button>span{cursor:pointer;transition:all .25s ease}.docsify-copy-code-button{background:grey;background:var(--theme-color,grey);border:0;border-radius:5px;color:#fff;font-size:1em;opacity:0;outline:0;overflow:visible;padding:.55em .7em;position:absolute;right:0;top:0;z-index:1}.docsify-copy-code-button>span{background:inherit;border-radius:3px;pointer-events:none}.docsify-copy-code-button>.error,.docsify-copy-code-button>.success{font-size:.825em;opacity:0;padding:.5em .65em;position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:-100}.docsify-copy-code-button.error>.error,.docsify-copy-code-button.success>.success{opacity:1;right:100%;transform:translate(-25%,-50%)}.docsify-copy-code-button:focus,pre:hover .docsify-copy-code-button{opacity:1}.docsify-copy-code-button>[aria-live]{height:1px;left:-10000px;overflow:hidden;position:absolute;top:auto;width:1px};border-radius:5px;"
),
document.querySelector('link[href*="docsify-copy-code"]') &&
console.warn(
"[Deprecation] Link to external docsify-copy-code stylesheet is no longer necessary."
),
(window.DocsifyCopyCodePlugin = {
init: function () {
return function (e, o) {
e.ready(function () {
console.warn(
"[Deprecation] Manually initializing docsify-copy-code using window.DocsifyCopyCodePlugin.init() is no longer necessary."
);
});
};
},
}),
(window.$docsify = window.$docsify || {}),
(window.$docsify.plugins = [
function (o, t) {
var n = {
buttonText: "复制代码",
errorText: "Error",
successText: "已复制",
};
o.doneEach(function () {
var o = Array.from(document.querySelectorAll("pre[data-lang]"));
t.config.copyCode &&
Object.keys(n).forEach(function (o) {
var c = t.config.copyCode[o];
"string" == typeof c
? (n[o] = c)
: "object" === e(c) &&
Object.keys(c).some(function (e) {
var t = location.href.indexOf(e) > -1;
return (n[o] = t ? c[e] : n[o]), t;
});
});
var c = [
'<button class="docsify-copy-code-button"> ',
'<span class="label">'.concat(n.buttonText, "</span>"),
'<span class="error" aria-hidden="hidden">'.concat(
n.errorText,
"</span>"
),
'<span class="success" aria-hidden="hidden">'.concat(
n.successText,
"</span>"
),
'<span aria-live="polite"></span>',
"</button>",
].join("");
o.forEach(function (e) {
e.insertAdjacentHTML("beforeend", c);
});
}),
o.mounted(function () {
var e = document.querySelector(".content");
e &&
e.addEventListener("click", function (e) {
if (e.target.classList.contains("docsify-copy-code-button")) {
var o =
"BUTTON" === e.target.tagName
? e.target
: e.target.parentNode,
t = document.createRange(),
c = o.parentNode.querySelector("code"),
i = o.querySelector("[aria-live]"),
r = window.getSelection();
t.selectNode(c), r && (r.removeAllRanges(), r.addRange(t));
try {
document.execCommand("copy") &&
(o.classList.add("success"),
(i.innerText = n.successText),
setTimeout(function () {
o.classList.remove("success"), (i.innerText = "");
}, 1e3));
} catch (e) {
console.error("docsify-copy-code: ".concat(e)),
o.classList.add("error"),
(i.innerText = n.errorText),
setTimeout(function () {
o.classList.remove("error"), (i.innerText = "");
}, 1e3);
}
(r = window.getSelection()) &&
("function" == typeof r.removeRange
? r.removeRange(t)
: "function" == typeof r.removeAllRanges &&
r.removeAllRanges());
}
});
});
},
].concat(window.$docsify.plugins || []));
})();
//# sourceMappingURL=docsify-copy-code.min.js.map

再打开index.html将copy.js引入,注意此时要将原来的复制按钮插件取消引入,否则可能造成冲突

1
<script src="./copy.js"></script>

css部分

找到刚才的<style></style>标签在其中添加

1
2
.docsify-copy-code-button:focus, pre:hover .docsify-copy-code-button {
opacity: 0.85;

效果对比

这是原来的效果

image-20231002135051412

这是修改之后的效果

image-20231002135137850

THE END