perf: optimize UI and enhance user experience

This commit is contained in:
XPoet 2020-10-25 10:48:07 +08:00
parent 3ad5b5beeb
commit f62107c7fb
15 changed files with 314 additions and 75 deletions

View File

@ -1,4 +1,5 @@
<div class="comments-container"> <div class="comments-container">
<div id="comment-anchor"></div>
<% if (theme.comments.valine.enable && theme.comments.gitalk.enable) { %> <% if (theme.comments.valine.enable && theme.comments.gitalk.enable) { %>
<%- partial('valine') %> <%- partial('valine') %>
<% } else if (theme.comments.valine.enable) { %> <% } else if (theme.comments.valine.enable) { %>

View File

@ -5,6 +5,10 @@
'js/main.js' 'js/main.js'
]) %> ]) %>
<% if (theme.local_search.enable && config.search) { %>
<%- js('js/local-search.js') %>
<% } %>
<% if (theme.back2top.enable) { %> <% if (theme.back2top.enable) { %>
<%- js('js/back2top.js') %> <%- js('js/back2top.js') %>
<% } %> <% } %>
@ -13,7 +17,7 @@
<%- js('js/left-side-toggle.js') %> <%- js('js/left-side-toggle.js') %>
<% if (theme.code_copy.enable) { %> <% if (theme.code_copy.enable ) { %>
<%- js('js/code-copy.js') %> <%- js('js/code-copy.js') %>
<% } %> <% } %>
@ -21,4 +25,3 @@
<%- js(['lib/anime.min.js', 'js/toc.js']) %> <%- js(['lib/anime.min.js', 'js/toc.js']) %>
<% } %> <% } %>
<% } %> <% } %>

View File

@ -1,26 +1,23 @@
<div class="tools-container"> <div class="tools-container">
<ul class="tools-list"> <ul class="tools-list">
<% if (theme.local_search.enable) { %> <% if (theme.local_search.enable && config.search) { %>
<li class="search popup-trigger"> <li class="search popup-trigger">
<i class="fa fa-search"></i> <i class="fa fa-search"></i>
</li> </li>
<%- js('js/local-search.js') %>
<% } %> <% } %>
<li class="mode-toggle">
<i class="fa fa-moon-o"></i> <% if (is_post()) { %>
</li> <li class="go-comment">
<% if (theme.local_search.enable && config.feed) { %> <i class="fa fa-comment"></i>
<li class="rss">
<a href="<%= '/' + config.feed.path %>" target="_blank"><i class="fa fa-rss"></i></a>
</li> </li>
<% } %> <% } %>
<li class="page-aside-toggle">
<i class="fa fa-bars"></i> <!-- TOC aside toggle -->
</li> <% if (theme.toc.enable && is_post()) { %>
<% if (theme.back2top.enable) { %> <li class="tools-item page-aside-toggle">
<li class="scroll-to-top"> <i class="fa fa-outdent"></i>
<i class="fa fa-caret-up"></i>
</li> </li>
<% } %> <% } %>
</ul> </ul>
</div> </div>

View File

@ -0,0 +1,32 @@
<div class="tools2-container">
<button class="tools-button">
<i class="fa fa-plus"></i>
</button>
<ul class="tools-wrapper">
<!-- back2top -->
<% if (theme.back2top.enable) { %>
<li class="tools-item scroll-to-bottom">
<i class="fa fa-arrow-down"></i>
</li>
<li class="tools-item scroll-to-top">
<i class="fa fa-arrow-up"></i>
</li>
<% } %>
<!-- mode toggle -->
<li class="tools-item mode-toggle">
<i class="fa fa-moon-o"></i>
</li>
<!-- rss -->
<% if (theme.rss.enable && config.feed) { %>
<li class="tools-item rss">
<a href="<%= '/' + config.feed.path %>" target="_blank"><i class="fa fa-rss"></i></a>
</li>
<% } %>
</ul>
</div>

View File

