perf: optimize UI and enhance user experience
This commit is contained in:
XPoet
parent
3ad5b5beeb
commit
f62107c7fb
|
|
@ -1,4 +1,5 @@
|
|||
<div class="comments-container">
|
||||
<div id="comment-anchor"></div>
|
||||
<% if (theme.comments.valine.enable && theme.comments.gitalk.enable) { %>
|
||||
<%- partial('valine') %>
|
||||
<% } else if (theme.comments.valine.enable) { %>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@
|
|||
'js/main.js'
|
||||
]) %>
|
||||
|
||||
<% if (theme.local_search.enable && config.search) { %>
|
||||
<%- js('js/local-search.js') %>
|
||||
<% } %>
|
||||
|
||||
<% if (theme.back2top.enable) { %>
|
||||
<%- js('js/back2top.js') %>
|
||||
<% } %>
|
||||
|
|
@ -21,4 +25,3 @@
|
|||
<%- js(['lib/anime.min.js', 'js/toc.js']) %>
|
||||
<% } %>
|
||||
<% } %>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,26 +1,23 @@
|
|||
<div class="tools-container">
|
||||
<ul class="tools-list">
|
||||
<% if (theme.local_search.enable) { %>
|
||||
<% if (theme.local_search.enable && config.search) { %>
|
||||
<li class="search popup-trigger">
|
||||
<i class="fa fa-search"></i>
|
||||
</li>
|
||||
<%- js('js/local-search.js') %>
|
||||
<% } %>
|
||||
<li class="mode-toggle">
|
||||
<i class="fa fa-moon-o"></i>
|
||||
</li>
|
||||
<% if (theme.local_search.enable && config.feed) { %>
|
||||
<li class="rss">
|
||||
<a href="<%= '/' + config.feed.path %>" target="_blank"><i class="fa fa-rss"></i></a>
|
||||
|
||||
<% if (is_post()) { %>
|
||||
<li class="go-comment">
|
||||
<i class="fa fa-comment"></i>
|
||||
</li>
|
||||
<% } %>
|
||||
<li class="page-aside-toggle">
|
||||
<i class="fa fa-bars"></i>
|
||||
</li>
|
||||
<% if (theme.back2top.enable) { %>
|
||||
<li class="scroll-to-top">
|
||||
<i class="fa fa-caret-up"></i>
|
||||
|
||||
<!-- TOC aside toggle -->
|
||||
<% if (theme.toc.enable && is_post()) { %>
|
||||
<li class="tools-item page-aside-toggle">
|
||||
<i class="fa fa-outdent"></i>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -59,6 +59,11 @@
|
|||
<%- partial('_partial/tools') %>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-tools-2">
|
||||
<%- partial('_partial/tools2') %>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- page aside -->
|
||||
<aside class="page-aside">
|
||||
<% if (is_post()) { %>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
@require "../common/variables.styl";
|
||||
@require "../common/magic-theme.styl";
|
||||
@require "../common/magic-theme.styl";
|
||||
|
||||
$li-border-radius = 5px;
|
||||
$li-margin-bottom = 12px;
|
||||
|
|
@ -10,9 +9,9 @@ $li-margin-bottom = 12px;
|
|||
.tools-list {
|
||||
li {
|
||||
cursor: pointer;
|
||||
width: $tool-button-width;
|
||||
height: $tool-button-width;
|
||||
border-radius: $li-border-radius;
|
||||
width: $circle-button-width;
|
||||
height: $circle-button-width;
|
||||
border-radius: 50%;
|
||||
font-size: 1.2em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -36,32 +35,6 @@ $li-margin-bottom = 12px;
|
|||
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 {
|
||||
display: none;
|
||||
|
||||
|
|
@ -69,8 +42,8 @@ $li-margin-bottom = 12px;
|
|||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
// ===================================
|
||||
// ========================================================================
|
||||
// THEME VARIABLE //
|
||||
// ===================================
|
||||
// ========================================================================
|
||||
|
||||
// ===================================
|
||||
// ========================================================================
|
||||
// layout
|
||||
// ===================================
|
||||
// ========================================================================
|
||||
if (hexo-config('magic.enable')) {
|
||||
$header-height = 72px; // magic 风格：头部默认高度
|
||||
} else {
|
||||
|
|
@ -16,12 +16,13 @@ $main-content-width-tablet = 80%; // 中间内容区域宽度（平板）
|
|||
$main-content-width-mobile = 88%; // 中间内容区域宽度（手机）
|
||||
|
||||
$header-shrink-height = 56px; // 头部收缩高度
|
||||
$tool-button-width = 36px; // tools 方形工具按钮宽度
|
||||
$component-interspace = 30px; // 组件/模块的间隔值（px）
|
||||
$circle-button-width = 40px; // tools 圆形工具按钮宽度
|
||||
$tools-button-width = 32px; // tools 方形工具按钮宽度
|
||||
$component-interspace = 40px; // 组件/模块的间隔值（px）
|
||||
|
||||
// ===================================
|
||||
// ========================================================================
|
||||
// 媒体查询
|
||||
// ===================================
|
||||
// ========================================================================
|
||||
$media-max-width = 760px; // 媒体查询最大宽度 (平板)
|
||||
$media-max-width-mobile = 480px; // 媒体查询最大宽度（手机）
|
||||
|
||||
|
|
@ -34,9 +35,9 @@ ils-mobile()
|
|||
{block}
|
||||
|
||||
|
||||
// ===================================
|
||||
// ========================================================================
|
||||
// z-index
|
||||
// ===================================
|
||||
// ========================================================================
|
||||
$z-index-1 = 1001;
|
||||
$z-index-2 = 1002;
|
||||
$z-index-3 = 1003;
|
||||
|
|
@ -45,11 +46,12 @@ $z-index-5 = 1005;
|
|||
$z-index-6 = 1006;
|
||||
$z-index-7 = 1007;
|
||||
$z-index-8 = 1008;
|
||||
$z-index-9 = 1009;
|
||||
|
||||
|
||||
// ===================================
|
||||
// ========================================================================
|
||||
// color
|
||||
// ===================================
|
||||
// ========================================================================
|
||||
// normal mode color
|
||||
$primary-color = convert(hexo-config("style.primary_color")) || #0066CC;
|
||||
$background-color = #fff; // normal 风格 背景颜色
|
||||
|
|
@ -75,9 +77,9 @@ $dark-border-color = lighten($dark-background-color, 20%);
|
|||
$dark-selection-color = $selection-color;
|
||||
|
||||
|
||||
// ===================================
|
||||
// ========================================================================
|
||||
// font
|
||||
// ===================================
|
||||
// ========================================================================
|
||||
// 'PingHei', 'PingFang SC', 'Microsoft YaHei';
|
||||
// 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light';
|
||||
// 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif;
|
||||
|
|
@ -89,9 +91,9 @@ $default-font-line-height = 20px;
|
|||
$default-font-weight = 400;
|
||||
|
||||
|
||||
// ===================================
|
||||
// ========================================================================
|
||||
// light/dark color
|
||||
// ===================================
|
||||
// ========================================================================
|
||||
:root {
|
||||
--background-color: $background-color;
|
||||
--magic-background-color: $magic-background-color;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
transition();
|
||||
top: $header-shrink-height + $component-interspace;
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
@import "layout/page.styl"
|
||||
@import "layout/_partial/local-search.styl"
|
||||
@import "layout/_partial/toc.styl"
|
||||
@import "layout/_partial/comments/valine.styl"
|
||||
@import "layout/_partial/comments/gitalk.styl"
|
||||
@import "layout/_partial/comments/comment.styl"
|
||||
@import "layout/_partial/header.styl"
|
||||
@import "layout/_partial/tools.styl"
|
||||
@import "layout/_partial/tools2.styl"
|
||||
@import "layout/_partial/archive-list.styl"
|
||||
@import "layout/_partial/footer.styl"
|
||||
@import "layout/_partial/paginator.styl"
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
...ILS.utils,
|
||||
|
||||
back2TopButton_dom: document.querySelector('.scroll-to-top'),
|
||||
back2BottomButton_dom: document.querySelector('.scroll-to-bottom'),
|
||||
|
||||
back2top() {
|
||||
const scrollTopTimer = setInterval(function () {
|
||||
|
|
@ -20,6 +21,19 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
}, 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() {
|
||||
if (ILS.utils.back2TopButton_dom) {
|
||||
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.initBack2BottomButton();
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -14,8 +14,16 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
|
||||
initToggleBarButton() {
|
||||
if (this.toggleBar) {
|
||||
const toggleBarIcon = this.toggleBar.querySelector('i');
|
||||
this.toggleBar.addEventListener('click', () => {
|
||||
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);
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,11 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
ILS.utils.printThemeInfo();
|
||||
|
||||
// init scroll
|
||||
ILS.utils.initWindowScroll();
|
||||
ILS.utils.registerWindowScroll();
|
||||
|
||||
// init tools button
|
||||
ILS.utils.registerToolsButtonClick();
|
||||
|
||||
// comment
|
||||
ILS.utils.goComment();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -20,10 +20,6 @@ ILS.utils = {
|
|||
const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0);
|
||||
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) {
|
||||
ILS.utils.headerProgress_dom.style.display = percent === '0' ? 'none' : 'block';
|
||||
ILS.utils.headerProgress_dom.style.width = `${ProgressPercent}%`;
|
||||
|
|
@ -39,8 +35,8 @@ ILS.utils = {
|
|||
ILS.utils.prevScrollValue = scrollTop;
|
||||
},
|
||||
|
||||
// 初始 window scroll 事件
|
||||
initWindowScroll() {
|
||||
// register window scroll event
|
||||
registerWindowScroll() {
|
||||
window.addEventListener('scroll', function (_e) {
|
||||
// style handle when scroll
|
||||
ILS.utils.styleHandleWhenScroll();
|
||||
|
|
@ -54,6 +50,66 @@ ILS.utils = {
|
|||
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();
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue