Butterfly主题首页副标题自定义随机句子
前言
本文目的在于，实现从自定义的句子库中随机抽取一句，作为butterfly进入首页时的副标题，进行打字机效果的展示：
Butterfly在主题配置文件_config.butterfly.yml中有对副标题进行个性化设置的选项：# the subtitle on homepage (主頁subtitle)
subtitle:
enable: true
# Typewriter Effect (打字效果)
effect: true
# loop (循環打字)
loop: false
# source 調用第三方服務
# source: false 關閉調用
# source: 1 調用一言網的一句話（簡體） https://hitokoto.cn/
# source: 2 調用一句網（簡體） http://yijuzhan.com/
# source: 3 調用今日詩詞（簡體） https://www.jinrishici.com/
# subtitle 會先顯示 source , 再顯示 sub 的內容
source: false
# 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
sub:
– 生活嘛，那么矫情~
可以看到，它提供了三个随机句子的来源：一言网、一句网和今日诗词。但是我想达到的效果是，让这个随机句子的来源是可以自定义的，这样就能把自己收藏的各种中二台词放进去了。
教程
新建句子库文件
在[BlogRoot]\source\下创建subtitle.json，里面放喜欢的句子，格式如下：[
“火影，是没有捷径可走的。”,
“说道做到，这就是我的忍道！”
]
这是一个json数组，由多个字符串组成，中间用逗号分开，注意最后一个句子后面不加逗号。
修改pug文件
找到[Blog_Root]\themes\butterfly\layout\includes\third-party\subtitle.pug，修改其中的内容：+- 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）：- 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();
设置主题配置文件
# the subtitle on homepage (主頁subtitle)
subtitle:
enable: true
# Typewriter Effect (打字效果)
effect: true
# loop (循環打字)
loop: false
# source 調用第三方服務
# source: false 關閉調用
# source: 1 調用一言網的一句話（簡體） https://hitokoto.cn/
# source: 2 調用一句網（簡體） http://yijuzhan.com/
# source: 3 調用今日詩詞（簡體） https://www.jinrishici.com/
# subtitle 會先顯示 source , 再顯示 sub 的內容
source: false
# 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
sub:
– 生活嘛，那么矫情~
enable设置为true，effect设置为true，source设置为false，sub随便写一句，不知道不写行不行。
然后就可以部署试试啦，效果点本博客左上角标题回到首页就能看到。我对这些代码也是现学现卖的，而且本身是暴力嵌入式修改很不优雅，不过它确实work了。希望有更优雅的方案出来。