butterfly主题

阅读须知

如果你是 clone 原主题 dev 分支的话,这篇博客可能不需要继续阅读下去,你只需将主题下Butterfly.ymlpreloader: false 变为 true 即可。但是如果你是 clonemaster 分支,和我一样,想自己搞一个加载动画,那就按着教程一步一步来。但我弄完之后,发现不开着或许会好一点,然后又变为false了。

教程

第一步,在 themes/Butterfly/layout/includes/layout.pug 添加如下代码:

if theme.preloader
!=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})


继续,在 themes/Butterfly/layout/404.pug 添加如下代码:

if theme.preloader
!=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})
if theme.fireworks && theme.fireworks.enable

themes/Butterfly/layout/includes/additional-js.pug 最后一行添加如下代码:

if theme.preloader
!=partial('includes/loading/loading-js', {}, {cache:theme.fragment_cache})

第二步,在 themes/Butterfly/layout/includes 下新建一个文件夹,命名为 loading,如下图所示,添加两个文件。

loading-js.pug

script.
var endLoading = function () {
document.body.style.overflow = 'auto';
document.getElementById('loading-box').classList.add("loaded")
}
window.addEventListener('load',endLoading)

loading.pug

#loading-box
.loading-left-bg
.loading-right-bg
.spinner-box
.configure-border-1
.configure-core
.configure-border-2
.configure-core
.loading-word= _p('loading')

第三步,在themse/Butterfly/source/css/_layout/ 文件夹下新建 loadding.styl,复制下面代码,添加

if hexo-config('preloader')
loading-bg()
position: fixed
z-index: 1000
width: 50%
height: 100%
background-color: $preloader-bg
transition: all .5s

#loading-box
.loading-left-bg
loading-bg()

.loading-right-bg
loading-bg()
right: 0

.spinner-box
position: fixed
z-index: 1001
display: flex
justify-content: center
align-items: center
width: 100%
height: 100vh

.configure-border-1
position: absolute
padding: 3px
width: 115px
height: 115px
background: #ffab91
animation: configure-clockwise 3s ease-in-out 0s infinite alternate

.configure-border-2
left: -115px
padding: 3px
width: 115px
height: 115px
background: rgb(63, 249, 220)
transform: rotate(45deg)
animation: configure-xclockwise 3s ease-in-out 0s infinite alternate

.loading-word
position: absolute
color: $white
font-size: .8rem

.configure-core
width: 100%
height: 100%
background-color: $preloader-bg

&.loaded
.loading-left-bg
transform: translate(-100%, 0)

.loading-right-bg
transform: translate(100%, 0)

.spinner-box
display: none

@keyframes configure-clockwise
0%
transform: rotate(0)

25%
transform: rotate(90deg)

50%
transform: rotate(180deg)

75%
transform: rotate(270deg)

100%
transform: rotate(360deg)

@keyframes configure-xclockwise
0%
transform: rotate(45deg)

25%
transform: rotate(-45deg)

50%
transform: rotate(-135deg)

75%
transform: rotate(-225deg)

100%
transform: rotate(-315deg)

然后在themse/Butterfly/source/css/_mode/darkmode.styl 文件最后一行添加如下代码:

