From ad74ec2789a2a397cbb0650a99193f423782fe4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9D=92=E7=A8=9A?= Date: Thu, 26 Dec 2024 00:05:38 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=9C=AC=E5=9C=B0?= =?UTF-8?q?=E5=8F=96=E8=89=B2=E7=BC=BA=E5=B0=91=E7=9A=84=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 青稚 --- source/js/covercolor/local.js | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/source/js/covercolor/local.js b/source/js/covercolor/local.js index 74567907..05873ec9 100644 --- a/source/js/covercolor/local.js +++ b/source/js/covercolor/local.js @@ -62,13 +62,36 @@ const setThemeColors = (value, r = null, g = null, b = null) => { } function LightenDarkenColor(col, amt) { + var usePound = false; - if (col[0] === "#") { + + if (col[0] == "#") { col = col.slice(1); usePound = true; } + + var num = parseInt(col,16); + + var r = (num >> 16) + amt; + + if (r > 255) r = 255; + else if (r < 0) r = 0; + + var b = ((num >> 8) & 0x00FF) + amt; + + if (b > 255) b = 255; + else if (b < 0) b = 0; + + var g = (num & 0x0000FF) + amt; + + if (g > 255) g = 255; + else if (g < 0) g = 0; + + return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16); + } + const adjustCardStyles = () => { const cardContents = document.getElementsByClassName('card-content'); Array.from(cardContents).forEach(item => { From b67e5f6202d7e742f305c642b5fc84260ceb7a0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9D=92=E7=A8=9A?= Date: Thu, 26 Dec 2024 00:15:30 +0800 Subject: [PATCH 2/5] Update local.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 青稚 --- source/js/covercolor/local.js | 1 - 1 file changed, 1 deletion(-) diff --git a/source/js/covercolor/local.js b/source/js/covercolor/local.js index 05873ec9..d3d80fbb 100644 --- a/source/js/covercolor/local.js +++ b/source/js/covercolor/local.js @@ -91,7 +91,6 @@ function LightenDarkenColor(col, amt) { } - const adjustCardStyles = () => { const cardContents = document.getElementsByClassName('card-content'); Array.from(cardContents).forEach(item => { From 6d6ce78e2d867ae4a42e4fad57f6bcd3524b8067 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9D=92=E7=A8=9A?= Date: Thu, 26 Dec 2024 00:22:16 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E5=8E=BB=E9=99=A4=E5=A4=9A=E4=BD=99?= =?UTF-8?q?=E7=A9=BA=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 青稚 --- source/js/covercolor/local.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/source/js/covercolor/local.js b/source/js/covercolor/local.js index d3d80fbb..f48b87a8 100644 --- a/source/js/covercolor/local.js +++ b/source/js/covercolor/local.js @@ -61,34 +61,23 @@ const setThemeColors = (value, r = null, g = null, b = null) => { initThemeColor(); } -function LightenDarkenColor(col, amt) { - +function LightenDarkenColor(col, amt) { var usePound = false; - if (col[0] == "#") { col = col.slice(1); usePound = true; } - var num = parseInt(col,16); - var r = (num >> 16) + amt; - if (r > 255) r = 255; else if (r < 0) r = 0; - var b = ((num >> 8) & 0x00FF) + amt; - if (b > 255) b = 255; else if (b < 0) b = 0; - var g = (num & 0x0000FF) + amt; - if (g > 255) g = 255; else if (g < 0) g = 0; - return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16); - } const adjustCardStyles = () => { From 4dbc475d936580ec70e863243593d90f98fd391e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9D=92=E7=A8=9A?= <130018882+Linux-qitong@users.noreply.github.com> Date: Thu, 26 Dec 2024 12:06:27 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=E5=8E=BB=E9=99=A4=E5=A4=9A=E4=BD=99?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 经过测试，这个代码可以去除 Signed-off-by: 青稚 <130018882+Linux-qitong@users.noreply.github.com> --- source/js/covercolor/local.js | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/source/js/covercolor/local.js b/source/js/covercolor/local.js index f48b87a8..7d61c5f5 100644 --- a/source/js/covercolor/local.js +++ b/source/js/covercolor/local.js @@ -61,25 +61,6 @@ const setThemeColors = (value, r = null, g = null, b = null) => { initThemeColor(); } -function LightenDarkenColor(col, amt) { - var usePound = false; - if (col[0] == "#") { - col = col.slice(1); - usePound = true; - } - var num = parseInt(col,16); - var r = (num >> 16) + amt; - if (r > 255) r = 255; - else if (r < 0) r = 0; - var b = ((num >> 8) & 0x00FF) + amt; - if (b > 255) b = 255; - else if (b < 0) b = 0; - var g = (num & 0x0000FF) + amt; - if (g > 255) g = 255; - else if (g < 0) g = 0; - return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16); -} - const adjustCardStyles = () => { const cardContents = document.getElementsByClassName('card-content'); Array.from(cardContents).forEach(item => { From a0e6276a7e789385efe6bdf40b7ece0705be9d7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9D=92=E7=A8=9A?= <130018882+Linux-qitong@users.noreply.github.com> Date: Thu, 26 Dec 2024 13:22:55 +0800 Subject: [PATCH 5/5] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Key Optimizations: 1.Minimized DOM Access: Using and for batch processing instead of repetitive .document.querySelectorAllforEachgetElementsByClassName 2.Reduced Repetitive Calculations: Cached values and made calculations inline where appropriate. 3.Modern JavaScript Features: Used destructuring, , and arrow functions for cleaner and more concise code.const 关键优化： 1.最小化 DOM 访问：使用 和 进行批处理，而不是重复 .document.querySelectorAllforEachgetElementsByClassName 2.减少重复计算：缓存值并在适当的情况下进行内联计算。 30现代 JavaScript 功能：使用解构、 和 箭头函数 来获得更简洁、更简洁的代码。const Signed-off-by: 青稚 <130018882+Linux-qitong@users.noreply.github.com> --- source/js/covercolor/local.js | 48 +++++++++++++++++++++++++---------- 1 file changed, 34 insertions(+), 14 deletions(-) diff --git a/source/js/covercolor/local.js b/source/js/covercolor/local.js index 7d61c5f5..1f460472 100644 --- a/source/js/covercolor/local.js +++ b/source/js/covercolor/local.js @@ -1,9 +1,10 @@ const coverColor = () => { const pageColor = PAGE_CONFIG.color || document.getElementById("post-cover")?.src; if (pageColor) { - return localColor(pageColor); + localColor(pageColor); + } else { + setDefaultThemeColors(); } - setDefaultThemeColors(); } const setDefaultThemeColors = () => { @@ -19,20 +20,20 @@ const setDefaultThemeColors = () => { initThemeColor(); } -const localColor = path => { +const localColor = (path) => { const colorThief = new ColorThief(); const img = new Image(); img.crossOrigin = "Anonymous"; - img.onload = () => setThemeColors(rgbToHex(colorThief.getColor(img)), ...colorThief.getColor(img)); + img.onload = () => { + const color = colorThief.getColor(img); + setThemeColors(rgbToHex(color), ...color); + }; img.onerror = () => console.error('Image Error'); img.src = path; } const rgbToHex = ([r, g, b]) => { - return '#' + [r, g, b].map(x => { - const component = Math.floor(x * 0.8); - return component.toString(16).padStart(2, '0'); - }).join(''); + return '#' + [r, g, b].map(x => Math.floor(x * 0.8).toString(16).padStart(2, '0')).join(''); } const setThemeColors = (value, r = null, g = null, b = null) => { @@ -44,12 +45,13 @@ const setThemeColors = (value, r = null, g = null, b = null) => { '--efu-main-op-deep': value + 'dd', '--efu-main-none': value + '00' }; + Object.entries(themeColors).forEach(([key, color]) => { document.documentElement.style.setProperty(key, color); }); - if (r && g && b) { - const brightness = Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) / 1000); + if (r !== null && g !== null && b !== null) { + const brightness = Math.round(((r * 299) + (g * 587) + (b * 114)) / 1000); if (brightness < 125) { adjustCardStyles(); value = LightenDarkenColor(value, 50); @@ -61,14 +63,32 @@ const setThemeColors = (value, r = null, g = null, b = null) => { initThemeColor(); } +const LightenDarkenColor = (col, amt) => { + let usePound = false; + if (col[0] === "#") { + col = col.slice(1); + usePound = true; + } + let num = parseInt(col, 16); + let r = (num >> 16) + amt; + let g = ((num >> 8) & 0x00FF) + amt; + let b = (num & 0x0000FF) + amt; + + r = Math.max(Math.min(r, 255), 0); + g = Math.max(Math.min(g, 255), 0); + b = Math.max(Math.min(b, 255), 0); + + return (usePound ? "#" : "") + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); +} + const adjustCardStyles = () => { - const cardContents = document.getElementsByClassName('card-content'); - Array.from(cardContents).forEach(item => { + const cardContents = document.querySelectorAll('.card-content'); + cardContents.forEach(item => { item.style.setProperty('--efu-card-bg', 'var(--efu-white)'); }); - const authorInfo = document.getElementsByClassName('author-info__sayhi'); - Array.from(authorInfo).forEach(item => { + const authorInfo = document.querySelectorAll('.author-info__sayhi'); + authorInfo.forEach(item => { item.style.setProperty('background', 'var(--efu-white-op)'); item.style.setProperty('color', 'var(--efu-white)'); });