@ -59,6 +59,11 @@
<%- partial('_partial/tools') %> <%- partial('_partial/tools') %>
</div> </div>
<div class="sidebar-tools-2">
<%- partial('_partial/tools2') %>
</div>
<!-- page aside --> <!-- page aside -->
<aside class="page-aside"> <aside class="page-aside">
<% if (is_post()) { %> <% if (is_post()) { %>

View File

@ -0,0 +1,14 @@
if (hexo-config('comments.valine.enable')) {
@require "./valine.styl";
}
if (hexo-config('comments.gitalk.enable')) {
@require "./gitalk.styl";
}
.comments-container {
#comment-anchor {
width: 100%;
height: 20px;
}
}

View File

@ -1,6 +1,5 @@
@require "../common/variables.styl"; @require "../common/variables.styl";
@require "../common/magic-theme.styl"; @require "../common/magic-theme.styl";
@require "../common/magic-theme.styl";
$li-border-radius = 5px; $li-border-radius = 5px;
$li-margin-bottom = 12px; $li-margin-bottom = 12px;
@ -10,9 +9,9 @@ $li-margin-bottom = 12px;
.tools-list { .tools-list {
li { li {
cursor: pointer; cursor: pointer;
width: $tool-button-width; width: $circle-button-width;
height: $tool-button-width; height: $circle-button-width;
border-radius: $li-border-radius; border-radius: 50%;
font-size: 1.2em; font-size: 1.2em;
display: flex; display: flex;
align-items: center; align-items: center;
@ -36,32 +35,6 @@ $li-margin-bottom = 12px;
background: var(--primary-color); background: var(--primary-color);
} }
&.rss {
a {
border-radius: $li-border-radius;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
&:hover {
transition();
color: var(--background-color);
background: var(--primary-color);
}
}
}
&.scroll-to-top {
display: none;
position: fixed;
right: $component-interspace;
bottom: $component-interspace;
}
&.page-aside-toggle { &.page-aside-toggle {
display: none; display: none;
@ -69,8 +42,8 @@ $li-margin-bottom = 12px;
display: none !important; display: none !important;
} }
} }
} }
} }
} }

View File

@ -0,0 +1,99 @@
@require "../common/variables.styl";
@require "../common/magic-theme.styl";
$li-border-radius = 5px;
$li-margin-bottom = 12px;
.tools2-container {
.tools-button {
position: absolute;
top: 0;
left: 0;
width: $circle-button-width;
height: $circle-button-width;
border-radius: 50%;
font-size: 1.2em;
display: flex;
align-items: center;
justify-content: center;
background: var(--background-color);
color: var(--second-text-color);
z-index: 9999;
if (hexo-config('magic.enable') == true) {
magic-style(1.1, 1.1);
} else {
border: 1px solid var(--border-color);
}
&:hover {
transition();
color: var(--background-color);
background: var(--primary-color);
}
}
.tools-wrapper {
display: flex;
align-items: center;
justify-content: center;
.tools-item {
position: absolute;
top: 0;
left: ($circle-button-width - $tools-button-width) / 2;
cursor: pointer;
width: $tools-button-width;
height: $tools-button-width;
border-radius: $li-border-radius;
font-size: 1.2em;
display: flex;
align-items: center;
justify-content: center;
background: var(--background-color);
opacity: 0;
&.hide {
opacity: 0;
transform: translate3d(0, 0, 0);
}
if (hexo-config('magic.enable') == true) {
magic-style(1.1, 1.1);
} else {
border: 1px solid var(--border-color);
}
&:hover {
transition();
color: var(--background-color);
background: var(--primary-color);
}
&.rss {
a {
border-radius: $li-border-radius;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
&:hover {
transition();
color: var(--background-color);
background: var(--primary-color);
}
}
}
}
}
}

View File