if hexo-config('preloader')
#loading-box
.loading-left-bg,
.loading-right-bg,
.configure-core
background-color: darken(#121212, 2)

.loading-word
color: alpha(#FFFFFF, .6)

然后在themse/Butterfly/source/css/var.styl 文件大约在85行添加如下代码:

//preloader
$preloader-bg = #37474f

第四步,在 themes/Butterfly/languages/zh-CN.yml 文件最后一行,添加如下代码

loading: 加载中...

具体位置参考如下:

themes/Butterfly/layout/includes/head/subtitle.pug 文件替换为如下代码(将原本的删除)

if theme.subtitle.enable
- var source = theme.subtitle.source
- var subtitleEffect = theme.subtitle.effect

if subtitleEffect
script(src=url_for(theme.CDN.typed))

if source == '1'
script.
var subtitleType = function () {
var subtitleEffect = !{ subtitleEffect }
fetch('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json',)
.then(function (res) {
return res.json()
})
.then(function (data) {
if (subtitleEffect) {
var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(',')
var both = sub.unshift(data.text)
var typed = new Typed('#subtitle', {
strings: sub,
startDelay: 300,
typeSpeed: 150,
loop: !{theme.subtitle.loop},
backSpeed: 50,
})
} else {
document.getElementById('subtitle').innerHTML = data.text
}
})
.catch(function (err) {
console.error(err)
})
}
window.addEventListener('load', subtitleType)

else if source == '2'
script.
var subtitleType = function () {
var subtitleEffect = !{ subtitleEffect }
fetch('https://v1.hitokoto.cn')
.then(function (res) {
return res.json()
})
.then(function (data) {
if (subtitleEffect) {
var from = '出自 ' + data.from
var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(',')
var both = sub.unshift(data.hitokoto, from)
var typed = new Typed('#subtitle', {
strings: sub,
startDelay: 300,
typeSpeed: 150,
loop: !{theme.subtitle.loop},
backSpeed: 50,
})
} else {
document.getElementById('subtitle').innerHTML = data.hitokoto
}
})
.catch(function (err) {
console.error(err)
})
}
window.addEventListener('load', subtitleType)

else if source == '3'
script.
var subtitleType = function () {
loadScript('http://yijuzhan.com/api/word.php?m=js', function () {
var subtitleEffect = !{ subtitleEffect }
var con = str[0]
if (subtitleEffect) {
var from = '出自 ' + str[1]
var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(',')
var both = sub.unshift(con, from)
var typed = new Typed('#subtitle', {
strings: sub,
startDelay: 300,
typeSpeed: 150,
loop: !{theme.subtitle.loop},
backSpeed: 50,
})
} else {
document.getElementById('subtitle').innerHTML = con
}
})
}
window.addEventListener('load', subtitleType)

else if source == '4'
script.
var subtitleType = function () {
loadScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js',function () {
var subtitleEffect = !{ subtitleEffect }
jinrishici.load(function (result) {
if (subtitleEffect) {
var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(',')
var content = result.data.content
var both = sub.unshift(content)
var typed = new Typed('#subtitle', {
strings: sub,
startDelay: 300,
typeSpeed: 150,
loop: !{theme.subtitle.loop},
backSpeed: 50,
})
} else {
document.getElementById('subtitle').innerHTML = result.data.content
}
})
}
)
}
window.addEventListener('load', subtitleType)

else
script.
var subtitleEffect = !{subtitleEffect}
if (subtitleEffect) {
var typed = new Typed("#subtitle", {
strings: '!{theme.subtitle.sub}'.split(","),
startDelay: 300,
typeSpeed: 150,
loop: !{theme.subtitle.loop},
backSpeed: 50
})
} else {
document.getElementById("subtitle").innerHTML = '!{theme.subtitle.sub[0]}'
}

第五步,在主题文件 butterfly.yml 任意位置添加如下代码,启用加载动画,不启用可以设置为 false

# 加载动画 Loading Animation
preloader: true

其他主题

第一步,将以下内容添加到 <head></head> 标签内:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/loading.min.css">

第二步,将以下内容添加到<body> 标签后面:

<div id="loading-box">
<div class="loading-left-bg"></div>
<div class="loading-right-bg"></div>
<div class="spinner-box">
<div class="configure-border-1">
<div class="configure-core"></div>
</div>
<div class="configure-border-2">
<div class="configure-core"></div>
</div>
<div class="loading-word">加载中...</div>
</div>
</div>

第三步,将以下内容添加到 </body>标签前面:

<script>
var endLoading = function () {
document.body.style.overflow = 'auto';
document.getElementById('loading-box').classList.add("loaded");
}
window.addEventListener('load',endLoading);
</script>

参考博客:

作者: HCLonely
链接: https://blog.hclonely.com/
来源: HCLonely Blog