前言
本文目的在于，实现从自定义的句子库中随机抽取一句，作为butterfly进入首页时的副标题，进行打字机效果的展示：
Butterfly在主题配置文件_config.butterfly.yml中有对副标题进行个性化设置的选项：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
subtitle:
enable: true
effect: true
loop: false
source: false
sub:
- 生活嘛，那么矫情~
|
可以看到，它提供了三个随机句子的来源：一言网、一句网和今日诗词。但是我想达到的效果是，让这个随机句子的来源是可以自定义的，这样就能把自己收藏的各种中二台词放进去了。
教程
新建句子库文件
在[BlogRoot]\source\下创建subtitle.json，里面放喜欢的句子，格式如下：
1
2
3
4
| [
"火影，是没有捷径可走的。",
"说道做到，这就是我的忍道！"
]
|
这是一个json数组，由多个字符串组成，中间用逗号分开，注意最后一个句子后面不加逗号。
修改pug文件
找到[Blog_Root]\themes\butterfly\layout\includes\third-party\subtitle.pug，修改其中的内容：
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
| +- let Eamonsubtitle = "呵呵呵"
default
- subContent = subContent.length ? subContent : new Array(config.subtitle)
script.
function subtitleType () {
if (!{effect}) {
window.typed = new Typed("#subtitle", {
- strings: !{JSON.stringify(subContent)},
+ strings: [Eamonsubtitle],
startDelay: 300,
typeSpeed: 150,
loop: !{loop},
backSpeed: 50
})
} else {
document.getElementById("subtitle").innerHTML = '!{subContent[0]}'
}
}
- if (!{effect}) {
- if (typeof Typed === 'function') {
- subtitleType()
- } else {
- getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
- }
- } else {
- subtitleType()
- }
+ function loaddoc(){
+ var xhttp = new XMLHttpRequest();
+ xhttp.onreadystatechange = function(){
+ var jsona = ["哈哈哈","嘿嘿嘿"];
+ var jslength = 0;
+ if(this.readyState == 4 && this.status == 200) {
+ jsona = JSON.parse(this.responseText);
+ jslength = 0;
+ for(var x in jsona){
+ jslength++;
+ }
+ if (!{effect}) {
+ if (typeof Typed === 'function') {
+ subtitleType()
+ } else {
+ getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
+ }
+ } else {
+ subtitleType()
+ }
+ var random_no = Math.floor(Math.random()*100000%jslength);
+ Eamonsubtitle = jsona[random_no];
+ }
+ }
+ xhttp.open("GET", "/subtitle.json", true);
+ xhttp.send();
+ }
+ loaddoc();
|
第一行那句let顶格写。
如果你没有对这个文件有过任何修改，可以把下面的直接附近进去替换掉原文（我用的Butterfly版本是4.3.1）：
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
141
142
143
144
145
146
| - const { effect,loop,source,sub } = theme.subtitle
- let subContent = sub || new Array()
- let Eamonsubtitle = "呵呵呵"
case source
when 1
script.
function subtitleType () {
fetch('https://v1.hitokoto.cn')
.then(response => response.json())
.then(data => {
if (!{effect}) {
const from = '出自 ' + data.from
const sub = !{JSON.stringify(subContent)}
sub.unshift(data.hitokoto, from)
window.typed = new Typed('#subtitle', {
strings: sub,
startDelay: 300,
typeSpeed: 150,
loop: !{loop},
backSpeed: 50,
})
} else {
document.getElementById('subtitle').innerHTML = data.hitokoto
}
})
}
if (!{effect}) {
if (typeof Typed === 'function') {
subtitleType()
} else {
getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
}
} else {
subtitleType()
}
when 2
script.
function subtitleType () {
getScript('https://yijuzhan.com/api/word.php?m=js').then(() => {
const con = str[0]
if (!{effect}) {
const from = '出自 ' + str[1]
const sub = !{JSON.stringify(subContent)}
sub.unshift(con, from)
window.typed = new Typed('#subtitle', {
strings: sub,
startDelay: 300,
typeSpeed: 150,
loop: !{loop},
backSpeed: 50,
})
} else {
document.getElementById('subtitle').innerHTML = con
}
})
}
if (!{effect}) {
if (typeof Typed === 'function') {
subtitleType()
} else {
getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
}
} else {
subtitleType()
}
when 3
script.
function subtitleType () {
getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => {
jinrishici.load(result =>{
if (!{effect}) {
const sub = !{JSON.stringify(subContent)}
const content = result.data.content
sub.unshift(content)
window.typed = new Typed('#subtitle', {
strings: sub,
startDelay: 300,
typeSpeed: 150,
loop: !{loop},
backSpeed: 50,
})
} else {
document.getElementById('subtitle').innerHTML = result.data.content
}
})
})
}
if (!{effect}) {
if (typeof Typed === 'function') {
subtitleType()
} else {
getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
}
} else {
subtitleType()
}
default
- subContent = subContent.length ? subContent : new Array(config.subtitle)
script.
function subtitleType () {
if (!{effect}) {
window.typed = new Typed("#subtitle", {
strings: [Eamonsubtitle],
startDelay: 300,
typeSpeed: 150,
loop: !{loop},
backSpeed: 50
})
} else {
document.getElementById("subtitle").innerHTML = '!{subContent[0]}'
}
}
function loaddoc(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
var jsona = ["哈哈哈","嘿嘿嘿"];
var jslength = 0;
if(this.readyState == 4 && this.status == 200) {
jsona = JSON.parse(this.responseText);
jslength = 0;
for(var x in jsona){
jslength++;
}
if (!{effect}) {
if (typeof Typed === 'function') {
subtitleType()
} else {
getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
}
} else {
subtitleType()
}
var random_no = Math.floor(Math.random()*100000%jslength);
Eamonsubtitle = jsona[random_no];
}
}
xhttp.open("GET", "/subtitle.json", true);
xhttp.send();
}
loaddoc();
|
设置主题配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
subtitle:
enable: true
effect: true
loop: false
source: false
sub:
- 生活嘛，那么矫情~
|
enable设置为true，effect设置为true，source设置为false，sub随便写一句，不知道不写行不行。
然后就可以部署试试啦，效果点本博客左上角标题回到首页就能看到。我对这些代码也是现学现卖的，而且本身是暴力嵌入式修改很不优雅，不过它确实work了。希望有更优雅的方案出来。
