xaoxuu
/
hexo-theme-stellar
mirror of https://github.com/xaoxuu/hexo-theme-stellar
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

loading

This commit is contained in:
xaoxuu 2022-10-24 00:41:49 +08:00
parent 9a02adad9a
commit 4ef9a65cd2
8 changed files with 38 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_config.yml
View File

@ -357,6 +357,9 @@ style:
codeblock:
scrollbar: 4px
highlightjs_theme: https://fastly.jsdelivr.net/gh/highlightjs/cdn-release@11.5.0/build/styles/atom-one-dark.min.css
loading:
loading: 正在加载
error: 加载失败，请稍后重试。
default:
avatar: https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/avatar/round/3442075.svg

3
scripts/tags/about.js
View File

@ -18,8 +18,7 @@ hexo.extend.tag.register('about', function(args, content) {
el += '<div class="tag-plugin about">';
if (args.back) {
el += '<a class="nav-back cap" href="' + url_for(hexo.config.root) + '">';
el += '<svg aria-hidden="true" viewBox="0 0 16 16" width="1rem" height="1rem" fill="currentColor"><path fill-rule="evenodd" d="M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z"></path></svg>';
el += '<span>Back</span>';
el += '<svg aria-hidden="true" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z"></path></svg>';
el += '</a>';
}
// avatar

17
source/css/_common/loading.styl
View File

@ -15,6 +15,19 @@ svg.loading
transform:rotate(360deg)
.loading-wrap
min-height: 50px
margin: 2rem 0
margin: 0.5rem 0
text-align: center
background: var(--block)
border-radius: $border-card
position relative
padding: 2rem
svg
margin: 4px
&:after
content: hexo-config('style.loading.loading')
color: var(--text-p1)
display: block
font-size: 14px
&.error
&:after
content: hexo-config('style.loading.error')

2
source/css/_layout/sidebar/footer.styl
View File

@ -1,5 +1,5 @@
.l_left .footer
margin-top: .5rem
margin: 0.5rem var(--gap-l) 0
@media screen and (max-width: $device-tablet)
margin-bottom: 1rem

26
source/css/_layout/tag-plugins/about.styl
View File

@ -4,30 +4,18 @@
padding: 2rem
position: relative
.nav-back
display: none
position: absolute
line-height: 1
overflow: hidden
left: 1rem
top: 1rem
display: flex
left: 0.75rem
top: 0.75rem
align-items: center
background: var(--site-bg)
border-radius: 40px
border: 1px solid var(--block-border)
padding: 2px 0
svg,span
trans1 transform
width: 36px
span
position: absolute
text-align: center
left: 100%
&:hover
background: var(--card)
@media screen and (max-width: $device-mobile-max)
display: flex
svg
transform: translateX(-36px)
span
transform: translateX(-100%)
width: 1rem
height: 1rem
.about-header
display flex
justify-content: center

5
source/js/plugins/friends.js
View File

@ -44,7 +44,7 @@ const friendsjs = {
},
layout: (cfg) => {
const el = $(cfg.el)[0];
$(el).append('<div class="loading-wrap"><svg class="loading" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg><p></p></div>');
$(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg></div>');
friendsjs.requestAPI(cfg.api, function(data) {
$(el).find('.loading-wrap').remove();
const arr = data.content || data;
@ -60,7 +60,8 @@ const friendsjs = {
});
}, function() {
$(el).find('.loading-wrap svg').remove();
$(el).find('.loading-wrap p').text('加载失败，请稍后重试。');
$(el).find('.loading-wrap').append('<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3L21 20H3L12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="6" stroke-dashoffset="6" d="M12 10V14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="6;0"/></path></g><circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="0.8s" dur="0.4s" values="0;1"/></circle></svg>');
$(el).find('.loading-wrap').addClass('error');
});
},
}

5
source/js/plugins/sites.js
View File

@ -44,7 +44,7 @@ const sitesjs = {
},
layout: (cfg) => {
const el = $(cfg.el)[0];
$(el).append('<div class="loading-wrap"><svg class="loading" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg><p></p></div>');
$(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg></div>');
sitesjs.requestAPI(cfg.api, function(data) {
$(el).find('.loading-wrap').remove();
const arr = data.content;
@ -63,7 +63,8 @@ const sitesjs = {
});
}, function() {
$(el).find('.loading-wrap svg').remove();
$(el).find('.loading-wrap p').text('加载失败，请稍后重试。');
$(el).find('.loading-wrap').append('<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3L21 20H3L12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="6" stroke-dashoffset="6" d="M12 10V14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="6;0"/></path></g><circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="0.8s" dur="0.4s" values="0;1"/></circle></svg>');
$(el).find('.loading-wrap').addClass('error');
});
},
}

5
source/js/plugins/timeline.js
View File

@ -54,7 +54,7 @@ const StellarTimeline = {
},
layoutDiv: (cfg) => {
const el = $(cfg.el)[0];
$(el).append('<div class="loading-wrap"><svg class="loading" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg><p></p></div>');
$(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg></div>');
StellarTimeline.requestAPI(cfg.api, function(data) {
$(el).find('.loading-wrap').remove();
const arr = data.content || data;
@ -127,7 +127,8 @@ const StellarTimeline = {
});
}, function() {
$(el).find('.loading-wrap svg').remove();
$(el).find('.loading-wrap p').text('加载失败，请稍后重试。');
$(el).find('.loading-wrap').append('<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3L21 20H3L12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="6" stroke-dashoffset="6" d="M12 10V14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="6;0"/></path></g><circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="0.8s" dur="0.4s" values="0;1"/></circle></svg>');
$(el).find('.loading-wrap').addClass('error');
});
},
}