@ -1,10 +1,10 @@
// =================================== // ========================================================================
// THEME VARIABLE // // THEME VARIABLE //
// =================================== // ========================================================================
// =================================== // ========================================================================
// layout // layout
// =================================== // ========================================================================
if (hexo-config('magic.enable')) { if (hexo-config('magic.enable')) {
$header-height = 72px; // magic $header-height = 72px; // magic
} else { } else {
@ -15,13 +15,14 @@ $main-content-width = 62%; // 中间内容区域宽度PC
$main-content-width-tablet = 80%; // $main-content-width-tablet = 80%; //
$main-content-width-mobile = 88%; // $main-content-width-mobile = 88%; //
$header-shrink-height = 56px; // $header-shrink-height = 56px; //
$tool-button-width = 36px; // tools $circle-button-width = 40px; // tools
$component-interspace = 30px; // /px $tools-button-width = 32px; // tools
$component-interspace = 40px; // /px
// =================================== // ========================================================================
// //
// =================================== // ========================================================================
$media-max-width = 760px; // () $media-max-width = 760px; // ()
$media-max-width-mobile = 480px; // $media-max-width-mobile = 480px; //
@ -34,9 +35,9 @@ ils-mobile()
{block} {block}
// =================================== // ========================================================================
// z-index // z-index
// =================================== // ========================================================================
$z-index-1 = 1001; $z-index-1 = 1001;
$z-index-2 = 1002; $z-index-2 = 1002;
$z-index-3 = 1003; $z-index-3 = 1003;
@ -45,11 +46,12 @@ $z-index-5 = 1005;
$z-index-6 = 1006; $z-index-6 = 1006;
$z-index-7 = 1007; $z-index-7 = 1007;
$z-index-8 = 1008; $z-index-8 = 1008;
$z-index-9 = 1009;
// =================================== // ========================================================================
// color // color
// =================================== // ========================================================================
// normal mode color // normal mode color
$primary-color = convert(hexo-config("style.primary_color")) || #0066CC; $primary-color = convert(hexo-config("style.primary_color")) || #0066CC;
$background-color = #fff; // normal $background-color = #fff; // normal
@ -75,9 +77,9 @@ $dark-border-color = lighten($dark-background-color, 20%);
$dark-selection-color = $selection-color; $dark-selection-color = $selection-color;
// =================================== // ========================================================================
// font // font
// =================================== // ========================================================================
// 'PingHei', 'PingFang SC', 'Microsoft YaHei'; // 'PingHei', 'PingFang SC', 'Microsoft YaHei';
// 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light'; // 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light';
// 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif; // 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif;
@ -89,9 +91,9 @@ $default-font-line-height = 20px;
$default-font-weight = 400; $default-font-weight = 400;
// =================================== // ========================================================================
// light/dark color // light/dark color
// =================================== // ========================================================================
:root { :root {
--background-color: $background-color; --background-color: $background-color;
--magic-background-color: $magic-background-color; --magic-background-color: $magic-background-color;

View File

@ -158,6 +158,27 @@ $page-aside-width = 258px;
} }
.sidebar-tools-2 {
position: fixed;
bottom: $component-interspace;
right: $component-interspace;
width: $circle-button-width;
height: $circle-button-width;
+ils-tablet() {
right: 10px;
transform: scale(0.82);
transform-origin: right bottom;
}
+ils-mobile() {
right: 5px;
transform: scale(0.72);
transform-origin: right bottom;
}
}
.sidebar-tools-shrink { .sidebar-tools-shrink {
transition(); transition();
top: $header-shrink-height + $component-interspace; top: $header-shrink-height + $component-interspace;

View File

@ -4,10 +4,10 @@
@import "layout/page.styl" @import "layout/page.styl"
@import "layout/_partial/local-search.styl" @import "layout/_partial/local-search.styl"
@import "layout/_partial/toc.styl" @import "layout/_partial/toc.styl"
@import "layout/_partial/comments/valine.styl" @import "layout/_partial/comments/comment.styl"
@import "layout/_partial/comments/gitalk.styl"
@import "layout/_partial/header.styl" @import "layout/_partial/header.styl"
@import "layout/_partial/tools.styl" @import "layout/_partial/tools.styl"
@import "layout/_partial/tools2.styl"
@import "layout/_partial/archive-list.styl" @import "layout/_partial/archive-list.styl"
@import "layout/_partial/footer.styl" @import "layout/_partial/footer.styl"
@import "layout/_partial/paginator.styl" @import "layout/_partial/paginator.styl"

View File

@ -4,6 +4,7 @@ window.addEventListener('DOMContentLoaded', () => {
...ILS.utils, ...ILS.utils,
back2TopButton_dom: document.querySelector('.scroll-to-top'), back2TopButton_dom: document.querySelector('.scroll-to-top'),
back2BottomButton_dom: document.querySelector('.scroll-to-bottom'),
back2top() { back2top() {
const scrollTopTimer = setInterval(function () { const scrollTopTimer = setInterval(function () {
@ -20,6 +21,19 @@ window.addEventListener('DOMContentLoaded', () => {
}, 30); }, 30);
}, },
back2Bottom() {
let scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
const scrollBottomTimer = setInterval(function () {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (!scrollTop) scrollTop = 10;
scrollTop = scrollTop + scrollTop / 2;
window.scrollTo(0, scrollTop);
if (scrollTop >= scrollHeight) {
clearInterval(scrollBottomTimer);
}
}, 50);
},
initBack2TopButton() { initBack2TopButton() {
if (ILS.utils.back2TopButton_dom) { if (ILS.utils.back2TopButton_dom) {
ILS.utils.back2TopButton_dom.addEventListener('click', () => { ILS.utils.back2TopButton_dom.addEventListener('click', () => {
@ -27,9 +41,18 @@ window.addEventListener('DOMContentLoaded', () => {
}); });
} }
}, },
initBack2BottomButton() {
if (ILS.utils.back2BottomButton_dom) {
ILS.utils.back2BottomButton_dom.addEventListener('click', () => {
this.back2Bottom();
});
}
},
} }
ILS.utils.initBack2TopButton(); ILS.utils.initBack2TopButton();
ILS.utils.initBack2BottomButton();
}); });

View File

@ -14,8 +14,16 @@ window.addEventListener('DOMContentLoaded', () => {
initToggleBarButton() { initToggleBarButton() {
if (this.toggleBar) { if (this.toggleBar) {
const toggleBarIcon = this.toggleBar.querySelector('i');
this.toggleBar.addEventListener('click', () => { this.toggleBar.addEventListener('click', () => {
this.isOpenPageAside = !this.isOpenPageAside; this.isOpenPageAside = !this.isOpenPageAside;
if (this.isOpenPageAside) {
toggleBarIcon.classList.add('fa-outdent');
toggleBarIcon.classList.remove('fa-indent');
} else {
toggleBarIcon.classList.add('fa-indent');
toggleBarIcon.classList.remove('fa-outdent');
}
this.changePageLayoutWhenOpenToggle(this.isOpenPageAside); this.changePageLayoutWhenOpenToggle(this.isOpenPageAside);
}) })
} }

View File

@ -3,6 +3,11 @@ window.addEventListener('DOMContentLoaded', () => {
ILS.utils.printThemeInfo(); ILS.utils.printThemeInfo();
// init scroll // init scroll
ILS.utils.initWindowScroll(); ILS.utils.registerWindowScroll();
// init tools button
ILS.utils.registerToolsButtonClick();
// comment
ILS.utils.goComment();
}); });

View File

@ -20,10 +20,6 @@ ILS.utils = {
const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0); const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0);
const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3); const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3);
if (CONFIG.back2top.enable && ILS.utils.back2TopButton_dom) {
ILS.utils.back2TopButton_dom.style.display = percent === '0' ? 'none' : 'flex';
}
if (ILS.utils.headerProgress_dom) { if (ILS.utils.headerProgress_dom) {
ILS.utils.headerProgress_dom.style.display = percent === '0' ? 'none' : 'block'; ILS.utils.headerProgress_dom.style.display = percent === '0' ? 'none' : 'block';
ILS.utils.headerProgress_dom.style.width = `${ProgressPercent}%`; ILS.utils.headerProgress_dom.style.width = `${ProgressPercent}%`;
@ -39,8 +35,8 @@ ILS.utils = {
ILS.utils.prevScrollValue = scrollTop; ILS.utils.prevScrollValue = scrollTop;
}, },
// 初始 window scroll 事件 // register window scroll event
initWindowScroll() { registerWindowScroll() {
window.addEventListener('scroll', function (_e) { window.addEventListener('scroll', function (_e) {
// style handle when scroll // style handle when scroll
ILS.utils.styleHandleWhenScroll(); ILS.utils.styleHandleWhenScroll();
@ -54,6 +50,66 @@ ILS.utils = {
ILS.utils.headerShrink.headerShrink(); ILS.utils.headerShrink.headerShrink();
}); });
}, },
// tools
registerToolsButtonClick() {
let isOpen = false
this.toolsMenuButton_dom = document.querySelector('.tools-button');
this.toolsWrapperList_dom = document.querySelectorAll('.tools-wrapper li');
this.toolsMenuButton_dom.addEventListener('click', e => {
isOpen = !isOpen;
const toolsMenuButtonIcon = this.toolsMenuButton_dom.querySelector('i');
if (isOpen) {
toolsMenuButtonIcon.classList.add('fa-minus');
toolsMenuButtonIcon.classList.remove('fa-plus');
} else {
toolsMenuButtonIcon.classList.add('fa-plus');
toolsMenuButtonIcon.classList.remove('fa-minus');
}
this.toolsWrapperList_dom.forEach((li, index) => {
if (isOpen) {
li.style.transform = `translate3d(0, -${138 * (index + 1)}%, 0)`;
li.style.opacity = '1';
} else {
li.style.opacity = '0';
li.style.transform = 'translate3d(0, 0, 0)';
}
});
});
},
// calculate transform value
calculateTransformValue(index) {
const x = 3;
const y = Math.floor(index / x) + 1;
const z = index % x + 1;
switch (z) {
case 1:
return `0, -${150 * y}%, 0`;
case 2:
return `-${150 * y}%, -${150 * y}%, 0`;
case 3:
return `-${150 * y}%, 0, 0`;
}
},
// go comment
goComment() {
this.goComment_dom = document.querySelector('.go-comment');
if (this.goComment_dom) {
this.goComment_dom.addEventListener('click', () => {
document.querySelector('#comment-anchor').scrollIntoView();
});
}
},
} }