From 41184ad1d809fdf3d9a2ccf02d6a44f7efc58162 Mon Sep 17 00:00:00 2001 From: hehh Date: Sun, 30 Nov 2025 16:02:49 +0800 Subject: [PATCH] =?UTF-8?q?feat(about):=20=E6=89=A9=E5=B1=95=E6=B8=90?= =?UTF-8?q?=E5=8F=98=E8=89=B2=E6=9D=BF=E5=B9=B6=E4=BC=98=E5=8C=96=E6=8A=80?= =?UTF-8?q?=E6=9C=AF=E6=A0=87=E7=AD=BE=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 15 种 CSS 渐变色变量（从 --gradient-11 到 --gradient-25） - 为白天和夜间主题添加对应的新技术标签颜色类（.tag-color-11 到 .tag-color-25） - 更新 JavaScript 中 gradientId 的取值范围从 10 扩展到 25 - 移除旧的控制台日志输出 - 调整配置文件中的空行格式，提升可读性 --- css/about.css | 231 +++++++++++++++++++++++++++++++++++++++++++++++++- js/about.js | 9 +- js/config.js | 43 +++------- 3 files changed, 241 insertions(+), 42 deletions(-) diff --git a/css/about.css b/css/about.css index fb0efb4..5640586 100644 --- a/css/about.css +++ b/css/about.css @@ -37,10 +37,22 @@ --gradient-8: linear-gradient(135deg, #fccb90, #d57eeb); --gradient-9: linear-gradient(135deg, #ffecd2, #fcb69f); --gradient-10: linear-gradient(135deg, #cfd9df, #e2ebf0); - --day-tag-1: #0ea5e9; - --day-tag-2: #ef4444; - --day-tag-3: #10b981; - --day-tag-4: #f59e0b; + --gradient-11: linear-gradient(135deg, #74ebd5, #ACB6E5); /* 薄荷绿+浅紫蓝 */ + --gradient-12: linear-gradient(135deg, #ff7e5f, #feb47b); /* 珊瑚橙+浅橙 */ + --gradient-13: linear-gradient(135deg, #667eea, #764ba2); /* 深紫蓝+紫罗兰 */ + --gradient-14: linear-gradient(135deg, #ff8080, #92fe9d); /* 柔粉+嫩绿 */ + --gradient-15: linear-gradient(135deg, #a18cd1, #fbc2eb); /* 淡紫+粉紫 */ + --gradient-16: linear-gradient(135deg, #2af598, #009efd); /* 荧光绿+天蓝 */ + --gradient-17: linear-gradient(135deg, #ffd1ff, #fa8bff); /* 浅粉紫+亮粉 */ + --gradient-18: linear-gradient(135deg, #89f7fe, #66a6ff); /* 冰蓝+浅蓝 */ + --gradient-19: linear-gradient(135deg, #ff9a9e, #fad0c4); /* 蜜桃粉+浅桃色 */ + --gradient-20: linear-gradient(135deg, #642b73, #c6426e); /* 深紫+玫红 */ + --gradient-21: linear-gradient(135deg, #43e97b, #38f9d7); /* 青柠绿+青蓝 */ + --gradient-22: linear-gradient(135deg, #f12711, #f5af19); /* 猩红+金黄 */ + --gradient-23: linear-gradient(135deg, #4158d0, #c850c0); /* 蓝紫+玫紫 */ + --gradient-24: linear-gradient(135deg, #ffffff, #ddd6fe); /* 纯白+淡紫 */ + --gradient-25: linear-gradient(135deg, #00dbde, #fc00ff); /* 青蓝+霓虹粉 */ + } [data-theme="night"] { @@ -1321,6 +1333,81 @@ body { [data-theme="day"] .tech-tag-mobile.tag-color-9 { color: #6b7280 !important; -webkit-text-fill-color: #6b7280 !important; } [data-theme="day"] .tech-tag-3d.tag-color-10, [data-theme="day"] .tech-tag-mobile.tag-color-10 { color: #1f2937 !important; -webkit-text-fill-color: #1f2937 !important; } +[data-theme="day"] .tech-tag-3d.tag-color-11, +[data-theme="day"] .tech-tag-mobile.tag-color-11 { + color: #ACB6E5 !important; + -webkit-text-fill-color: #ACB6E5 !important; +} +[data-theme="day"] .tech-tag-3d.tag-color-12, +[data-theme="day"] .tech-tag-mobile.tag-color-12 { + color: #ff7e5f !important; + -webkit-text-fill-color: #ff7e5f !important; +} +[data-theme="day"] .tech-tag-3d.tag-color-13, +[data-theme="day"] .tech-tag-mobile.tag-color-13 { + color: #764ba2 !important; + -webkit-text-fill-color: #764ba2 !important; +} +[data-theme="day"] .tech-tag-3d.tag-color-14, +[data-theme="day"] .tech-tag-mobile.tag-color-14 { + color: #ff8080 !important; + -webkit-text-fill-color: #ff8080 !important; +} +[data-theme="day"] .tech-tag-3d.tag-color-15, +[data-theme="day"] .tech-tag-mobile.tag-color-15 { + color: #2af598 !important; + -webkit-text-fill-color: #2af598 !important; +} +[data-theme="day"] .tech-tag-3d.tag-color-16, +[data-theme="day"] .tech-tag-mobile.tag-color-16 { + color: #ffd1ff !important; + -webkit-text-fill-color: #ffd1ff !important; +} +[data-theme="day"] .tech-tag-3d.tag-color-17, +[data-theme="day"] .tech-tag-mobile.tag-color-17 { + color: #89f7fe !important; + -webkit-text-fill-color: #89f7fe !important; +} +[data-theme="day"] .tech-tag-3d.tag-color-18, +[data-theme="night"] .tech-tag-mobile.tag-color-18 { + color: #ff9a9e !important; + -webkit-text-fill-color: #ff9a9e !important; +} +[data-theme="day"] .tech-tag-3d.tag-color-19, +[data-theme="day"] .tech-tag-mobile.tag-color-19 { + color: #642b73 !important; + -webkit-text-fill-color: #642b73 !important; +} +[data-theme="day"] .tech-tag-3d.tag-color-20, +[data-theme="day"] .tech-tag-mobile.tag-color-20 { + color: #38f9d7 !important; + -webkit-text-fill-color: #38f9d7 !important; +} +[data-theme="day"] .tech-tag-3d.tag-color-21, +[data-theme="day"] .tech-tag-mobile.tag-color-21 { + color: #f5af19 !important; + -webkit-text-fill-color: #f5af19 !important; +} +[data-theme="day"] .tech-tag-3d.tag-color-22, +[data-theme="day"] .tech-tag-mobile.tag-color-22 { + color: #c850c0 !important; + -webkit-text-fill-color: #c850c0 !important; +} +[data-theme="day"] .tech-tag-3d.tag-color-23, +[data-theme="day"] .tech-tag-mobile.tag-color-23 { + color: #ffffff !important; + -webkit-text-fill-color: #ffffff !important; +} +[data-theme="day"] .tech-tag-3d.tag-color-24, +[data-theme="day"] .tech-tag-mobile.tag-color-24 { + color: #fc00ff !important; + -webkit-text-fill-color: #fc00ff !important; +} +[data-theme="day"] .tech-tag-3d.tag-color-25, +[data-theme="day"] .tech-tag-mobile.tag-color-25 { + color: #fad0c4 !important; + -webkit-text-fill-color: #fad0c4 !important; +} /* Night Theme */ [data-theme="night"] .tech-tag-3d.tag-color-1, @@ -1413,6 +1500,142 @@ body { background-color: transparent !important; -webkit-text-fill-color: transparent !important; } +[data-theme="night"] .tech-tag-3d.tag-color-11, +[data-theme="night"] .tech-tag-mobile.tag-color-11 { + background: var(--gradient-11) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; +} +[data-theme="night"] .tech-tag-3d.tag-color-12, +[data-theme="night"] .tech-tag-mobile.tag-color-12 { + background: var(--gradient-12) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; +} +[data-theme="night"] .tech-tag-3d.tag-color-13, +[data-theme="night"] .tech-tag-mobile.tag-color-13 { + background: var(--gradient-13) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; +} +[data-theme="night"] .tech-tag-3d.tag-color-14, +[data-theme="night"] .tech-tag-mobile.tag-color-14 { + background: var(--gradient-14) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; +} +[data-theme="night"] .tech-tag-3d.tag-color-15, +[data-theme="night"] .tech-tag-mobile.tag-color-15 { + background: var(--gradient-15) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; +} +[data-theme="night"] .tech-tag-3d.tag-color-16, +[data-theme="night"] .tech-tag-mobile.tag-color-16 { + background: var(--gradient-16) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; +} +[data-theme="night"] .tech-tag-3d.tag-color-17, +[data-theme="night"] .tech-tag-mobile.tag-color-17 { + background: var(--gradient-17) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; +} +[data-theme="night"] .tech-tag-3d.tag-color-18, +[data-theme="night"] .tech-tag-mobile.tag-color-18 { + background: var(--gradient-18) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; +} +[data-theme="night"] .tech-tag-3d.tag-color-19, +[data-theme="night"] .tech-tag-mobile.tag-color-19 { + background: var(--gradient-19) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; +} +[data-theme="night"] .tech-tag-3d.tag-color-20, +[data-theme="night"] .tech-tag-mobile.tag-color-20 { + background: var(--gradient-20) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; +} +[data-theme="night"] .tech-tag-3d.tag-color-21, +[data-theme="night"] .tech-tag-mobile.tag-color-21 { + background: var(--gradient-21) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; +} +[data-theme="night"] .tech-tag-3d.tag-color-22, +[data-theme="night"] .tech-tag-mobile.tag-color-22 { + background: var(--gradient-22) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; +} +[data-theme="night"] .tech-tag-3d.tag-color-23, +[data-theme="night"] .tech-tag-mobile.tag-color-23 { + background: var(--gradient-23) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; +} +[data-theme="night"] .tech-tag-3d.tag-color-24, +[data-theme="night"] .tech-tag-mobile.tag-color-24 { + background: var(--gradient-24) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; +} +[data-theme="night"] .tech-tag-3d.tag-color-25, +[data-theme="night"] .tech-tag-mobile.tag-color-25 { + background: var(--gradient-25) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + background-color: transparent !important; + -webkit-text-fill-color: transparent !important; +} + /* Gradient Fallback for Unsupported Browsers */ @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .tech-tag-3d, .tech-tag-mobile { diff --git a/js/about.js b/js/about.js index 87e5212..66a88e2 100644 --- a/js/about.js +++ b/js/about.js @@ -834,8 +834,8 @@ class UIManager { //const name = item.name || ''; //const hash = Array.from(name).reduce((a, c) => a + c.charCodeAt(0), 0); const gid = Number(item.gradientId) && Number.isFinite(Number(item.gradientId)) - ? Math.max(1, Math.min(10, Number(item.gradientId))) - : (idx % 10) + 1; + ? Math.max(1, Math.min(25, Number(item.gradientId))) + : (idx % 25) + 1; return {...item, gradientId: gid}; }); @@ -894,7 +894,7 @@ class UIManager { const appendItem = (rowEl, item, idx) => { const el = document.createElement('span'); el.className = 'tech-tag-mobile'; - const colorClass = `tag-color-${item.gradientId || ((idx % 10) + 1)}`; + const colorClass = `tag-color-${item.gradientId || ((idx % 25) + 1)}`; el.classList.add(colorClass); el.innerText = item.name; el.style.border = 'none'; @@ -934,7 +934,7 @@ class UIManager { techStack.forEach((item, index) => { const el = document.createElement('a'); el.className = 'tech-tag-3d'; - const colorClass = `tag-color-${item.gradientId || ((index % 10) + 1)}`; + const colorClass = `tag-color-${item.gradientId || ((index % 25) + 1)}`; el.classList.add(colorClass); el.innerText = item.name; el.style.border = 'none'; @@ -1035,7 +1035,6 @@ class UIManager { const isMobile = window.matchMedia('(max-width: 768px)').matches; const currentState = isMobile ? 'mobile' : 'desktop'; if (windowRef === currentState) { - console.log('Tech Cloud: Skipping resize, same state:', windowRef, currentState); return } windowRef = currentState; diff --git a/js/config.js b/js/config.js index 2067759..480ff8c 100644 --- a/js/config.js +++ b/js/config.js @@ -15,7 +15,7 @@ const SiteConfig = { increment: 150 } }, - + background: { imagePaths: [ "/images/bj/1.webp", @@ -27,7 +27,7 @@ const SiteConfig = { "/images/bj/7.webp" ] }, - + hitokoto: { apiUrl: 'https://v1.hitokoto.cn?c=c&c=d&c=i&c=k' }, @@ -36,7 +36,7 @@ const SiteConfig = { github: { username: 'listener-He' }, - + blog: { rssUrl: 'https://blog.hehouhui.cn/api/rss' }, @@ -47,7 +47,7 @@ const SiteConfig = { blog: { key: 'blog_data_v2', ttlMs: 3600000 }, theme: { key: 'theme_v2', ttlMs: 3600000 } }, - + techStack: [ { name: 'Java', category: 'core', weight: 5 }, { name: 'Spring Boot', category: 'backend', weight: 5 }, @@ -115,13 +115,13 @@ const SiteConfig = { ], user: { repos: 165, followers: 6, created: "2018-05-14" } }, - + socialCards: { rings: [130, 180, 230], goldenAngle: 137.5, baseSpeed: 16 }, - + artalk: { server: 'https://artalk.hehouhui.cn', site: 'Honesty的主页', @@ -129,7 +129,7 @@ const SiteConfig = { noComment: '暂无评论', sendBtn: '发送' }, - + // 站点统计配置 analytics: { busuanzi: { @@ -152,7 +152,7 @@ const SiteConfig = { ck: '3OBGjwDdEIRS7XZ1' } }, - + animationSettings: { observerOptions: { threshold: 0.1, @@ -163,40 +163,17 @@ const SiteConfig = { rootMargin: '0px 0px -20px 0px' } }, - + // 开发环境配置 dev: { isLocal: (typeof location !== 'undefined') ? (location.hostname.indexOf('localhost') > -1 || location.hostname.indexOf('127.0.0.1') > -1) : false } }; -if (Array.isArray(SiteConfig.techStack)) { - const categoryGradientMap = { - core: 7, - backend: 4, - data: 9, - ops: 10, - ai: 3 - }; - const vividSet = [1, 4, 7, 8]; - - SiteConfig.techStack = SiteConfig.techStack.map((item) => { - const name = item.name || ''; - const hash = Array.from(name).reduce((a, c) => a + c.charCodeAt(0), 0); - if (item.gradientId && Number.isFinite(Number(item.gradientId))) { - return { ...item, gradientId: Math.max(1, Math.min(10, Number(item.gradientId))) }; - } - let base = categoryGradientMap[item.category] || ((hash % 10) + 1); - if (Number(item.weight) >= 5) { - base = vividSet[hash % vividSet.length]; - } - return { ...item, gradientId: base }; - }); -} // 导出配置 if (typeof module !== 'undefined' && module.exports) { module.exports = SiteConfig; } else if (typeof window !== 'undefined') { window.SiteConfig = SiteConfig; -} \ No newline at end of file +}