lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf: optimizing DOM naming

This commit is contained in:
XPoet 2021-01-08 16:07:54 +08:00
parent 31444f2458
commit 83c6af4438
5 changed files with 29 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
layout/_partial/progress-bar.ejs
View File

@ -2,8 +2,8 @@
<span class="scroll-progress-bar"></span>
<% if (theme.pjax.enable === true) { %>
<span class="loading-progress-bar"></span>
<span class="loading-progress-icon">
<span class="pjax-progress-bar"></span>
<span class="pjax-progress-icon">
<i class="fas fa-circle-notch fa-spin"></i>
</span>
<% } %>

7
source/css/common/basic.styl
View File

@ -16,6 +16,11 @@ html, body {
font-size: $default-font-size;
line-height: $default-font-line-height;
&::-webkit-scrollbar {
width: 8px;
height: 6px;
}
+keep-tablet() {
font-size: $default-font-size * 0.96;
line-height: $default-font-line-height * 0.96;
@ -39,7 +44,7 @@ html, body {
}
&::-webkit-scrollbar-thumb {
background: var(--scroll-bar-color);
background: var(--scrollbar-color);
}
&::-webkit-scrollbar-track {

14
source/css/common/variables.styl
View File

@ -8,7 +8,7 @@
// ========================================================================================
$header-height = 76px; // header height
$header-shrink-height = $header-height * 0.72; // header shrink height
$scroll-progress-bar-height = 2.8px; // scroll progress bar height
$scroll-progress-bar-height = 2px; // scroll progress bar height
$main-content-width = 80%; // main content width (PC)
$main-content-width-tablet = 86%; // main content width (tablet)
$main-content-width-mobile = 90%; // main content width (mobile)
@ -71,12 +71,12 @@ $border-color = darken($background-color, 30%);
$selection-color = lighten($primary-color, 10%);
$shadow-color = rgba(0, 0, 0, 0.2);
$shadow-hover-color = rgba(0, 0, 0, 0.28);
$scroll-bar-color = lighten($default-text-color, 20%);
$scrollbar-color = lighten($default-text-color, 20%);
$scroll-bar-bg-color = darken($background-color, 10%);
$link-color = darken($default-text-color, 10%);
$copyright-info-color = #CC0033;
$avatar-background-color = #0066CC;
$loading-progress-bar-color = linear-gradient(45deg, #ef0e18, #ff5f00, #eea40b, #1fe708, #00d6d6, #016bd7, #f300f3);
$pjax-progress-bar-color = linear-gradient(45deg, #ef0e18, #ff5f00, #eea40b, #1fe708, #00d6d6, #016bd7, #f300f3);
// ========================================================================================
@ -94,12 +94,12 @@ $dark-border-color = lighten($dark-background-color, 20%);
$dark-selection-color = $selection-color;
$dark-shadow-color = rgba(128, 128, 128, 0.2);
$dark-shadow-hover-color = rgba(128, 128, 128, 0.28);
$dark-scroll-bar-color = darken($dark-background-color, 30%);
$dark-scrollbar-color = darken($dark-background-color, 30%);
$dark-scroll-bar-bg-color = lighten($dark-background-color, 10%);
$dark-link-color = lighten($dark-default-text-color, 10%);
$dark-copyright-info-color = darken($copyright-info-color, 20%);
$dark-avatar-background-color = darken($avatar-background-color, 10%);
$dark-loading-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
$dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
// ========================================================================
@ -127,12 +127,12 @@ root-color(mode) {
--selection-color: mode == 'light' ? $selection-color : $dark-selection-color;
--shadow-color: mode == 'light' ? $shadow-color : $dark-shadow-color;
--shadow-hover-color: mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color;
--scroll-bar-color: mode == 'light' ? $scroll-bar-color : $dark-scroll-bar-color;
--scrollbar-color: mode == 'light' ? $scrollbar-color : $dark-scrollbar-color;
--scroll-bar-bg-color: mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color;
--link-color: mode == 'light' ? $link-color : $dark-link-color;
--copyright-info-color: mode == 'light' ? $copyright-info-color : $dark-copyright-info-color;
--avatar-background-color: mode == 'light' ? $avatar-background-color : $dark-avatar-background-color;
--loading-progress-bar-color : mode == 'light' ? $loading-progress-bar-color : $dark-loading-progress-bar-color;
--pjax-progress-bar-color : mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color;
}

8
source/css/layout/_partial/progress-bar.styl
View File

@ -5,13 +5,13 @@
width: 100%;
z-index: $z-index-9;
.loading-progress-bar {
.pjax-progress-bar {
position: absolute;
top: 0;
left: 0;
height: 1.8px;
height: 2px;
width: 0;
background: var(--loading-progress-bar-color);
background: var(--pjax-progress-bar-color);
visibility: hidden;
opacity: 0;
z-index: $z-index-8;
@ -25,7 +25,7 @@
}
.loading-progress-icon {
.pjax-progress-icon {
position: absolute;
top: 0;
right: 0;

20
source/js/utils.js
View File

@ -7,8 +7,8 @@ KEEP.initUtils = () => {
pageTop_dom: document.querySelector('.page-main-content-top'),
firstScreen_dom: document.querySelector('.first-screen-container'),
scrollProgressBar_dom: document.querySelector('.scroll-progress-bar'),
loadingProgressBar_dom: document.querySelector('.loading-progress-bar'),
loadingProgressCircle_dom: document.querySelector('.loading-progress-icon'),
pjaxProgressBar_dom: document.querySelector('.pjax-progress-bar'),
pjaxProgressIcon_dom: document.querySelector('.pjax-progress-icon'),
innerHeight: window.innerHeight,
loadingProgressBarTimer: null,
@ -240,31 +240,31 @@ KEEP.initUtils = () => {
// loading progress bar start
loadingProgressBarStart() {
this.loadingProgressBarTimer && clearInterval(this.loadingProgressBarTimer);
this.loadingProgressBar_dom.style.width = '0';
this.pjaxProgressBar_dom.style.width = '0';
this.scrollProgressBar_dom.classList.add('hide');
this.loadingProgressCircle_dom.classList.add('show');
this.pjaxProgressIcon_dom.classList.add('show');
let width = 5;
const maxWidth = 99;
this.loadingProgressBar_dom.classList.add('show');
this.loadingProgressBar_dom.style.width = width + '%';
this.pjaxProgressBar_dom.classList.add('show');
this.pjaxProgressBar_dom.style.width = width + '%';
this.loadingProgressBarTimer = setInterval(() => {
width += 5;
if (width > maxWidth) width = maxWidth;
this.loadingProgressBar_dom.style.width = width + '%';
this.pjaxProgressBar_dom.style.width = width + '%';
}, 100);
},
// loading progress bar end
loadingProgressBarEnd() {
this.loadingProgressBarTimer && clearInterval(this.loadingProgressBarTimer);
this.loadingProgressBar_dom.style.width = '100%';
this.pjaxProgressBar_dom.style.width = '100%';
const tempTimeout = setTimeout(() => {
this.loadingProgressBar_dom.classList.remove('show');
this.loadingProgressCircle_dom.classList.remove('show');
this.pjaxProgressBar_dom.classList.remove('show');
this.pjaxProgressIcon_dom.classList.remove('show');
this.scrollProgressBar_dom.classList.remove('hide');
clearTimeout(tempTimeout);
}, 200);