butterfly主题
阅读须知
如果你是 clone
原主题 dev
分支的话,这篇博客可能不需要继续阅读下去,你只需将主题下Butterfly.yml
中 preloader: false
变为 true
即可。但是如果你是 clone
的 master
分支,和我一样,想自己搞一个加载动画,那就按着教程一步一步来。但我弄完之后,发现不开着或许会好一点,然后又变为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行添加如下代码:

第四步,在 themes/Butterfly/languages/zh-CN.yml
文件最后一行,添加如下代码
具体位置参考如下:

将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